refactor: 重构暗黑模式

src/components/common/AppProvider.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-config-provider wh-full :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="naiveThemeOverrides">
+  <n-config-provider
+    wh-full
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="appStore.isDark ? darkTheme : undefined"
+    :theme-overrides="naiveThemeOverrides"
+  >
     <n-loading-bar-provider>
       <n-dialog-provider>
         <n-notification-provider>
@@ -15,7 +21,7 @@
 
 <script setup>
 import { defineComponent, h } from 'vue'
-import { zhCN, dateZhCN, useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
+import { zhCN, dateZhCN, darkTheme, useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
 import { useCssVar } from '@vueuse/core'
 import { kebabCase } from 'lodash-es'
 import { setupMessage, setupDialog } from '@/utils'
@@ -50,12 +56,4 @@ const NaiveProviderContent = defineComponent({
     return h('div')
   },
 })
-
-watch(
-  () => appStore.darkMode,
-  (v) => {
-    if (v) document.documentElement.classList.add('dark')
-    else document.documentElement.classList.remove('dark')
-  }
-)
 </script>

src/components/page/AppPage.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="fade-slide" mode="out-in" appear>
-    <section class="cus-scroll-y wh-full p-15 flex-col bg-[#f5f6fb]">
+    <section class="cus-scroll-y wh-full p-15 flex-col bg-[#f5f6fb] dark:bg-hex-121212">
       <slot />
       <AppFooter v-if="showFooter" mt-15 />
       <n-back-top :bottom="20" />

src/layout/components/header/components/ThemeMode.vue

@@ -1,12 +1,18 @@
 <script setup>
 import { useAppStore } from '@/store'
+import { useDark, useToggle } from '@vueuse/core'
 
 const appStore = useAppStore()
+const isDark = useDark()
+const toggleDark = () => {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
 </script>
 
 <template>
-  <n-icon mr-20 cursor-pointer size="18" @click="appStore.toggleDarkMode">
-    <icon-mdi-moon-waning-crescent v-if="appStore.darkMode" />
+  <n-icon mr-20 cursor-pointer size="18" @click="toggleDark">
+    <icon-mdi-moon-waning-crescent v-if="isDark" />
     <icon-mdi-white-balance-sunny v-else />
   </n-icon>
 </template>

src/layout/components/header/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div flex items-center>
     <MenuCollapse />
-    <BreadCrumb ml-15 />
+    <BreadCrumb ml-15 hidden sm:block />
   </div>
   <div ml-auto flex items-center>
     <ThemeMode />

src/layout/components/tags/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ScrollX ref="scrollXRef">
+  <ScrollX ref="scrollXRef" class="bg-white dark:bg-dark!">
     <n-tag
       v-for="tag in tagsStore.tags"
       ref="tabRefs"

src/layout/index.vue

@@ -12,13 +12,17 @@
     </n-layout-sider>
 
     <article flex-1 flex-col overflow-hidden>
-      <header bg-white px-15 border-b bc-eee flex items-center :style="`height: ${header.height}px`">
+      <header
+        class="bg-white px-15 border-b bc-eee flex items-center"
+        dark="bg-dark border-0"
+        :style="`height: ${header.height}px`"
+      >
         <AppHeader />
       </header>
-      <section v-if="tags.visible" border-b bc-eee>
+      <section v-if="tags.visible" border-b bc-eee dark:border-0 hidden sm:block>
         <AppTags :style="{ height: `${tags.height}px` }" />
       </section>
-      <section flex-1 overflow-hidden>
+      <section flex-1 overflow-hidden bg-hex-f5f6fb dark:bg-hex-101014>
         <AppMain />
       </section>
     </article>

src/store/modules/app/index.js

@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
+import { useDark } from '@vueuse/core'
 
+const isDark = useDark()
 export const useAppStore = defineStore('app', {
   state() {
     return {
@@ -7,7 +9,7 @@ export const useAppStore = defineStore('app', {
       collapsed: false,
       /** keepAlive路由的key，重新赋值可重置keepAlive */
       aliveKeys: {},
-      darkMode: false,
+      isDark,
     }
   },
   actions: {
@@ -32,12 +34,12 @@ export const useAppStore = defineStore('app', {
       this.aliveKeys[key] = val
     },
     /** 设置暗黑模式 */
-    setDarkMode(darkMode) {
-      this.darkMode = darkMode
+    setDark(isDark) {
+      this.isDark = isDark
     },
     /** 切换/关闭 暗黑模式 */
-    toggleDarkMode() {
-      this.darkMode = !this.darkMode
+    toggleDark() {
+      this.isDark = !this.isDark
     },
   },
 })

src/styles/global.scss

@@ -7,14 +7,6 @@ body {
 
 html {
   font-size: 4px; // * 1rem = 4px  方便unocss计算：在unocss中 1字体单位 = 0.25rem，相当于 1等份 = 1px
-
-  &.dark {
-    filter: invert(1);
-    img,
-    video {
-      filter: invert(1);
-    }
-  }
 }
 
 body {

unocss.config.js

@@ -40,6 +40,7 @@ export default defineConfig({
       error_hover: 'var(--error-color-hover)',
       error_pressed: 'var(--error-color-pressed)',
       error_active: 'var(--error-color-active)',
+      dark: '#18181c',
     },
   },
 })