feat: 暗黑模式

src/layout/components/setting/index.vue

@@ -14,7 +14,9 @@ import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
 import { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
+import dayIcon from "/@/assets/svg/day.svg";
 import { debounce } from "/@/utils/debounce";
+import darkIcon from "/@/assets/svg/dark.svg";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { storageLocal, storageSession } from "/@/utils/storage";
@@ -235,11 +237,33 @@ function setLayoutThemeColor(theme: string) {
   });
   instance.layout = { layout: useAppStoreHook().layout, theme };
 }
+
+let dataTheme = ref<boolean>(false);
+
+// 日间、夜间主题切换
+function dataThemeChange() {
+  const body = document.documentElement as HTMLElement;
+  if (dataTheme.value) {
+    body.setAttribute("data-theme", "dark");
+    setLayoutThemeColor("light");
+  } else body.setAttribute("data-theme", "");
+}
 </script>
 
 <template>
   <panel>
-    <el-divider>主题风格</el-divider>
+    <el-divider>主题</el-divider>
+    <el-switch
+      v-model="dataTheme"
+      inline-prompt
+      class="pure-datatheme"
+      :active-icon="dayIcon"
+      :inactive-icon="darkIcon"
+      @change="dataThemeChange"
+    >
+    </el-switch>
+
+    <el-divider>导航栏模式</el-divider>
     <ul class="pure-theme">
       <el-tooltip class="item" content="左侧菜单模式" placement="bottom">
         <li
@@ -264,8 +288,8 @@ function setLayoutThemeColor(theme: string) {
       </el-tooltip>
     </ul>
 
-    <el-divider>主题色</el-divider>
-    <ul class="theme-color">
+    <el-divider v-if="!dataTheme">主题色</el-divider>
+    <ul class="theme-color" v-if="!dataTheme">
       <li
         v-for="(item, index) in themeColors"
         :key="index"
@@ -391,6 +415,14 @@ function setLayoutThemeColor(theme: string) {
   font-weight: 700;
 }
 
+.pure-datatheme {
+  width: 100%;
+  height: 50px;
+  text-align: center;
+  display: block;
+  padding-top: 25px;
+}
+
 .pure-theme {
   margin-top: 25px;
   width: 100%;