feat: 黑暗模式
This commit is contained in:
wang_fan_w
parent
ae60062405
commit
08a75a10e3
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>DC-Admin</title>
|
||||
</head>
|
||||
|
||||
10
src/App.vue
10
src/App.vue
@ -6,9 +6,17 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { loadingPage } from "@/utils/loading-page";
|
||||
import { useRoutingMethod } from "@/hooks/useThemeMethods";
|
||||
|
||||
// 初始化主题
|
||||
const onTheme = () => {
|
||||
let { darkMode } = useRoutingMethod();
|
||||
darkMode();
|
||||
};
|
||||
onTheme();
|
||||
|
||||
// 加载动画
|
||||
loadingPage.start();
|
||||
|
||||
onMounted(() => {
|
||||
loadingPage.done(200);
|
||||
});
|
||||
|
||||
22
src/hooks/useThemeMethods.ts
Normal file
22
src/hooks/useThemeMethods.ts
Normal 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
|
||||
};
|
||||
};
|
||||
@ -75,4 +75,9 @@ const { collapsed } = storeToRefs(themeStore);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 去掉sider背景
|
||||
.arco-layout-sider {
|
||||
background: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,10 +27,11 @@
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<!-- 切换黑夜模式 -->
|
||||
<a-tooltip :content="$t(`language.switch-to-night-mode`)">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<a-tooltip :content="$t(`language.${!darkMode ? 'switch-to-night-mode' : 'switch-to-daytime-mode'}`)">
|
||||
<a-button size="mini" type="text" class="icon_btn" @click="onNightMode">
|
||||
<template #icon>
|
||||
<icon-sun-fill :size="18" />
|
||||
<icon-sun-fill :size="18" v-if="!darkMode" />
|
||||
<icon-moon-fill :size="18" v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
@ -124,12 +125,25 @@ import { useThemeConfig } from "@/store/modules/theme-config";
|
||||
const i18n = useI18n();
|
||||
const router = useRouter();
|
||||
const themeStore = useThemeConfig();
|
||||
const { collapsed, language } = storeToRefs(themeStore);
|
||||
const { collapsed, language, darkMode } = storeToRefs(themeStore);
|
||||
|
||||
const onCollapsed = () => {
|
||||
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) => {
|
||||
if (e === "Chinese" || e === "中文") {
|
||||
|
||||
@ -40,4 +40,11 @@ const onMenuItem = (key: string) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
// .arco-menu-light {
|
||||
// background: unset;
|
||||
// }
|
||||
// .arco-menu-light .arco-menu-item {
|
||||
// background: unset;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -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: {
|
||||
// 折叠菜单
|
||||
|
||||
@ -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)); // 主题色-主要
|
||||
|
||||
@ -24,3 +24,10 @@ html {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 设置全局颜色-关联黑暗模式
|
||||
body {
|
||||
background-color: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
// color-scheme: dark; // 这个属性设置后，滚动条也能表现为暗色模式
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user