颜色主题记忆

Author: Linho1219

src/App.vue

@@ -1,9 +1,8 @@
 <template>
-  <s-page theme="auto" id="soberpage" ref="soberPage" :class="theme.value">
+  <s-page :theme="theme.initialValue" id="soberpage" ref="soberPage" :class="theme.value">
     <s-drawer>
       <Navbar @toggle-drawer="toogleDrawer" />
       <s-drawer
-        theme="auto"
         id="content"
         :class="{ onDrawerResize }"
         ref="innerDrawer"

src/consts.ts

@@ -386,22 +386,34 @@ export const fnTypeArr = [
   },
 ] as const satisfies FnType[];
 
-
 // Datum define
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 export const useProfile = defineStore("profile", () => {
   const data = ref<InternalDatum[]>([
     { fnType: "linear", graphType: "polyline", fn: "x^2", key: 1 },
   ]);
-  const getOriginalCopy = (forExport?: boolean) => toOriginalDatum(data.value, forExport);
+  const getOriginalCopy = (forExport?: boolean) =>
+    toOriginalDatum(data.value, forExport);
   return { data, getOriginalCopy };
 });
+
 // Theme define
 export const useTheme = defineStore("theme", () => {
   const themeValues = ["auto", "dark", "light"] as const;
-  const index = ref(0);
+  const initialIndex = (() => {
+    if (typeof localStorage !== "undefined") {
+      const savedTheme = Number(localStorage.getItem("theme"));
+      if ([0, 1, 2].includes(savedTheme)) return savedTheme as 0 | 1 | 2;
+    }
+    return 0;
+  })();
+  const index = ref(initialIndex);
+  const initialValue = themeValues[initialIndex];
   const value = computed(() => themeValues[index.value]);
-  const toogle = () => index.value = (index.value + 1) % themeValues.length
-  return { index, value, toogle }
-})
+  const toogle = () => {
+    index.value = ((index.value + 1) % themeValues.length) as 0 | 1 | 2;
+    localStorage.setItem("theme", index.value.toString());
+  };
+  return { initialIndex,initialValue, index, value, toogle };
+});