feat(components): 添加主题配置抽屉，添加暗黑主题

src/plugins/dark-mode.ts

@@ -0,0 +1,31 @@
+import { watch } from 'vue';
+import { useAppStore } from '@/store';
+
+export default function setupWindicssDarkMode() {
+  const app = useAppStore();
+
+  const DARK_CLASS = 'dark';
+  function getHtmlElement() {
+    return document.querySelector('html')!;
+  }
+
+  function addDarkClass() {
+    const html = getHtmlElement();
+    html.classList.add(DARK_CLASS);
+  }
+  function removeDarkClass() {
+    const html = getHtmlElement();
+    html.classList.remove(DARK_CLASS);
+  }
+
+  watch(
+    () => app.themeSettings.darkMode,
+    newValue => {
+      if (newValue) {
+        addDarkClass();
+      } else {
+        removeDarkClass();
+      }
+    }
+  );
+}

src/plugins/index.ts

@@ -1,4 +1,5 @@
 import setupSmoothScroll from './smooth-scroll';
 import setupNaive from './naive';
+import setupWindicssDarkMode from './dark-mode';
 
-export { setupSmoothScroll, setupNaive };
+export { setupSmoothScroll, setupNaive, setupWindicssDarkMode };