feat(projects): 添加自动跟随系统主题设置

soybeanjs · Apr 29, 2022 · ba07b69 · ba07b69
1 parent 3d8befa
commit ba07b69
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 12 deletions.
diff --git a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -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>

diff --git a/src/settings/theme.json b/src/settings/theme.json
@@ -1,4 +1,5 @@
 {
+	"followSystemTheme": true,
 	"darkMode": false,
 	"layout": {
 		"minWidth": 900,

diff --git a/src/settings/theme.ts b/src/settings/theme.ts
@@ -29,6 +29,7 @@ const themeColorList = [
 ];
 
 const defaultThemeSetting: Theme.Setting = {
+  followSystemTheme: true,
   darkMode: false,
   layout: {
     minWidth: 900,

diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
@@ -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;

diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts
@@ -53,7 +53,7 @@ export default function subscribeThemeStore() {
     osTheme,
     newValue => {
       const isDark = newValue === 'dark';
-      theme.setDarkMode(isDark);
+      theme.autoFollowSystemMode(isDark);
     },
     { immediate: true }
   );

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