Merge pull request #83 from toolvcn/相思

feat(projects): 添加自动跟随系统主题设置
This commit is contained in:
Soybean 2022-04-29 17:56:27 +08:00 committed by GitHub
commit 909c12d3c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 41 additions and 12 deletions

View File

@ -1,19 +1,34 @@
<template>
<n-divider title-placement="center">深色主题</n-divider>
<div class="flex-center">
<n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px text-primary" />
</template>
<template #unchecked>
<icon-mdi-moon-waning-crescent class="text-14px text-primary" />
</template>
</n-switch>
</div>
<n-divider title-placement="center">主题</n-divider>
<n-space vertical size="large">
<setting-menu label="深色主题">
<div class="flex-center">
<n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px text-primary" />
</template>
<template #unchecked>
<icon-mdi-moon-waning-crescent class="text-14px text-primary" />
</template>
</n-switch>
</div>
</setting-menu>
<setting-menu label="跟随系统">
<n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">
<template #checked>
<icon-ic:baseline-do-not-disturb class="text-14px text-primary" />
</template>
<template #unchecked>
<icon-ic:round-hdr-auto class="text-14px text-primary" />
</template>
</n-switch>
</setting-menu>
</n-space>
</template>
<script lang="ts" setup>
import { useThemeStore } from '@/store';
import SettingMenu from '../SettingMenu/index.vue';
const theme = useThemeStore();
</script>

View File

@ -1,4 +1,5 @@
{
"followSystemTheme": true,
"darkMode": false,
"layout": {
"minWidth": 900,

View File

@ -29,6 +29,7 @@ const themeColorList = [
];
const defaultThemeSetting: Theme.Setting = {
followSystemTheme: true,
darkMode: false,
layout: {
minWidth: 900,

View File

@ -26,6 +26,16 @@ export const useThemeStore = defineStore('theme-store', {
setDarkMode(darkMode: boolean) {
this.darkMode = darkMode;
},
/** 设置自动跟随系统主题 */
setFollowSystemTheme(visible: boolean) {
this.followSystemTheme = visible;
},
/** 自动跟随系统主题 */
autoFollowSystemMode(darkMode: boolean) {
if (this.followSystemTheme) {
this.darkMode = darkMode;
}
},
/** 切换/关闭 暗黑模式 */
toggleDarkMode() {
this.darkMode = !this.darkMode;

View File

@ -53,7 +53,7 @@ export default function subscribeThemeStore() {
osTheme,
newValue => {
const isDark = newValue === 'dark';
theme.setDarkMode(isDark);
theme.autoFollowSystemMode(isDark);
},
{ immediate: true }
);

View File

@ -98,6 +98,8 @@ declare namespace Service {
declare namespace Theme {
/** 主题配置 */
interface Setting {
/** 是否自动跟随系统主题 */
followSystemTheme: boolean;
/** 暗黑模式 */
darkMode: boolean;
/** 布局样式 */