wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-20 19:09:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 补全深蓝模式下，primary 颜色各种状态 (#81)

Browse Source
This commit is contained in:
CHENZL 2023-05-25 18:36:20 +08:00 committed by GitHub
parent d3673e431e
commit 7020a864f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/styles/theme/dark-blue/element-plus.css
View File

@ -7,6 +7,12 @@
html.dark-blue {
/** color */
--el-color-primary: #01efb7bb;
--el-color-primary-light-3: rgba(1, 147, 127, 0.8133333333);
--el-color-primary-light-5: rgba(2, 102, 99, 0.8666666667);
--el-color-primary-light-7: rgba(2, 65, 77, 0.92);
--el-color-primary-light-8: rgba(2, 49, 68, 0.9466666667);
--el-color-primary-light-9: rgba(2, 35, 59, 0.9733333333);
--el-color-primary-dark-2: rgba(1, 167, 128, 0.7866666667);
--el-color-success: #01efb7bb;
/** text-color */
--el-text-color-primary: rgba(255, 255, 255, 0.8);
@ -28,3 +34,8 @@ html.dark-blue {
/** mask */
--el-mask-color: rgba(0, 0, 0, 0.5);
}
/** button */
html.dark-blue .el-button {
--el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}

38
src/styles/theme/dark-blue/element-plus.scss
View File

@ -4,10 +4,24 @@
*/
@use "sass:map";
@use "sass:math";
@use "element-plus/theme-chalk/src/mixins/function.scss" as *;
@use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
@use "element-plus/theme-chalk/src/mixins/mixins.scss" as *;
@use "./variables.scss" as *;
// 生成指定颜色的明亮/黑暗颜色
@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
$colors: map.deep-merge(
(
$type: (
"#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
)
),
$colors
) !global;
}
$types: primary, success, warning, danger, error, info;
$color: $theme-color;
@ -16,6 +30,7 @@ $success: #01efb7bb;
$colors: () !default;
$colors: map.deep-merge(
(
"white": #ffffff,
"primary": (
"base": $color
),
@ -40,6 +55,15 @@ $text-color: map.merge(
$text-color
);
// 生成 --el-color-${type}-light-i
@each $type in (primary) {
@for $i from 1 through 9 {
@include set-color-mix-level($type, $i, "light", #021633);
}
// --el-color-${type}-dark-2
@include set-color-mix-level($type, 2, "dark", #000);
}
// border
$border: () !default;
$border: map.merge(
@ -81,11 +105,23 @@ $mask-color: map.merge(
$mask-color
);
// button
$button: () !default;
$button: map.merge(
(
"disabled-text-color": rgba(255, 255, 255, 0.5)
),
$button
);
html.dark-blue {
@include set-css-var-value(("color", "primary"), $color);
@include set-css-color-type($colors, "primary");
@include set-component-css-var("text-color", $text-color);
@include set-component-css-var("border-color", $border);
@include set-component-css-var("fill-color", $fill-color);
@include set-component-css-var("bg-color", $bg-color);
@include set-component-css-var("mask-color", $mask-color);
@include b(button) {
@include set-component-css-var("button", $button);
}
}