feat: 深蓝主题下对 Element Plus 颜色的覆盖进行扩展 (#57)

src/styles/theme/dark-blue/element-plus.css

@@ -1,6 +1,7 @@
 /**
  * dark-blue 主题下的 Element Plus CSS 变量
  * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
+ * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
  */
 
 html.dark-blue {

src/styles/theme/dark-blue/element-plus.scss

@@ -0,0 +1,91 @@
+/**
+ * dark-blue 主题下的 Element Plus SCSS 变量
+ * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
+ */
+
+@use "sass:map";
+@use "element-plus/theme-chalk/src/mixins/function.scss" as *;
+@use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
+@use "./variables.scss" as *;
+
+$types: primary, success, warning, danger, error, info;
+
+$color: $theme-color;
+$success: #01efb7bb;
+
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    "primary": (
+      "base": $color
+    ),
+    "success": (
+      "base": $success
+    )
+  ),
+  $colors
+);
+
+// text
+$text-color-base: #fff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    "primary": rgba($text-color-base, 0.8),
+    "regular": rgba($text-color-base, 0.8),
+    "secondary": rgba($text-color-base, 0.8),
+    "placeholder": rgba($text-color-base, 0.8),
+    "disabled": rgba($text-color-base, 0.3)
+  ),
+  $text-color
+);
+
+// border
+$border: () !default;
+$border: map.merge(
+  (
+    "": #01efb755,
+    "light": #01efb755,
+    "lighter": #01efb755
+  ),
+  $border
+);
+
+// fill
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    "": #01efb710,
+    "light": #01efb710,
+    "blank": #031e47
+  ),
+  $fill-color
+);
+
+// background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    "": #021633,
+    "overlay": #021633
+  ),
+  $bg-color
+);
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    "": rgba(0, 0, 0, 0.5)
+  ),
+  $mask-color
+);
+
+html.dark-blue {
+  @include set-css-var-value(("color", "primary"), $color);
+  @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);
+}

src/styles/theme/dark-blue/index.scss

@@ -1,3 +1,4 @@
-@use "./element-plus.css";
+@use "./element-plus.css"; // 方案一
+// @use "./element-plus.scss"; // 方案二
 @import "./variables.scss";
 @import "../core/index.scss";