Perfect night mode

src/App.vue

@@ -20,8 +20,7 @@ const match: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)")
 match.addEventListener('change', followSystem)
 
 function followSystem() {
-  const theme = match.matches ? 'dark' : 'light'
-  document.documentElement.setAttribute('data-theme', theme)
+  document.documentElement.className = match.matches ? 'dark' : 'light'
 }
 
 watch(store.$state, (n) => {
@@ -52,7 +51,7 @@ onMounted(() => {
   store.init()
   settingStore.init()
   if (settingStore.theme !== 'auto') {
-    document.documentElement.setAttribute('data-theme', settingStore.theme)
+    document.documentElement.className = settingStore.theme
   }
 })
 

src/assets/css/style.scss

@@ -2,6 +2,8 @@
 @import "/node_modules/hover.css";
 @import "variable.scss";
 @import "anim";
+@import 'element-plus/theme-chalk/dark/css-vars';
+
 
 :root {
   --color-background: #E6E8EB;
@@ -31,7 +33,7 @@
   --color-scrollbar: rgb(147, 173, 227);
 }
 
-html[data-theme='dark'] {
+html.dark {
   //--color-main-bg: rgba(0, 5, 24, 1);
   //--color-main-bg: rgba(17,24,39, 1);
   --color-background: transparent;

src/components/Toolbar/Toolbar.vue

@@ -74,7 +74,7 @@ watch([() => settingStore.showToolbar, () => headerRef], n => {
 
           <RepeatSetting/>
 
-          <Add/>
+<!--          <Add/>-->
 
           <Tooltip title="反馈">
             <IconWrapper>

src/hooks/useTheme.ts

@@ -10,7 +10,7 @@ export default function useTheme() {
     } else {
       settingStore.theme = settingStore.theme === 'light' ? 'dark' : 'light'
     }
-    document.documentElement.setAttribute('data-theme', settingStore.theme)
+    document.documentElement.className = settingStore.theme
   }
 
   return {