feat: 黑暗模式

src/layout/components/Header/index.vue

@@ -141,7 +141,6 @@ const onNightMode = () => {
     // 恢复亮色主题
     document.body.removeAttribute("arco-theme");
   }
-  console.log("黑暗模式", darkMode.value);
 };
 
 // 语言

src/layout/components/Main/index.vue

@@ -29,6 +29,7 @@ const { cacheRoutes } = storeToRefs(routerStore);
 <style lang="scss" scoped>
 .content {
   height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
+  background: $color-bg-3; // 背景颜色
 }
 .scrollbar {
   height: calc(100% - 40px);

src/style/global-theme.scss

@@ -50,6 +50,8 @@ $color-bg-1: var(--color-bg-1); // 整体背景色
 $color-bg-2: var(--color-bg-2); // 一级容器背景
 $color-bg-3: var(--color-bg-3); // 二级容器背景
 $color-bg-4: var(--color-bg-4); // 三级容器背景
+$color-bg-5: var(--color-bg-5); // 下拉弹出框、Tooltip 背景颜色
+$color-bg-white: var(--color-bg-white); // 白色背景
 
 // 阴影
 $shadow-special: 0 0 1px rgba(0, 0, 0, 0.3); // 特殊阴影

src/style/index.scss

@@ -27,7 +27,6 @@ html {
 
 // 设置全局颜色-关联黑暗模式
 body {
-  background-color: var(--color-bg-1);
-  color: var(--color-text-1);
-  // color-scheme: dark; // 这个属性设置后，滚动条也能表现为暗色模式
+  background: $color-bg-2; // body背景颜色
+  color: var(--color-text-1); // 整体文字的颜色
 }