From 08a75a10e38a5921e9df982140d4cd35ad51e840 Mon Sep 17 00:00:00 2001 From: wang_fan_w <2547096351@qq.com> Date: Wed, 1 May 2024 23:56:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=91=E6=9A=97=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 26 +++++++++++++------------- src/App.vue | 10 +++++++++- src/hooks/useThemeMethods.ts | 22 ++++++++++++++++++++++ src/layout/components/Aside/index.vue | 5 +++++ src/layout/components/Header/index.vue | 22 ++++++++++++++++++---- src/layout/components/Menu/index.vue | 9 ++++++++- src/store/modules/theme-config.ts | 3 ++- src/style/global-theme.scss | 8 ++++---- src/style/index.scss | 7 +++++++ src/views/login/login.vue | 2 +- 10 files changed, 89 insertions(+), 25 deletions(-) create mode 100644 src/hooks/useThemeMethods.ts diff --git a/index.html b/index.html index 40dcdf5..dcc01d3 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - - - - - - - DC-Admin - - -
- - - + + + + + + + DC-Admin + + +
+ + + diff --git a/src/App.vue b/src/App.vue index c4e5a8e..61f911b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,9 +6,17 @@ - + diff --git a/src/store/modules/theme-config.ts b/src/store/modules/theme-config.ts index 77f4636..7ab9b13 100644 --- a/src/store/modules/theme-config.ts +++ b/src/store/modules/theme-config.ts @@ -10,7 +10,8 @@ export const useThemeConfig = defineStore("theme-config", { state: (): any => ({ collapsed: false, // 是否折叠菜单 refreshPage: true, // 刷新页面 - language: "zh-CN" // 系统语言 + language: "zh-CN", // 系统语言 + darkMode: false // 黑暗模式 }), actions: { // 折叠菜单 diff --git a/src/style/global-theme.scss b/src/style/global-theme.scss index 47f262f..3605611 100644 --- a/src/style/global-theme.scss +++ b/src/style/global-theme.scss @@ -27,10 +27,10 @@ $shadow-border-5: inset 0 0 0 1px violet; $shadow-border-6: inset 0 0 0 1px green; // 填充色 -$color-fill-1: #eeeeee; // 常规填充色/灰底悬浮 -$color-fill-2: #d1d1d1; // 深/灰底悬浮 -$color-fill-3: #b6b6b6; // 重/特殊场景 -$color-fill-4: #9b9b9b; // 浅/禁用 +$color-fill-1: var(--color-fill-1); // 浅/禁用 +$color-fill-2: var(--color-fill-2); // 常规填充色/灰底悬浮 +$color-fill-3: var(--color-fill-3); // 深/灰底悬浮 +$color-fill-4: var(--color-fill-4); // 重/特殊场景 // 设置全局主题色：https://arco.design/vue/docs/token $color-primary: rgb(var(--primary-6)); // 主题色-主要 diff --git a/src/style/index.scss b/src/style/index.scss index aea37f0..fc4b394 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -24,3 +24,10 @@ html { height: 100vh; overflow: hidden; } + +// 设置全局颜色-关联黑暗模式 +body { + background-color: var(--color-bg-1); + color: var(--color-text-1); + // color-scheme: dark; // 这个属性设置后，滚动条也能表现为暗色模式 +} diff --git a/src/views/login/login.vue b/src/views/login/login.vue index 5859a82..ecf2299 100644 --- a/src/views/login/login.vue +++ b/src/views/login/login.vue @@ -139,7 +139,7 @@ const onSubmit = ({ errors }: any) => { transform: translate(-50%, -50%); display: flex; align-items: center; - box-shadow: 0 0 8px 1px $color-fill-1; + box-shadow: 0 0 8px 1px $color-fill-2; .banner_box { width: 650px; height: 100%;