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";