attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 黑暗模式

Browse Source
This commit is contained in:
wang_fan_w 2024-05-01 23:56:53 +08:00
parent ae60062405
commit 08a75a10e3
10 changed files with 89 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -1,13 +1,13 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/icons/snow.svg" /> <link rel="icon" type="image/svg+xml" href="/src/assets/svgs/snow.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DC-Admin</title> <title>DC-Admin</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

10
src/App.vue
View File

@ -6,9 +6,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { loadingPage } from "@/utils/loading-page"; import { loadingPage } from "@/utils/loading-page";
import { useRoutingMethod } from "@/hooks/useThemeMethods";
// 初始化主题
const onTheme = () => {
let { darkMode } = useRoutingMethod();
darkMode();
};
onTheme();
// 加载动画
loadingPage.start(); loadingPage.start();
onMounted(() => { onMounted(() => {
loadingPage.done(200); loadingPage.done(200);
}); });

22
src/hooks/useThemeMethods.ts Normal file
View File

@ -0,0 +1,22 @@
import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/store/modules/theme-config";
/* 主题处理hooks */
export const useRoutingMethod = () => {
/**
* @description: 暗黑模式
*/
const darkMode = () => {
const themeStore = useThemeConfig();
const { darkMode } = storeToRefs(themeStore);
if (darkMode.value) {
// 设置为暗黑主题
document.body.setAttribute("arco-theme", "dark");
} else {
// 恢复亮色主题
document.body.removeAttribute("arco-theme");
}
};
return {
darkMode
};
};

5
src/layout/components/Aside/index.vue
View File

@ -75,4 +75,9 @@ const { collapsed } = storeToRefs(themeStore);
display: none; display: none;
} }
} }
// 去掉sider背景
.arco-layout-sider {
background: unset;
}
</style> </style>

22
src/layout/components/Header/index.vue
View File

@ -27,10 +27,11 @@
</template> </template>
</a-dropdown> </a-dropdown>
<!-- 切换黑夜模式 --> <!-- 切换黑夜模式 -->
<a-tooltip :content="$t(`language.switch-to-night-mode`)"> <a-tooltip :content="$t(`language.${!darkMode ? 'switch-to-night-mode' : 'switch-to-daytime-mode'}`)">
<a-button size="mini" type="text" class="icon_btn"> <a-button size="mini" type="text" class="icon_btn" @click="onNightMode">
<template #icon> <template #icon>
<icon-sun-fill :size="18" /> <icon-sun-fill :size="18" v-if="!darkMode" />
<icon-moon-fill :size="18" v-else />
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@ -124,12 +125,25 @@ import { useThemeConfig } from "@/store/modules/theme-config";
const i18n = useI18n(); const i18n = useI18n();
const router = useRouter(); const router = useRouter();
const themeStore = useThemeConfig(); const themeStore = useThemeConfig();
const { collapsed, language } = storeToRefs(themeStore); const { collapsed, language, darkMode } = storeToRefs(themeStore);
const onCollapsed = () => { const onCollapsed = () => {
themeStore.setCollapsed(!collapsed.value); themeStore.setCollapsed(!collapsed.value);
}; };
// 黑暗模式
const onNightMode = () => {
darkMode.value = !darkMode.value;
if (darkMode.value) {
// 设置为暗黑主题
document.body.setAttribute("arco-theme", "dark");
} else {
// 恢复亮色主题
document.body.removeAttribute("arco-theme");
}
console.log("黑暗模式", darkMode.value);
};
// 语言 // 语言
const onLange = (e: string) => { const onLange = (e: string) => {
if (e === "Chinese" || e === "中文") { if (e === "Chinese" || e === "中文") {

9
src/layout/components/Menu/index.vue
View File

@ -40,4 +40,11 @@ const onMenuItem = (key: string) => {
}; };
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
// .arco-menu-light {
// background: unset;
// }
// .arco-menu-light .arco-menu-item {
// background: unset;
// }
</style>

3
src/store/modules/theme-config.ts
View File

@ -10,7 +10,8 @@ export const useThemeConfig = defineStore("theme-config", {
state: (): any => ({ state: (): any => ({
collapsed: false, // 是否折叠菜单 collapsed: false, // 是否折叠菜单
refreshPage: true, // 刷新页面 refreshPage: true, // 刷新页面
language: "zh-CN" // 系统语言 language: "zh-CN", // 系统语言
darkMode: false // 黑暗模式
}), }),
actions: { actions: {
// 折叠菜单 // 折叠菜单

8
src/style/global-theme.scss
View File

@ -27,10 +27,10 @@ $shadow-border-5: inset 0 0 0 1px violet;
$shadow-border-6: inset 0 0 0 1px green; $shadow-border-6: inset 0 0 0 1px green;
// 填充色 // 填充色
$color-fill-1: #eeeeee; // 常规填充色/灰底悬浮 $color-fill-1: var(--color-fill-1); // 浅/禁用
$color-fill-2: #d1d1d1; // 深/灰底悬浮 $color-fill-2: var(--color-fill-2); // 常规填充色/灰底悬浮
$color-fill-3: #b6b6b6; // 重/特殊场景 $color-fill-3: var(--color-fill-3); // 深/灰底悬浮
$color-fill-4: #9b9b9b; // 浅/禁用 $color-fill-4: var(--color-fill-4); // 重/特殊场景
// 设置全局主题色：https://arco.design/vue/docs/token // 设置全局主题色：https://arco.design/vue/docs/token
$color-primary: rgb(var(--primary-6)); // 主题色-主要 $color-primary: rgb(var(--primary-6)); // 主题色-主要

7
src/style/index.scss
View File

@ -24,3 +24,10 @@ html {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
// 设置全局颜色-关联黑暗模式
body {
background-color: var(--color-bg-1);
color: var(--color-text-1);
// color-scheme: dark; // 这个属性设置后，滚动条也能表现为暗色模式
}

2
src/views/login/login.vue
View File

@ -139,7 +139,7 @@ const onSubmit = ({ errors }: any) => {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: 0 0 8px 1px $color-fill-1; box-shadow: 0 0 8px 1px $color-fill-2;
.banner_box { .banner_box {
width: 650px; width: 650px;
height: 100%; height: 100%;