commit
909c12d3c6
@ -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>
|
||||
|
@ -1,4 +1,5 @@
|
||||
{
|
||||
"followSystemTheme": true,
|
||||
"darkMode": false,
|
||||
"layout": {
|
||||
"minWidth": 900,
|
||||
|
@ -29,6 +29,7 @@ const themeColorList = [
|
||||
];
|
||||
|
||||
const defaultThemeSetting: Theme.Setting = {
|
||||
followSystemTheme: true,
|
||||
darkMode: false,
|
||||
layout: {
|
||||
minWidth: 900,
|
||||
|
@ -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;
|
||||
|
@ -53,7 +53,7 @@ export default function subscribeThemeStore() {
|
||||
osTheme,
|
||||
newValue => {
|
||||
const isDark = newValue === 'dark';
|
||||
theme.setDarkMode(isDark);
|
||||
theme.autoFollowSystemMode(isDark);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
2
src/typings/system.d.ts
vendored
2
src/typings/system.d.ts
vendored
@ -98,6 +98,8 @@ declare namespace Service {
|
||||
declare namespace Theme {
|
||||
/** 主题配置 */
|
||||
interface Setting {
|
||||
/** 是否自动跟随系统主题 */
|
||||
followSystemTheme: boolean;
|
||||
/** 暗黑模式 */
|
||||
darkMode: boolean;
|
||||
/** 布局样式 */
|
||||
|
Loading…
Reference in New Issue
Block a user