新增侧边栏背景设置

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;

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);

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('正在保存到本地，请稍候...')