diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue index b651b91..e8413e9 100644 --- a/src/layouts/components/NavigationBar/index.vue +++ b/src/layouts/components/NavigationBar/index.vue @@ -104,7 +104,7 @@ const logout = () => { :deep(.el-sub-menu) { &.is-active { .el-sub-menu__title { - color: var(--el-menu-active-color) !important; + color: var(--el-color-primary) !important; } } } diff --git a/src/styles/element-plus.css b/src/styles/element-plus.css new file mode 100644 index 0000000..6337bc1 --- /dev/null +++ b/src/styles/element-plus.css @@ -0,0 +1,90 @@ +/** + * dark-blue 主题模式下的 Element Plus CSS 变量 + * 在此查阅所有可自定义的变量:https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss + * 也可以打开浏览器控制台选择元素,查看要覆盖的变量名 + */ + +/** 基础颜色 */ +html.dark-blue { + /** color-primary */ + --el-color-primary: #00bb99; + --el-color-primary-light-3: #00bb99b3; + --el-color-primary-light-5: #00bb9980; + --el-color-primary-light-7: #00bb994d; + --el-color-primary-light-8: #00bb9933; + --el-color-primary-light-9: #00bb991a; + --el-color-primary-dark-2: #00bb99; + /** color-success */ + --el-color-success: #67c23a; + --el-color-success-light-3: #67c23ab3; + --el-color-success-light-5: #67c23a80; + --el-color-success-light-7: #67c23a4d; + --el-color-success-light-8: #67c23a33; + --el-color-success-light-9: #67c23a1a; + --el-color-success-dark-2: #67c23a; + /** color-warning */ + --el-color-warning: #e6a23c; + --el-color-warning-light-3: #e6a23cb3; + --el-color-warning-light-5: #e6a23c80; + --el-color-warning-light-7: #e6a23c4d; + --el-color-warning-light-8: #e6a23c33; + --el-color-warning-light-9: #e6a23c1a; + --el-color-warning-dark-2: #e6a23c; + /** color-danger */ + --el-color-danger: #f56c6c; + --el-color-danger-light-3: #f56c6cb3; + --el-color-danger-light-5: #f56c6c80; + --el-color-danger-light-7: #f56c6c4d; + --el-color-danger-light-8: #f56c6c33; + --el-color-danger-light-9: #f56c6c1a; + --el-color-danger-dark-2: #f56c6c; + /** color-error */ + --el-color-error: #f56c6c; + --el-color-error-light-3: #f56c6cb3; + --el-color-error-light-5: #f56c6c80; + --el-color-error-light-7: #f56c6c4d; + --el-color-error-light-8: #f56c6c33; + --el-color-error-light-9: #f56c6c1a; + --el-color-error-dark-2: #f56c6c; + /** color-info */ + --el-color-info: #909399; + --el-color-info-light-3: #909399b3; + --el-color-info-light-5: #90939980; + --el-color-info-light-7: #9093994d; + --el-color-info-light-8: #90939933; + --el-color-info-light-9: #9093991a; + --el-color-info-dark-2: #909399; + /** text-color */ + --el-text-color-primary: #e5eaf3; + --el-text-color-regular: #cfd3dc; + --el-text-color-secondary: #a3a6ad; + --el-text-color-placeholder: #8d9095; + --el-text-color-disabled: #6c6e72; + /** border-color */ + --el-border-color-darker: #003380; + --el-border-color-dark: #003380; + --el-border-color: #003380; + --el-border-color-light: #003380; + --el-border-color-lighter: #003380; + --el-border-color-extra-light: #003380; + /** fill-color */ + --el-fill-color-darker: #002b6b; + --el-fill-color-dark: #002b6b; + --el-fill-color: #002b6b; + --el-fill-color-light: #002359; + --el-fill-color-lighter: #002359; + --el-fill-color-blank: #001b44; + --el-fill-color-extra-light: #001b44; + /** bg-color */ + --el-bg-color-page: #001535; + --el-bg-color: #001b44; + --el-bg-color-overlay: #002359; + /** mask-color */ + --el-mask-color: rgba(0, 0, 0, 0.5); + --el-mask-color-extra-light: rgba(0, 0, 0, 0.3); +} + +/** button */ +html.dark-blue .el-button { + --el-button-disabled-text-color: rgba(255, 255, 255, 0.5); +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 4f2865d..0204c4a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -3,12 +3,14 @@ // Transition @import "./transition.scss"; // Element Plus +@import "./element-plus.css"; @import "./element-plus.scss"; // Vxe Table +@import "./vxe-table.css"; @import "./vxe-table.scss"; // 注册多主题 @import "./theme/register.scss"; -// mixin +// Mixins @import "./mixins.scss"; // View Transition @import "./view-transition.scss"; diff --git a/src/styles/theme/core/index.scss b/src/styles/theme/core/index.scss index d50e92e..5bfe156 100644 --- a/src/styles/theme/core/index.scss +++ b/src/styles/theme/core/index.scss @@ -1,5 +1,4 @@ .#{$theme-name} { @import "./layouts.scss"; @import "./element-plus.scss"; - @import "./vxe-table.scss"; } diff --git a/src/styles/theme/core/vxe-table.scss b/src/styles/theme/core/vxe-table.scss deleted file mode 100644 index 3f0b333..0000000 --- a/src/styles/theme/core/vxe-table.scss +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Vxe Table CSS 变量 - * 在此查阅所有可自定义的变量:https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss - */ - -* { - /*color*/ - --vxe-font-color: #{$font-color}; - --vxe-primary-color: #{$theme-color}; - --vxe-success-color: #{$theme-color}; - - /*input/radio/checkbox*/ - --vxe-input-border-color: #{$theme-color}; - --vxe-input-disabled-color: #{$theme-color}; - --vxe-input-disabled-background-color: #{lighten($theme-bg-color, 12%)}; - - /*popup*/ - --vxe-table-popup-border-color: #{$border-color}; - - /*table*/ - --vxe-table-header-font-color: #{$font-color}; - --vxe-table-border-color: #{$border-color}; - --vxe-table-header-background-color: #{lighten($theme-bg-color, 8%)}; - --vxe-table-body-background-color: #{lighten($theme-bg-color, 4%)}; - --vxe-table-row-hover-background-color: #{lighten($theme-bg-color, 8%)}; - --vxe-table-row-current-background-color: #{lighten($theme-bg-color, 8%)}; - --vxe-table-row-hover-current-background-color: #{lighten($theme-bg-color, 8%)}; - --vxe-table-checkbox-range-background-color: #{lighten($theme-bg-color, 8%)}; - - /*loading*/ - --vxe-loading-color: #{$theme-color}; - --vxe-loading-background-color: #{rgba($theme-bg-color, 0.5)}; - - /*toolbar*/ - --vxe-toolbar-background-color: #{lighten($theme-bg-color, 4%)}; - --vxe-toolbar-custom-active-background-color: #{lighten($theme-bg-color, 16%)}; - --vxe-toolbar-panel-background-color: #{lighten($theme-bg-color, 4%)}; - - /*pager*/ - --vxe-pager-background-color: #{lighten($theme-bg-color, 4%)}; - - /*modal*/ - --vxe-modal-header-background-color: #{lighten($theme-bg-color, 4%)}; - --vxe-modal-body-background-color: #{lighten($theme-bg-color, 4%)}; - --vxe-modal-border-color: #{$border-color}; - - /*button*/ - --vxe-button-default-background-color: #{lighten($theme-bg-color, 8%)}; - - /*input*/ - --vxe-input-background-color: #{lighten($theme-bg-color, 4%)}; - --vxe-input-panel-background-color: #{lighten($theme-bg-color, 4%)}; - - /*form*/ - --vxe-form-background-color: #{lighten($theme-bg-color, 4%)}; - - /*select*/ - --vxe-select-option-hover-background-color: #{lighten($theme-bg-color, 8%)}; - --vxe-select-panel-background-color: #{lighten($theme-bg-color, 4%)}; -} diff --git a/src/styles/theme/dark-blue/element-plus.css b/src/styles/theme/dark-blue/element-plus.css deleted file mode 100644 index 70949e2..0000000 --- a/src/styles/theme/dark-blue/element-plus.css +++ /dev/null @@ -1,48 +0,0 @@ -/** - * dark-blue 主题下的 Element Plus CSS 变量 - * 在此查阅所有可自定义的变量:https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss - * 也可以打开浏览器控制台选择元素,查看要覆盖的变量名 - */ - -html.dark-blue { - /** color */ - --el-color-primary: #00bb99; - --el-color-primary-light-3: #00bb99a2; - --el-color-primary-light-7: #00bb9948; - --el-color-primary-light-8: #00bb9932; - --el-color-primary-light-9: #00bb9916; - --el-color-primary-dark-2: #00bb99; - /** text-color */ - --el-text-color-primary: #e5eaf3; - --el-text-color-regular: #cfd3dc; - --el-text-color-secondary: #a3a6ad; - --el-text-color-placeholder: #8d9095; - --el-text-color-disabled: #6c6e72; - /** border-color */ - --el-border-color-darker: #003380; - --el-border-color-dark: #003380; - --el-border-color: #003380; - --el-border-color-light: #003380; - --el-border-color-lighter: #003380; - --el-border-color-extra-light: #003380; - /** fill-color */ - --el-fill-color-darker: #042d6b; - --el-fill-color-dark: #042d6b; - --el-fill-color: #042d6b; - --el-fill-color-light: #032659; - --el-fill-color-lighter: #032659; - --el-fill-color-blank: #031e47; - --el-fill-color-extra-light: #031e47; - /** bg-color */ - --el-bg-color-page: #001535; - --el-bg-color: #031e47; - --el-bg-color-overlay: #032659; - /** mask */ - --el-mask-color: rgba(0, 0, 0, 0.5); - --el-mask-color-extra-light: rgba(0, 0, 0, 0.3); -} - -/** button */ -html.dark-blue .el-button { - --el-button-disabled-text-color: rgba(255, 255, 255, 0.5); -} diff --git a/src/styles/theme/dark-blue/index.scss b/src/styles/theme/dark-blue/index.scss index e417e25..d39200d 100644 --- a/src/styles/theme/dark-blue/index.scss +++ b/src/styles/theme/dark-blue/index.scss @@ -1,3 +1,2 @@ -@use "./element-plus.css"; @import "./variables.scss"; @import "../core/index.scss"; diff --git a/src/styles/theme/dark-blue/variables.scss b/src/styles/theme/dark-blue/variables.scss index 96bc8a0..2add393 100644 --- a/src/styles/theme/dark-blue/variables.scss +++ b/src/styles/theme/dark-blue/variables.scss @@ -3,12 +3,6 @@ // 主题名称 $theme-name: "dark-blue"; // 主题背景颜色 -$theme-bg-color: #031e47; -// 主题色 -$theme-color: #00bb99; -// 默认文字颜色 -$font-color: #cfd3dc; +$theme-bg-color: #001b44; // active 状态下文字颜色 $active-font-color: #ffffff; -// 边框颜色 -$border-color: #003380; diff --git a/src/styles/theme/dark/variables.scss b/src/styles/theme/dark/variables.scss index e50d695..312cb3d 100644 --- a/src/styles/theme/dark/variables.scss +++ b/src/styles/theme/dark/variables.scss @@ -4,11 +4,5 @@ $theme-name: "dark"; // 主题背景颜色 $theme-bg-color: #141414; -// 主题色 -$theme-color: #409eff; -// 默认文字颜色 -$font-color: #cfd3dc; // active 状态下文字颜色 $active-font-color: #ffffff; -// 边框颜色 -$border-color: #4c4d4f; diff --git a/src/styles/variables.css b/src/styles/variables.css index b0c9121..3dc7942 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -1,4 +1,5 @@ /** 全局 CSS 变量,这种变量不仅可以在 CSS 和 SCSS 中使用,还可以导入到 JS 中使用 */ + :root { /** Body */ --v3-body-text-color: var(--el-text-color-primary); diff --git a/src/styles/vxe-table.css b/src/styles/vxe-table.css new file mode 100644 index 0000000..8b9766f --- /dev/null +++ b/src/styles/vxe-table.css @@ -0,0 +1,97 @@ +/** + * 所有主题模式下的 Vxe Table CSS 变量 + * 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量,目的是使 Vxe Table 支持多主题模式且样式统一 + * 在此查阅所有可自定义的变量:https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss + */ + +:root { + /*color*/ + --vxe-font-color: var(--el-text-color-regular); + --vxe-primary-color: var(--el-color-primary); + --vxe-success-color: var(--el-color-success); + --vxe-info-color: var(--el-color-info); + --vxe-warning-color: var(--el-color-warning); + --vxe-danger-color: var(--el-color-danger); + + --vxe-font-lighten-color: var(--el-text-color-primary); + --vxe-primary-lighten-color: var(--el-color-primary-light-3); + --vxe-success-lighten-color: var(--el-color-success-light-3); + --vxe-info-lighten-color: var(--el-color-info-light-3); + --vxe-warning-lighten-color: var(--el-color-warning-light-3); + --vxe-danger-lighten-color: var(--el-color-danger-light-3); + + --vxe-font-darken-color: var(--el-text-color-secondary); + --vxe-primary-darken-color: var(--el-color-primary-dark-2); + --vxe-success-darken-color: var(--el-color-success-dark-2); + --vxe-info-darken-color: var(--el-color-info-dark-2); + --vxe-warning-darken-color: var(--el-color-warning-dark-2); + --vxe-danger-darken-color: var(--el-color-danger-dark-2); + + --vxe-font-disabled-color: var(--el-text-color-disabled); + --vxe-primary-disabled-color: var(--el-color-primary-light-5); + --vxe-success-disabled-color: var(--el-color-success-light-5); + --vxe-info-disabled-color: var(--el-color-info-light-5); + --vxe-warning-disabled-color: var(--el-color-warning-light-5); + --vxe-danger-disabled-color: var(--el-color-danger-light-5); + + /*input/radio/checkbox*/ + --vxe-input-border-color: var(--el-border-color); + --vxe-input-disabled-color: var(--el-text-color-disabled); + --vxe-input-disabled-background-color: var(--el-fill-color-light); + --vxe-input-placeholder-color: var(--el-text-color-placeholder); + + /*popup*/ + --vxe-table-popup-border-color: var(--el-border-color); + + /*table*/ + --vxe-table-header-font-color: var(--el-text-color-regular); + --vxe-table-footer-font-color: var(--el-text-color-regular); + --vxe-table-border-color: var(--el-border-color); + --vxe-table-header-background-color: var(--el-bg-color); + --vxe-table-body-background-color: var(--el-bg-color); + --vxe-table-footer-background-color: var(--el-bg-color); + + --vxe-table-row-hover-background-color: var(--el-fill-color-light); + --vxe-table-row-current-background-color: var(--el-fill-color-light); + --vxe-table-row-hover-current-background-color: var(--el-fill-color-light); + + --vxe-table-checkbox-range-background-color: var(--el-fill-color-light); + + /*menu*/ + --vxe-table-menu-background-color: var(--el-bg-color-overlay); + + /*loading*/ + --vxe-loading-color: var(--el-color-primary); + --vxe-loading-background-color: var(--el-mask-color); + + /*validate*/ + --vxe-table-validate-error-color: var(--el-color-danger); + + /*toolbar*/ + --vxe-toolbar-background-color: var(--el-bg-color); + --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay); + --vxe-toolbar-panel-background-color: var(--el-bg-color); + + /*pager*/ + --vxe-pager-background-color: var(--el-bg-color); + + /*modal*/ + --vxe-modal-header-background-color: var(--el-bg-color); + --vxe-modal-body-background-color: var(--el-bg-color); + --vxe-modal-border-color: var(--el-border-color); + + /*button*/ + --vxe-button-default-background-color: var(--el-bg-color-overlay); + + /*input*/ + --vxe-input-background-color: var(--el-fill-color-blank); + --vxe-input-panel-background-color: var(--el-fill-color-blank); + + /*form*/ + --vxe-form-background-color: var(--el-bg-color); + --vxe-form-validate-error-color: var(--el-color-danger); + + /*select*/ + --vxe-select-option-hover-background-color: var(--el-bg-color-overlay); + --vxe-select-panel-background-color: var(--el-bg-color); +}