From 9ab04f8aeac4fb5933bc76fcd53a2b5469913004 Mon Sep 17 00:00:00 2001
From: jiwangyihao <jwyh@jwyihao.top>
Date: Wed, 4 Jun 2025 01:36:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=9A=97=E9=BB=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=9D=E5=A7=8B=E5=8C=96=E8=84=9A=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.vue             | 67 ++++++++++++++++++++++++++-------------------
 nuxt.config.ts      |  5 ++++
 public/init_dark.js | 12 ++++++++
 3 files changed, 56 insertions(+), 28 deletions(-)
 create mode 100644 public/init_dark.js

diff --git a/app.vue b/app.vue
index 03e2578..69b67ce 100644
--- a/app.vue
+++ b/app.vue
@@ -120,36 +120,47 @@ onMounted(() => {
   if (savedDarkMode) {
     sDarkConfig.value = savedDarkMode;
   }
-  watchEffect(async () => {
-    const sDarkValue = sDark.value;
+  watch(
+    sDark,
+    async (newValue, oldValue) => {
+      console.log("Dark mode changed:", newValue, oldValue);
+      const sDarkValue = newValue;
 
-    if (!enableTransitions()) {
-      document.documentElement.classList.toggle("s-dark", sDarkValue);
-      return;
-    }
-
-    const clipPath = [
-      `circle(0px at ${mouseX.value}px ${mouseY.value}px)`,
-      `circle(${Math.hypot(
-        Math.max(mouseX.value, innerWidth - mouseX.value),
-        Math.max(mouseY.value, innerHeight - mouseY.value)
-      )}px at ${mouseX.value}px ${mouseY.value}px)`,
-    ];
-
-    await document.startViewTransition(async () => {
-      document.documentElement.classList.toggle("s-dark", sDarkValue);
-      await nextTick();
-    }).ready;
-
-    document.documentElement.animate(
-      { clipPath: sDarkValue ? clipPath.reverse() : clipPath },
-      {
-        duration: 300,
-        easing: "ease-in",
-        pseudoElement: `::view-transition-${sDarkValue ? "old" : "new"}(root)`,
+      if (oldValue === undefined) {
+        return;
       }
-    );
-  });
+
+      if (!enableTransitions()) {
+        document.documentElement.classList.toggle("s-dark", sDarkValue);
+        return;
+      }
+
+      const clipPath = [
+        `circle(0px at ${mouseX.value}px ${mouseY.value}px)`,
+        `circle(${Math.hypot(
+          Math.max(mouseX.value, innerWidth - mouseX.value),
+          Math.max(mouseY.value, innerHeight - mouseY.value)
+        )}px at ${mouseX.value}px ${mouseY.value}px)`,
+      ];
+
+      await document.startViewTransition(async () => {
+        document.documentElement.classList.toggle("s-dark", sDarkValue);
+        await nextTick();
+      }).ready;
+
+      document.documentElement.animate(
+        { clipPath: sDarkValue ? clipPath.reverse() : clipPath },
+        {
+          duration: 300,
+          easing: "ease-in",
+          pseudoElement: `::view-transition-${
+            sDarkValue ? "old" : "new"
+          }(root)`,
+        }
+      );
+    },
+    { immediate: true }
+  );
 });
 </script>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9097479..5875e7e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -38,6 +38,11 @@ export default defineNuxtConfig({
           href: "/icon/spark.svg",
         },
       ],
+      script: [
+        {
+          src: "/init_dark.js",
+        },
+      ],
     },
   },
   vite: {
diff --git a/public/init_dark.js b/public/init_dark.js
new file mode 100644
index 0000000..c18ae9c
--- /dev/null
+++ b/public/init_dark.js
@@ -0,0 +1,12 @@
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+const darkMode = localStorage.getItem("darkMode");
+const sDarkValue =
+  darkMode === "auto"
+    ? isDarkMode
+      ? true
+      : false
+    : darkMode === "dark"
+    ? true
+    : false;
+
+document.documentElement.classList.toggle("s-dark", sDarkValue);