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

2
index.html
View File

@ -2,7 +2,7 @@
<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>

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