refactor: 重构暗黑模式

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>