feat: 集成简易暗黑模式

src/components/common/AppProvider.vue

@@ -20,6 +20,9 @@ import { useCssVar } from '@vueuse/core'
 import { kebabCase } from 'lodash-es'
 import { setupMessage, setupDialog } from '@/utils'
 import { naiveThemeOverrides } from '~/settings'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
 
 function setupCssVar() {
   const common = naiveThemeOverrides.common
@@ -47,4 +50,12 @@ 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/layout/components/header/components/ThemeMode.vue

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

src/layout/components/header/index.vue

@@ -4,6 +4,7 @@
     <BreadCrumb ml-15 />
   </div>
   <div ml-auto flex items-center>
+    <ThemeMode />
     <GithubSite />
     <FullScreen />
     <UserAvatar />
@@ -16,4 +17,5 @@ import MenuCollapse from './components/MenuCollapse.vue'
 import FullScreen from './components/FullScreen.vue'
 import UserAvatar from './components/UserAvatar.vue'
 import GithubSite from './components/GithubSite.vue'
+import ThemeMode from './components/ThemeMode.vue'
 </script>

src/store/modules/app/index.js

@@ -7,6 +7,7 @@ export const useAppStore = defineStore('app', {
       collapsed: false,
       /** keepAlive路由的key，重新赋值可重置keepAlive */
       aliveKeys: {},
+      darkMode: false,
     }
   },
   actions: {
@@ -30,5 +31,13 @@ export const useAppStore = defineStore('app', {
     setAliveKeys(key, val) {
       this.aliveKeys[key] = val
     },
+    /** 设置暗黑模式 */
+    setDarkMode(darkMode) {
+      this.darkMode = darkMode
+    },
+    /** 切换/关闭 暗黑模式 */
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode
+    },
   },
 })

src/styles/global.scss

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