From 7086c5c336f89b9387155a2e2c1dd4a8ea4c3d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sat, 21 May 2022 08:12:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/sidebar.scss           |  2 +-
 src/assets/styles/variables.module.scss  | 13 +++++-------
 src/layout/components/Settings/index.vue | 25 ++++++++++++++++--------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 76853ed..3b4a629 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1,7 +1,7 @@
 #app {
   .layout-sidebar__container {
     transition: width 0.28s ease;
-    // background-color: var(--base-menu-background);
+    background-color: var(--base-menu-background);
     height: 100%;
     position: relative;
     font-size: 0px;
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 3e09bab..ba411cf 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -34,20 +34,17 @@ $panGreen: #30b08f;
 }
 /***深色主题颜色配置***/
 [data-theme='theme-dark'] {
-  // --base-menu-background: #304156;
-  // --base-logo-title-color: #ffffff;
-  // --base-topBar-background: #ffffff;
-
+  --base-menu-background: #304156;
+  --base-logo-title-color: #ffffff;
   // // el-ement ui 设置
   // --el-fill-color-blank: #304156;
-  // --el-text-color-primary: #bfcbd9;
+  --el-text-color-primary: #e5eaf3;
 }
 html.dark {
   /* custom dark bg color */
-  // --el-bg-color: #626aef;
+  // --el-bg-color: #141414;
   --base-color-white: #ffffff;
-  --base-text-color-rgba: #fff;
-  --base-menu-background: var(--el-bg-color);
+  --base-text-color-rgba: #ffffff;
 }
 html.cafe {
   filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 88a9701..37be351 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -4,18 +4,18 @@
       <h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
     </div>
     <div class="setting-drawer-block-checbox">
-      <!-- <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+      <div class="item" @click="handleTheme('theme-dark')">
         <img src="@/assets/images/dark.svg" alt="dark" />
         <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <el-icon><Check /></el-icon>
         </div>
       </div>
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+      <div class="item" @click="handleTheme('theme-light')">
         <img src="@/assets/images/light.svg" alt="light" />
         <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <el-icon><Check /></el-icon>
         </div>
-      </div>-->
+      </div>
     </div>
     <div class="drawer-item">
       <el-radio-group v-model="mode" size="small">
@@ -193,14 +193,23 @@ watch(
   () => sideTheme,
   (val) => {
     const body = document.documentElement
-    if (val.value == 'theme-black') {
-      //body.setAttribute('data-theme', 'theme-black')
-    } else {
-      //body.setAttribute('data-theme', '')
+    body.setAttribute('data-theme', '')
+  },
+  {
+    immediate: true,
+  },
+)
+watch(
+  () => mode,
+  (val) => {
+    console.log(val.value)
+    if (val.value === 'dark') {
+      handleTheme('')
     }
   },
   {
     immediate: true,
+    deep: true,
   },
 )
 /**
@@ -228,7 +237,7 @@ function handleTheme(val) {
   sideTheme.value = val
   const body = document.documentElement
   if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
-  else body.setAttribute('data-theme', '')
+  else body.removeAttribute('data-theme')
 }
 function saveSetting() {
   proxy.$modal.loading('正在保存到本地，请稍候...')