feat: 适配 element-plus dark mode

src/layout/components/NavigationBar/index.vue

@@ -102,7 +102,7 @@ const state = reactive({
     height: 100%;
     display: flex;
     align-items: center;
-    color: #5a5e66;
+    color: #606266;
     .right-menu-item {
       padding: 0 10px;
       cursor: pointer;

src/layout/components/Settings/index.vue

@@ -95,12 +95,10 @@ watch(
   word-wrap: break-word;
   .drawer-title {
     margin-bottom: 12px;
-    color: #303133;
     font-size: 14px;
     line-height: 22px;
   }
   .drawer-item {
-    color: #303133;
     font-size: 14px;
     padding: 12px 0;
   }

src/main.ts

@@ -5,6 +5,7 @@ import store from "./store"
 import App from "./App.vue"
 import ElementPlus from "element-plus"
 import "element-plus/dist/index.css"
+import "element-plus/theme-chalk/dark/css-vars.css"
 import loadSvg from "@/icons"
 import * as directives from "@/directives"
 import "@/styles/index.scss"

src/store/modules/app.ts

@@ -56,13 +56,15 @@ export const useAppStore = defineStore({
         ? activeThemeName
         : this.themeList[0].name
       // 应用到 dom
-      document.body.className = `theme-${this.activeThemeName}`
+      // document.documentElement.className = `theme-${this.activeThemeName}`
+      document.documentElement.className = this.activeThemeName
       // 持久化
       setActiveThemeName(this.activeThemeName)
     },
     initTheme() {
       // 初始化
-      document.body.className = `theme-${this.activeThemeName}`
+      // document.documentElement.className = `theme-${this.activeThemeName}`
+      document.documentElement.className = this.activeThemeName
     }
   }
 })

src/styles/theme/theme.scss

@@ -1,4 +1,4 @@
-.theme-#{$theme-name} {
+.#{$theme-name} {
   /** Layout */
 
   .app-wrapper {
@@ -29,17 +29,6 @@
     // 顶部导航栏
     .navbar {
       background-color: $theme-bg-color;
-      .el-breadcrumb__inner {
-        a {
-          color: $font-color;
-          &:hover {
-            color: $hover-color;
-          }
-        }
-        .no-redirect {
-          color: $font-color;
-        }
-      }
       .right-menu {
         .el-icon {
           color: $font-color;
@@ -82,13 +71,6 @@
     .handle-button {
       background-color: lighten($theme-bg-color, 20%) !important;
     }
-    .el-drawer.rtl {
-      background-color: $theme-bg-color;
-      .drawer-title,
-      .drawer-item {
-        color: $font-color;
-      }
-    }
   }
 
   /** app-main 主要写 view 页面的黑暗样式 */
@@ -98,10 +80,6 @@
     .permission-alert {
       background-color: lighten($theme-bg-color, 8%);
     }
-    // 监控页面 /monitor
-    .monitor {
-      background-color: $theme-bg-color;
-    }
   }
 
   /** login 页面 */
@@ -112,9 +90,6 @@
     .login-card {
       background-color: lighten($theme-bg-color, 4%) !important;
     }
-    .el-icon {
-      color: $font-color;
-    }
   }
 
   /** element-plus */
@@ -137,79 +112,4 @@
       }
     }
   }
-
-  // 下拉菜单
-  .el-dropdown__popper .el-dropdown__list {
-    background-color: lighten($theme-bg-color, 8%);
-    .el-dropdown-menu {
-      background-color: lighten($theme-bg-color, 8%);
-      .el-dropdown-menu__item {
-        color: $font-color;
-        &.is-disabled {
-          color: #606266;
-        }
-        &:not(.is-disabled):hover {
-          background-color: lighten($theme-bg-color, 16%);
-          color: $active-font-color;
-        }
-      }
-      .el-dropdown-menu__item--divided:before {
-        background-color: lighten($theme-bg-color, 8%);
-      }
-    }
-  }
-  .el-popper__arrow::before {
-    // 下拉菜单顶部三角区域
-    background-color: lighten($theme-bg-color, 8%) !important;
-    border: lighten($theme-bg-color, 8%) !important;
-  }
-
-  // 单选框按钮样式
-  .el-radio-button__inner {
-    background-color: lighten($theme-bg-color, 8%);
-    color: $active-font-color;
-    border: 1px solid $border-color;
-  }
-  .el-radio-button:first-child .el-radio-button__inner {
-    border-left: none;
-  }
-
-  // el-tag
-  .el-tag {
-    background-color: lighten($theme-bg-color, 8%);
-    border-color: $border-color;
-    color: $active-font-color;
-    &.el-tag--info {
-      background-color: lighten($theme-bg-color, 8%);
-      border-color: $border-color;
-      color: $active-font-color;
-    }
-  }
-
-  // tabs 标签页
-  .el-tabs--border-card {
-    background: lighten($theme-bg-color, 8%);
-    border: 1px solid $border-color;
-    .el-tabs__header {
-      background-color: lighten($theme-bg-color, 8%);
-      border-bottom: 1px solid $border-color;
-      .el-tabs__item.is-active {
-        background-color: lighten($theme-bg-color, 8%);
-        border-right-color: $border-color;
-        border-left-color: $border-color;
-      }
-    }
-  }
-
-  // 卡片 card
-  .el-card {
-    background: lighten($theme-bg-color, 8%);
-    border: 1px solid $border-color;
-    color: $font-color;
-  }
-
-  // 输入框 input
-  .el-input__wrapper {
-    background: lighten($theme-bg-color, 8%) !important;
-  }
 }