From 324e454641ce8f2d8bfd4eb3fdc87240e5214e67 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 10 May 2022 19:59:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=20element-plus=20dar?=
=?UTF-8?q?k=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layout/components/NavigationBar/index.vue | 2 +-
src/layout/components/Settings/index.vue | 2 -
src/main.ts | 1 +
src/store/modules/app.ts | 6 +-
src/styles/theme/theme.scss | 102 +-----------------
5 files changed, 7 insertions(+), 106 deletions(-)
diff --git a/src/layout/components/NavigationBar/index.vue b/src/layout/components/NavigationBar/index.vue
index 32a1001..f46aaf0 100644
--- a/src/layout/components/NavigationBar/index.vue
+++ b/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;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 37c0b9e..d9ae093 100644
--- a/src/layout/components/Settings/index.vue
+++ b/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;
}
diff --git a/src/main.ts b/src/main.ts
index 6950594..2f892d4 100644
--- a/src/main.ts
+++ b/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"
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index d49e4c2..6de0d92 100644
--- a/src/store/modules/app.ts
+++ b/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
}
}
})
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index b3cff6b..eece38d 100644
--- a/src/styles/theme/theme.scss
+++ b/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;
- }
}