feat: 优化暗黑模式切换逻辑，添加初始化脚本

app.vue

@@ -120,8 +120,15 @@ onMounted(() => {
   if (savedDarkMode) {
     sDarkConfig.value = savedDarkMode;
   }
-  watchEffect(async () => {
+  watch(
-    const sDarkValue = sDark.value;
+    sDark,
+    async (newValue, oldValue) => {
+      console.log("Dark mode changed:", newValue, oldValue);
+      const sDarkValue = newValue;
+
+      if (oldValue === undefined) {
+        return;
+      }
 
       if (!enableTransitions()) {
         document.documentElement.classList.toggle("s-dark", sDarkValue);
@@ -146,10 +153,14 @@ onMounted(() => {
         {
           duration: 300,
           easing: "ease-in",
-        pseudoElement: `::view-transition-${sDarkValue ? "old" : "new"}(root)`,
+          pseudoElement: `::view-transition-${
+            sDarkValue ? "old" : "new"
+          }(root)`,
         }
       );
-  });
+    },
+    { immediate: true }
+  );
 });
 </script>
 

nuxt.config.ts

@@ -38,6 +38,11 @@ export default defineNuxtConfig({
           href: "/icon/spark.svg",
         },
       ],
+      script: [
+        {
+          src: "/init_dark.js",
+        },
+      ],
     },
   },
   vite: {

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);