From a9b5c750e9619d05874db47a7b1505ce32dc75a9 Mon Sep 17 00:00:00 2001
From: rxyhn <rxyhn.dev@gmail.com>
Date: Wed, 11 Sep 2024 22:48:26 +0700
Subject: [PATCH] fix: starry states

---
 src/components/Starry.tsx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/Starry.tsx b/src/components/Starry.tsx
index 6e91b4f..67c6dbb 100644
--- a/src/components/Starry.tsx
+++ b/src/components/Starry.tsx
@@ -40,22 +40,31 @@ const Starry = (props: ParticlesProps) => {
       setInit(true);
     });
 
-    const isDarkMode = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    ).matches;
-    setParticleColor(isDarkMode ? "#FFFFFF" : "#000000");
-
-    const handleThemeChange = (e: MediaQueryListEvent) => {
-      setParticleColor(e.matches ? "#FFFFFF" : "#000000");
+    const updateParticleColor = () => {
+      const isDarkMode = document.documentElement.classList.contains("dark");
+      setParticleColor(isDarkMode ? "#FFFFFF" : "#000000");
     };
 
-    const darkModeMediaQuery = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    );
-    darkModeMediaQuery.addEventListener("change", handleThemeChange);
+    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"],
+    });
 
     return () => {
-      darkModeMediaQuery.removeEventListener("change", handleThemeChange);
+      observer.disconnect();
     };
   }, []);
 
@@ -88,7 +97,6 @@ const Starry = (props: ParticlesProps) => {
               enable: false,
               zIndex: 1,
             },
-
             fpsLimit: 120,
             interactivity: {
               events: {