fix: useTheme use single ref (#21)

src/hooks/useTheme.ts

@@ -9,36 +9,37 @@ interface IThemeList {
 /** 注册的主题名称, 其中 normal 是必填的 */
 export type ThemeName = "normal" | "dark"
 
+/** 主题列表 */
+const themeList: IThemeList[] = [
+  {
+    title: "默认",
+    name: "normal"
+  },
+  {
+    title: "黑暗",
+    name: "dark"
+  }
+]
+
+/** 正在应用的主题名称 */
+const activeThemeName = ref<ThemeName>(getActiveThemeName() || "normal")
+
+const initTheme = () => {
+  setHtmlClassName(activeThemeName.value)
+}
+
+const setTheme = (value: ThemeName) => {
+  activeThemeName.value = value
+  setHtmlClassName(activeThemeName.value)
+  setActiveThemeName(activeThemeName.value)
+}
+
+/** 在 html 根元素上挂载 class */
+const setHtmlClassName = (value: ThemeName) => {
+  document.documentElement.className = value
+}
+
 /** 主题 hook */
 export function useTheme() {
-  /** 主题列表 */
-  const themeList: IThemeList[] = [
-    {
-      title: "默认",
-      name: "normal"
-    },
-    {
-      title: "黑暗",
-      name: "dark"
-    }
-  ]
-  /** 正在应用的主题名称 */
-  const activeThemeName = ref<ThemeName>(getActiveThemeName() || "normal")
-
-  const initTheme = () => {
-    setHtmlClassName(activeThemeName.value)
-  }
-
-  const setTheme = (value: ThemeName) => {
-    activeThemeName.value = value
-    setHtmlClassName(activeThemeName.value)
-    setActiveThemeName(activeThemeName.value)
-  }
-
-  /** 在 html 根元素上挂载 class */
-  const setHtmlClassName = (value: ThemeName) => {
-    document.documentElement.className = value
-  }
-
   return { themeList, activeThemeName, initTheme, setTheme }
 }