From e71967eaf8e3bf2c2801acbd1dbda0ccf26362ff Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Fri, 21 Oct 2022 18:02:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B7=B1=E8=93=9D?=
=?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/hooks/useTheme.ts | 6 +++++-
src/styles/index.scss | 2 +-
src/styles/theme/dark-blue/element-plus.css | 24 +++++++++++++++++++++
src/styles/theme/dark-blue/index.scss | 3 +++
src/styles/theme/dark-blue/variables.scss | 16 ++++++++++++++
src/styles/theme/register.scss | 1 +
6 files changed, 50 insertions(+), 2 deletions(-)
create mode 100644 src/styles/theme/dark-blue/element-plus.css
create mode 100644 src/styles/theme/dark-blue/index.scss
create mode 100644 src/styles/theme/dark-blue/variables.scss
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 90154bd..7c2acec 100644
--- a/src/hooks/useTheme.ts
+++ b/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"
}
]
/** 正在应用的主题名称 */
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3d5fce2..fcb0e80 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,5 @@
// 全局 CSS 变量
-@import "variables.css";
+@import "./variables.css";
// Transition
@import "./transition.scss";
// 注册多主题
diff --git a/src/styles/theme/dark-blue/element-plus.css b/src/styles/theme/dark-blue/element-plus.css
new file mode 100644
index 0000000..352f551
--- /dev/null
+++ b/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;
+}
diff --git a/src/styles/theme/dark-blue/index.scss b/src/styles/theme/dark-blue/index.scss
new file mode 100644
index 0000000..e417e25
--- /dev/null
+++ b/src/styles/theme/dark-blue/index.scss
@@ -0,0 +1,3 @@
+@use "./element-plus.css";
+@import "./variables.scss";
+@import "../core/index.scss";
diff --git a/src/styles/theme/dark-blue/variables.scss b/src/styles/theme/dark-blue/variables.scss
new file mode 100644
index 0000000..4f7fe50
--- /dev/null
+++ b/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;
diff --git a/src/styles/theme/register.scss b/src/styles/theme/register.scss
index 658a90d..6b74211 100644
--- a/src/styles/theme/register.scss
+++ b/src/styles/theme/register.scss
@@ -1,2 +1,3 @@
// 注册多主题
@import "./dark/index.scss";
+@import "./dark-blue/index.scss";