noz/noz-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: star field adapts color to light/dark mode

Browse source
This commit is contained in:
kryptomrx 2026-05-18 16:56:47 +02:00
parent e4145ea3fd
commit 4ca69a2b0d
1 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/star-field.tsx
View file

@ -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 = {