From 4ca69a2b0d88ca8a006c95031f15f120a43bd19c Mon Sep 17 00:00:00 2001
From: kryptomrx <mrx.anonymousorg@gmail.com>
Date: Mon, 18 May 2026 16:56:47 +0200
Subject: [PATCH] fix: star field adapts color to light/dark mode

---
 src/components/star-field.tsx | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/star-field.tsx b/src/components/star-field.tsx
index 0ba1eaa..5f63110 100644
--- a/src/components/star-field.tsx
+++ b/src/components/star-field.tsx
@@ -2,25 +2,35 @@
 
 import { useEffect, useRef } from "react"
 
-function makeStars(count: number, minOp: number, maxOp: number, minSize: number, maxSize: number): string {
+function makeStars(count: number, minOp: number, maxOp: number, minSize: number, maxSize: number, dark: boolean): string {
   return Array.from({ length: count }, () => {
-    const x = (Math.random() * 100).toFixed(2)
-    const y = (Math.random() * 100).toFixed(2)
-    const op = (Math.random() * (maxOp - minOp) + minOp).toFixed(2)
-    const size = minSize + Math.random() * (maxSize - minSize)
-    return `${x}vw ${y}vh 0 ${size.toFixed(1)}px rgba(255,255,255,${op})`
+    const x    = (Math.random() * 100).toFixed(2)
+    const y    = (Math.random() * 100).toFixed(2)
+    const op   = (Math.random() * (maxOp - minOp) + minOp).toFixed(2)
+    const size = (minSize + Math.random() * (maxSize - minSize)).toFixed(1)
+    const color = dark
+      ? `rgba(255,255,255,${op})`
+      : `rgba(80,70,60,${(parseFloat(op) * 0.35).toFixed(2)})`
+    return `${x}vw ${y}vh 0 ${size}px ${color}`
   }).join(",")
 }
 
 export default function StarField() {
-  const dimRef   = useRef<HTMLDivElement>(null)  // many dim stars
-  const brightRef = useRef<HTMLDivElement>(null) // few bright stars
+  const dimRef    = useRef<HTMLDivElement>(null)
+  const brightRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    // Layer 1: 280 small dim stars
-    if (dimRef.current)    dimRef.current.style.boxShadow    = makeStars(280, 0.25, 0.6,  1,   1.2)
-    // Layer 2: 40 larger bright stars
-    if (brightRef.current) brightRef.current.style.boxShadow = makeStars(40,  0.6,  1.0,  1.5, 2.5)
+    const generate = () => {
+      const dark = document.documentElement.classList.contains("dark")
+      if (dimRef.current)    dimRef.current.style.boxShadow    = makeStars(280, 0.25, 0.6, 1,   1.2, dark)
+      if (brightRef.current) brightRef.current.style.boxShadow = makeStars(40,  0.6,  1.0, 1.5, 2.5, dark)
+    }
+
+    generate()
+
+    const observer = new MutationObserver(generate)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+    return () => observer.disconnect()
   }, [])
 
   const base: React.CSSProperties = {