fix: particles colors

raexera · Sep 24, 2024 · 388a2e5 · 388a2e5
1 parent 0bee524
commit 388a2e5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 44 deletions.
diff --git 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<void> => {
     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
@@ -18,7 +18,7 @@ import { SITE } from "@/consts";
   <body>
     <Boxes client:load />
     <Starry
-      client:load
+      client:idle
       id="tsparticlesfullpage"
       minSize={0.5}
       maxSize={1.5}