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" 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 }, () => { return Array.from({ length: count }, () => {
const x = (Math.random() * 100).toFixed(2) const x = (Math.random() * 100).toFixed(2)
const y = (Math.random() * 100).toFixed(2) const y = (Math.random() * 100).toFixed(2)
const op = (Math.random() * (maxOp - minOp) + minOp).toFixed(2) const op = (Math.random() * (maxOp - minOp) + minOp).toFixed(2)
const size = minSize + Math.random() * (maxSize - minSize) const size = (minSize + Math.random() * (maxSize - minSize)).toFixed(1)
return `${x}vw ${y}vh 0 ${size.toFixed(1)}px rgba(255,255,255,${op})` 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(",") }).join(",")
} }
export default function StarField() { export default function StarField() {
const dimRef = useRef<HTMLDivElement>(null) // many dim stars const dimRef = useRef<HTMLDivElement>(null)
const brightRef = useRef<HTMLDivElement>(null) // few bright stars const brightRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
// Layer 1: 280 small dim stars const generate = () => {
if (dimRef.current) dimRef.current.style.boxShadow = makeStars(280, 0.25, 0.6, 1, 1.2) const dark = document.documentElement.classList.contains("dark")
// Layer 2: 40 larger bright stars 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) 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 = { const base: React.CSSProperties = {