mirror of
https://github.com/un-pany/v3-admin-vite.git
synced 2025-04-20 19:09:21 +08:00
wip: 重构多主题模块
This commit is contained in:
pany
parent
20f9ba8595
commit
5b531e75db
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
90
src/styles/element-plus.css
Normal file
90
src/styles/element-plus.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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";
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.#{$theme-name} {
|
||||
@import "./layouts.scss";
|
||||
@import "./element-plus.scss";
|
||||
@import "./vxe-table.scss";
|
||||
}
|
||||
|
||||
@ -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%)};
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -1,3 +1,2 @@
|
||||
@use "./element-plus.css";
|
||||
@import "./variables.scss";
|
||||
@import "../core/index.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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
|
||||
|
||||
:root {
|
||||
/** Body */
|
||||
--v3-body-text-color: var(--el-text-color-primary);
|
||||
|
||||
97
src/styles/vxe-table.css
Normal file
97
src/styles/vxe-table.css
Normal file
@ -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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user