From 9043814c029ae86fc01ab285951bd7ace0c344e9 Mon Sep 17 00:00:00 2001
From: gushen610140 <w56038009@outlook.com>
Date: Sat, 31 Jan 2026 00:16:57 +0800
Subject: [PATCH] feat: local storage theme

---
 src/hooks/globalThemeHook.ts | 45 ++++-----------------------
 src/stores/ThemeStore.ts     | 59 ++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 39 deletions(-)
 create mode 100644 src/stores/ThemeStore.ts

diff --git a/src/hooks/globalThemeHook.ts b/src/hooks/globalThemeHook.ts
index 81ad816..e41ca01 100644
--- a/src/hooks/globalThemeHook.ts
+++ b/src/hooks/globalThemeHook.ts
@@ -1,47 +1,14 @@
-enum GlobalTheme {
-  Light = "light",
-  Dark = "dark",
-  Cupcake = "cupcake",
-  Bumblebee = "bumblebee",
-  Emerald = "emerald",
-  Corporate = "corporate",
-  Synthwave = "synthwave",
-  Retro = "retro",
-  Cyberpunk = "cyberpunk",
-  Valentine = "valentine",
-  Halloween = "halloween",
-  Garden = "garden",
-  Forest = "forest",
-  Aqua = "aqua",
-  Lofi = "lofi",
-  Pastel = "pastel",
-  Fantasy = "fantasy",
-  Wireframe = "wireframe",
-  Black = "black",
-  Luxury = "luxury",
-  Dracula = "dracula",
-  Cmyk = "cmyk",
-  Autumn = "autumn",
-  Business = "business",
-  Acid = "acid",
-  Lemonade = "lemonade",
-  Night = "night",
-  Coffee = "coffee",
-  Winter = "winter",
-  Dim = "dim",
-  Nord = "nord",
-  Sunset = "sunset",
-  Caramellatte = "caramellatte",
-  Abyss = "abyss",
-  Silk = "silk",
-}
+import { useThemeStore, GlobalTheme } from "@/stores/ThemeStore";
+
+const themeStore = useThemeStore();
 
 const optionalThemes = Object.values(GlobalTheme);
 
-const curGlobalTheme = ref(GlobalTheme.Light);
+// 一定不要通过改变 curGlobalTheme 来改变主题，而要通过 changeGlobalTheme 来改变主题
+const curGlobalTheme = computed(() => themeStore.theme);
 
 function changeGlobalTheme(theme: GlobalTheme) {
-  curGlobalTheme.value = theme;
+  themeStore.setTheme(theme);
 }
 
 export const useGlobalThemeHook = () => ({
diff --git a/src/stores/ThemeStore.ts b/src/stores/ThemeStore.ts
new file mode 100644
index 0000000..f23abb8
--- /dev/null
+++ b/src/stores/ThemeStore.ts
@@ -0,0 +1,59 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export enum GlobalTheme {
+  Light = "light",
+  Dark = "dark",
+  Cupcake = "cupcake",
+  Bumblebee = "bumblebee",
+  Emerald = "emerald",
+  Corporate = "corporate",
+  Synthwave = "synthwave",
+  Retro = "retro",
+  Cyberpunk = "cyberpunk",
+  Valentine = "valentine",
+  Halloween = "halloween",
+  Garden = "garden",
+  Forest = "forest",
+  Aqua = "aqua",
+  Lofi = "lofi",
+  Pastel = "pastel",
+  Fantasy = "fantasy",
+  Wireframe = "wireframe",
+  Black = "black",
+  Luxury = "luxury",
+  Dracula = "dracula",
+  Cmyk = "cmyk",
+  Autumn = "autumn",
+  Business = "business",
+  Acid = "acid",
+  Lemonade = "lemonade",
+  Night = "night",
+  Coffee = "coffee",
+  Winter = "winter",
+  Dim = "dim",
+  Nord = "nord",
+  Sunset = "sunset",
+  Caramellatte = "caramellatte",
+  Abyss = "abyss",
+  Silk = "silk",
+}
+
+export const useThemeStore = defineStore(
+  "theme",
+  () => {
+    const theme = ref<GlobalTheme>(GlobalTheme.Light);
+
+    const setTheme = (newTheme: GlobalTheme) => {
+      theme.value = newTheme;
+    };
+
+    return {
+      theme,
+      setTheme,
+    };
+  },
+  {
+    persist: true,
+  },
+);