From 93b20e8dcb94a37fce62a97511eb56e005b06839 Mon Sep 17 00:00:00 2001
From: captain-hema <327105853@qq.com>
Date: Fri, 21 Apr 2023 18:34:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=B1=E8=93=9D=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E4=B8=8B=E5=AF=B9=20Element=20Plus=20=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E7=9A=84=E8=A6=86=E7=9B=96=E8=BF=9B=E8=A1=8C=E6=89=A9=E5=B1=95?=
 =?UTF-8?q?=20(#57)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/theme/dark-blue/element-plus.css  |  1 +
 src/styles/theme/dark-blue/element-plus.scss | 91 ++++++++++++++++++++
 src/styles/theme/dark-blue/index.scss        |  3 +-
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/theme/dark-blue/element-plus.scss

diff --git a/src/styles/theme/dark-blue/element-plus.css b/src/styles/theme/dark-blue/element-plus.css
index c6f5cd6..b07cd65 100644
--- a/src/styles/theme/dark-blue/element-plus.css
+++ b/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 {
diff --git a/src/styles/theme/dark-blue/element-plus.scss b/src/styles/theme/dark-blue/element-plus.scss
new file mode 100644
index 0000000..877294e
--- /dev/null
+++ b/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);
+}
diff --git a/src/styles/theme/dark-blue/index.scss b/src/styles/theme/dark-blue/index.scss
index e417e25..95456ef 100644
--- a/src/styles/theme/dark-blue/index.scss
+++ b/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";