feat: 新增深蓝色主题模式

src/hooks/useTheme.ts

@@ -7,7 +7,7 @@ interface IThemeList {
 }
 
 /** 注册的主题名称, 其中 normal 是必填的 */
-export type ThemeName = "normal" | "dark"
+export type ThemeName = "normal" | "dark" | "dark-blue"
 
 /** 主题 hook */
 export function useTheme() {
@@ -20,6 +20,10 @@ export function useTheme() {
     {
       title: "黑暗",
       name: "dark"
+    },
+    {
+      title: "深蓝",
+      name: "dark-blue"
     }
   ]
   /** 正在应用的主题名称 */

src/styles/index.scss

@@ -1,5 +1,5 @@
 // 全局 CSS 变量
-@import "variables.css";
+@import "./variables.css";
 // Transition
 @import "./transition.scss";
 // 注册多主题

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

@@ -0,0 +1,24 @@
+/* 查阅所有变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss */
+
+html.dark-blue {
+  /* color */
+  --el-color-primary: #01efb7bb;
+  --el-color-success: #01efb7bb;
+  /* text-color */
+  --el-text-color-primary: #ffffffee;
+  --el-text-color-regular: #ffffffee;
+  --el-text-color-secondary: #ffffffee;
+  --el-text-color-placeholder: #ffffffee;
+  --el-text-color-disabled: #ffffff55;
+  /* border-color */
+  --el-border-color: #01efb755;
+  --el-border-color-light: #01efb755;
+  --el-border-color-lighter: #01efb755;
+  /** fill-color */
+  --el-fill-color: #01efb710;
+  --el-fill-color-light: #01efb710;
+  --el-fill-color-blank: #031e47;
+  /* bg-color */
+  --el-bg-color: #021633;
+  --el-bg-color-overlay: #021633;
+}

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

@@ -0,0 +1,3 @@
+@use "./element-plus.css";
+@import "./variables.scss";
+@import "../core/index.scss";

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

@@ -0,0 +1,16 @@
+/** dark 主题下的变量 */
+
+// 主题名称
+$theme-name: "dark-blue";
+// 主题背景颜色
+$theme-bg-color: #021633;
+// active 状态下主题背景颜色
+$active-theme-bg-color: #01efb7bb;
+// 默认文字颜色
+$font-color: #ffffffee;
+// active 状态下文字颜色
+$active-font-color: #fff;
+// hover 状态下文字颜色
+$hover-color: #fff;
+// 边框颜色
+$border-color: #01efb755;

src/styles/theme/register.scss

@@ -1,2 +1,3 @@
 // 注册多主题
 @import "./dark/index.scss";
+@import "./dark-blue/index.scss";