From bf28364bcd83221a8b571ae934fcea2d4fa534cb Mon Sep 17 00:00:00 2001
From: Kirk Lin <linkirk@163.com>
Date: Thu, 20 Jul 2023 00:30:03 +0800
Subject: [PATCH] fix: console warning when using system follow settings

---
 apps/admin/src/setting/themeSetting.ts       |  2 +-
 apps/admin/src/store/modules/design/index.ts | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/admin/src/setting/themeSetting.ts b/apps/admin/src/setting/themeSetting.ts
index 89ad983..83f58af 100644
--- a/apps/admin/src/setting/themeSetting.ts
+++ b/apps/admin/src/setting/themeSetting.ts
@@ -16,7 +16,7 @@ export const DEFAULT_THEME_SETTING: ThemeSetting = {
 
   // 是否开启跟随系统颜色
   // Whether to follow the system theme
-  shouldFollowSystemTheme: false,
+  shouldFollowSystemTheme: true,
 
   // 主题颜色
   // The theme color
diff --git a/apps/admin/src/store/modules/design/index.ts b/apps/admin/src/store/modules/design/index.ts
index 2b890d7..ee66067 100644
--- a/apps/admin/src/store/modules/design/index.ts
+++ b/apps/admin/src/store/modules/design/index.ts
@@ -3,7 +3,7 @@ import { deepMerge } from "@celeris/utils";
 import { defineStore } from "pinia";
 import { APP_DESIGN_STORE_ID } from "@celeris/constants";
 import type { GlobalTheme, GlobalThemeOverrides } from "naive-ui";
-import { darkTheme, useOsTheme } from "naive-ui";
+import { darkTheme } from "naive-ui";
 import { getNaiveUICustomTheme } from "./themeUtils";
 import { DEFAULT_THEME_SETTING } from "~/setting/themeSetting";
 
@@ -13,6 +13,7 @@ interface DesignState {
 const colorMode = useColorMode({
   initialValue: DEFAULT_THEME_SETTING.shouldFollowSystemTheme ? "auto" : (DEFAULT_THEME_SETTING.shouldEnableDarkMode ? "dark" : "light"),
 });
+const isOsDarkTheme = usePreferredDark();
 export const useDesignStore = defineStore({
   id: APP_DESIGN_STORE_ID,
   persist: {
@@ -28,10 +29,7 @@ export const useDesignStore = defineStore({
     },
     //   获取Naive UI 预设主题
     getNaiveUIPresetTheme(state): GlobalTheme | null {
-      if (state.themeSetting.shouldFollowSystemTheme) {
-        return useOsTheme().value === "dark" ? darkTheme : null;
-      }
-      return colorMode.value === "dark" ? darkTheme : null;
+      return this.getDarkMode ? darkTheme : null;
     },
     // 获取Naive UI 自定义主题
     getNaiveUICustomTheme(state): GlobalThemeOverrides | null {
@@ -42,8 +40,8 @@ export const useDesignStore = defineStore({
     },
     //  获取暗黑模式
     getDarkMode(state): boolean {
-      if (state.themeSetting.shouldFollowSystemTheme) {
-        return useOsTheme().value === "dark";
+      if (this.getFollowSystemTheme) {
+        return isOsDarkTheme.value;
       }
       return state.themeSetting.shouldEnableDarkMode;
     },
@@ -73,7 +71,7 @@ export const useDesignStore = defineStore({
     setDarkMode(darkMode: boolean): void {
       if (this.themeSetting.shouldFollowSystemTheme) {
         colorMode.value = "auto";
-        this.setThemeSetting({ shouldEnableDarkMode: useOsTheme().value === "dark" });
+        this.setThemeSetting({ shouldEnableDarkMode: isOsDarkTheme.value });
       } else {
         colorMode.value = darkMode ? "dark" : "light";
         this.setThemeSetting({ shouldEnableDarkMode: darkMode });