fix: console warning when using system follow settings

kirklin · Jul 19, 2023 · bf28364 · bf28364 · vercel · Jul 19, 2023
1 parent 7e96552
commit bf28364
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git 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
@@ -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 });