From 388a2e500e635ab41a6ff2d298ee3bfbc600953a Mon Sep 17 00:00:00 2001 From: rxyhn Date: Tue, 24 Sep 2024 08:56:59 +0700 Subject: [PATCH] fix: particles colors --- src/components/Starry.tsx | 63 ++++++++++++------------------------ src/layouts/PageLayout.astro | 2 +- 2 files changed, 21 insertions(+), 44 deletions(-) diff --git a/src/components/Starry.tsx b/src/components/Starry.tsx index d71d013..01a9d91 100644 --- a/src/components/Starry.tsx +++ b/src/components/Starry.tsx @@ -1,5 +1,3 @@ -"use client"; - import { useEffect, useMemo, useState } from "react"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import { type Container, type ISourceOptions } from "@tsparticles/engine"; @@ -18,13 +16,12 @@ type ParticlesProps = { opacity?: number; }; -let themeableContainer: Container | undefined; - const Starry = (props: ParticlesProps) => { const { id, className, minSize, maxSize, speed, particleDensity, opacity } = props; const [init, setInit] = useState(false); + const [particleColor, setParticleColor] = useState("#000"); const controls = useAnimation(); useEffect(() => { @@ -34,26 +31,36 @@ const Starry = (props: ParticlesProps) => { setInit(true); }); - const updateTheme = () => { + const updateParticleColor = () => { const isDarkMode = document.documentElement.classList.contains("dark"); - themeableContainer?.loadTheme(isDarkMode ? "dark" : "light"); + setParticleColor(isDarkMode ? "#FFF" : "#000"); }; - const observer = new MutationObserver(updateTheme); + updateParticleColor(); + + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if ( + mutation.type === "attributes" && + mutation.attributeName === "class" + ) { + updateParticleColor(); + } + }); + }); + observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); - updateTheme(); - - return () => observer.disconnect(); + return () => { + observer.disconnect(); + }; }, []); const particlesLoaded = async (container?: Container): Promise => { if (container) { - themeableContainer = container; - themeableContainer!.canvas.initBackground(); controls.start({ opacity: opacity || 1, transition: { @@ -128,7 +135,7 @@ const Starry = (props: ParticlesProps) => { }, }, color: { - value: "#fff", + value: particleColor, animation: { h: { count: 0, @@ -431,36 +438,6 @@ const Starry = (props: ParticlesProps) => { speed: 1, }, }, - themes: [ - { - name: "dark", - default: { - value: true, - mode: "dark", - }, - options: { - particles: { - color: { - value: "#fff", - }, - }, - }, - }, - { - name: "light", - default: { - value: false, - mode: "light", - }, - options: { - particles: { - color: { - value: "#000", - }, - }, - }, - }, - ], detectRetina: true, }), [], diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index d3252fc..4632cdc 100644 --- a/src/layouts/PageLayout.astro +++ b/src/layouts/PageLayout.astro @@ -18,7 +18,7 @@ import { SITE } from "@/consts";