refactor: 重写灰色模式和色弱模式挂载方式

src/App.vue

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import { useTheme } from "@/hooks/useTheme"
+import { useGreyAndColorWeakness } from "@/hooks/useGreyAndColorWeakness"
 import { ElNotification } from "element-plus"
-// 将 Element Plus 的语言设置为中文
-import zhCn from "element-plus/es/locale/lang/zh-cn"
+import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
 
 const { initTheme } = useTheme()
+const { initGreyAndColorWeakness } = useGreyAndColorWeakness()
 
 /** 初始化主题 */
 initTheme()
+/** 初始化灰色模式和色弱模式 */
+initGreyAndColorWeakness()
 
 /** 作者小心思 */
 ElNotification({

src/hooks/useGreyAndColorWeakness.ts

@@ -0,0 +1,20 @@
+import { watchEffect } from "vue"
+import { useSettingsStore } from "@/store/modules/settings"
+
+const GREY_MODE = "grey-mode"
+const COLOR_WEAKNESS = "color-weakness"
+const classList = document.documentElement.classList
+
+/** 初始化 */
+const initGreyAndColorWeakness = () => {
+  const settingsStore = useSettingsStore()
+  watchEffect(() => {
+    settingsStore.showGreyMode ? classList.add(GREY_MODE) : classList.remove(GREY_MODE)
+    settingsStore.showColorWeakness ? classList.add(COLOR_WEAKNESS) : classList.remove(COLOR_WEAKNESS)
+  })
+}
+
+/** 灰色模式和色弱模式 hook */
+export function useGreyAndColorWeakness() {
+  return { initGreyAndColorWeakness }
+}

src/hooks/useTheme.ts

@@ -37,16 +37,23 @@ const setTheme = (value: ThemeName) => {
 }
 
 /** 在 html 根元素上挂载 class */
-const setHtmlRootClassName = (value: ThemeName) => {
-  document.documentElement.className = value
+const addHtmlClass = (value: ThemeName) => {
+  document.documentElement.classList.add(value)
+}
+
+/** 在 html 根元素上移除其他主题 class */
+const removeHtmlClass = (value: ThemeName) => {
+  const otherThemeNameList = themeList.map((item) => item.name).filter((name) => name !== value)
+  document.documentElement.classList.remove(...otherThemeNameList)
 }
 
 /** 初始化 */
 const initTheme = () => {
   // watchEffect 来收集副作用
   watchEffect(() => {
     const value = activeThemeName.value
-    setHtmlRootClassName(value)
+    removeHtmlClass(value)
+    addHtmlClass(value)
     setActiveThemeName(value)
   })
 }

src/layouts/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, watchEffect } from "vue"
+import { watchEffect } from "vue"
 import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
 import useResize from "./hooks/useResize"
@@ -19,14 +19,7 @@ const { setWatermark, clearWatermark } = useWatermark()
 const { isMobile } = useDevice()
 const { isLeft, isTop, isLeftTop } = useLayoutMode()
 const settingsStore = useSettingsStore()
-const { showSettings, showTagsView, showWatermark, showGreyMode, showColorWeakness } = storeToRefs(settingsStore)
-
-const classes = computed(() => {
-  return {
-    showGreyMode: showGreyMode.value,
-    showColorWeakness: showColorWeakness.value
-  }
-})
+const { showSettings, showTagsView, showWatermark } = storeToRefs(settingsStore)
 
 //#region 隐藏标签栏时删除其高度，是为了让 Logo 组件高度和 Header 区域高度始终一致
 const cssVarName = "--v3-tagsview-height"
@@ -43,7 +36,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div :class="classes">
+  <div>
     <!-- 左侧模式 -->
     <LeftMode v-if="isLeft || isMobile" />
     <!-- 顶部模式 -->
@@ -56,13 +49,3 @@ watchEffect(() => {
     </RightPanel>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.showGreyMode {
-  filter: grayscale(1);
-}
-
-.showColorWeakness {
-  filter: invert(0.8);
-}
-</style>

src/styles/index.scss

@@ -22,6 +22,14 @@
 
 html {
   height: 100%;
+  // 灰色模式
+  &.grey-mode {
+    filter: grayscale(1);
+  }
+  // 色弱模式
+  &.color-weakness {
+    filter: invert(0.8);
+  }
 }
 
 body {