@lobehub/chat 1.70.4 → 1.70.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.70.5](https://github.com/lobehub/lobe-chat/compare/v1.70.4...v1.70.5)
+
+<sup>Released on **2025-03-11**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Refactor the theme implement.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Refactor the theme implement, closes [#6844](https://github.com/lobehub/lobe-chat/issues/6844) ([e5c2161](https://github.com/lobehub/lobe-chat/commit/e5c2161))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.70.4](https://github.com/lobehub/lobe-chat/compare/v1.70.3...v1.70.4)
 
 <sup>Released on **2025-03-11**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Refactor the theme implement."
+      ]
+    },
+    "date": "2025-03-11",
+    "version": "1.70.5"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.70.4",
+  "version": "1.70.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/(mobile)/me/(home)/features/Header.tsx

@@ -7,12 +7,12 @@ import { Moon, Sun } from 'lucide-react';
 import { memo } from 'react';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { useUserStore } from '@/store/user';
+import { useGlobalStore } from '@/store/global';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const theme = useTheme();
-  const switchThemeMode = useUserStore((s) => s.switchThemeMode);
+  const switchThemeMode = useGlobalStore((s) => s.switchThemeMode);
 
   return (
     <MobileNavBar

package/src/app/[variants]/(main)/settings/common/features/Theme/index.tsx

@@ -12,8 +12,9 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 import { Locales, localeOptions } from '@/locales/resources';
 import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors, userGeneralSettingsSelectors } from '@/store/user/selectors';
+import { settingsSelectors } from '@/store/user/selectors';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
 
@@ -24,8 +25,9 @@ const Theme = memo(() => {
 
   const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
-  const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
-  const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
+  const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
+  const [setSettings] = useUserStore((s) => [s.setSettings]);
+  const [setThemeMode] = useGlobalStore((s) => [s.switchThemeMode]);
 
   useSyncSettings(form);
   const [switchLocale] = useGlobalStore((s) => [s.switchLocale]);

package/src/const/settings/common.ts

@@ -2,5 +2,4 @@ import { UserGeneralConfig } from '@/types/user/settings';
 
 export const DEFAULT_COMMON_SETTINGS: UserGeneralConfig = {
   fontSize: 14,
-  themeMode: 'auto',
 };

package/src/features/User/UserPanel/ThemeButton.tsx

@@ -6,8 +6,8 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Menu, { type MenuProps } from '@/components/Menu';
-import { useUserStore } from '@/store/user';
-import { userGeneralSettingsSelectors } from '@/store/user/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 const themeIcons = {
   auto: Monitor,
@@ -17,8 +17,8 @@ const themeIcons = {
 
 const ThemeButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement = 'right' }) => {
   const theme = useTheme();
-  const [themeMode, switchThemeMode] = useUserStore((s) => [
-    userGeneralSettingsSelectors.currentThemeMode(s),
+  const [themeMode, switchThemeMode] = useGlobalStore((s) => [
+    systemStatusSelectors.themeMode(s),
     s.switchThemeMode,
   ]);
 

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -14,11 +14,9 @@ import Link from 'next/link';
 import { ReactNode, memo, useEffect } from 'react';
 
 import AntdStaticMethods from '@/components/AntdStaticMethods';
-import {
-  LOBE_THEME_APPEARANCE,
-  LOBE_THEME_NEUTRAL_COLOR,
-  LOBE_THEME_PRIMARY_COLOR,
-} from '@/const/theme';
+import { LOBE_THEME_NEUTRAL_COLOR, LOBE_THEME_PRIMARY_COLOR } from '@/const/theme';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { GlobalStyle } from '@/styles';
@@ -103,7 +101,7 @@ const AppTheme = memo<AppThemeProps>(
     // console.debug('server:appearance', defaultAppearance);
     // console.debug('server:primaryColor', defaultPrimaryColor);
     // console.debug('server:neutralColor', defaultNeutralColor);
-    const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
+    const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
     const { styles, cx, theme } = useStyles();
     const [primaryColor, neutralColor] = useUserStore((s) => [
       userGeneralSettingsSelectors.primaryColor(s),
@@ -120,15 +118,13 @@ const AppTheme = memo<AppThemeProps>(
 
     return (
       <ThemeProvider
+        appearance={themeMode !== 'auto' ? themeMode : undefined}
         className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
         customTheme={{
           neutralColor: neutralColor ?? defaultNeutralColor,
           primaryColor: primaryColor ?? defaultPrimaryColor,
         }}
         defaultAppearance={defaultAppearance}
-        onAppearanceChange={(appearance) => {
-          setCookie(LOBE_THEME_APPEARANCE, appearance);
-        }}
         theme={{
           cssVar: true,
           token: {

package/src/services/user/_deprecated.test.ts

@@ -57,7 +57,7 @@ describe('ClientService', () => {
   });
 
   it('should update user settings correctly', async () => {
-    const settingsPatch: DeepPartial<UserSettings> = { general: { themeMode: 'dark' } };
+    const settingsPatch: DeepPartial<UserSettings> = { general: { fontSize: 12 } };
     (UserModel.updateSettings as Mock).mockResolvedValue(undefined);
 
     await clientService.updateUserSettings(settingsPatch);

package/src/services/user/client.test.ts

@@ -54,7 +54,7 @@ describe('ClientService', () => {
   });
 
   it('should update user settings correctly', async () => {
-    const settingsPatch: DeepPartial<UserSettings> = { general: { themeMode: 'dark' } };
+    const settingsPatch: DeepPartial<UserSettings> = { general: { fontSize: 12 } };
 
     await clientService.updateUserSettings(settingsPatch);
 

package/src/store/global/action.test.ts

@@ -408,4 +408,19 @@ describe('createPreferenceSlice', () => {
       expect(result.current.status.inputHeight).toEqual(300);
     });
   });
+
+  describe('switchThemeMode', () => {
+    it('should switch theme mode', async () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      // Perform the action
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.switchThemeMode('light');
+      });
+
+      // Assert that updateUserSettings was called with the correct theme mode
+      expect(result.current.status.themeMode).toEqual('light');
+    });
+  });
 });

package/src/store/global/actions/__tests__/general.test.ts

@@ -0,0 +1,221 @@
+import { act, renderHook } from '@testing-library/react';
+import { ThemeMode } from 'antd-style';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { withSWR } from '~test-utils';
+
+import { CURRENT_VERSION } from '@/const/version';
+import { globalService } from '@/services/global';
+import { useGlobalStore } from '@/store/global';
+import { initialState } from '@/store/global/initialState';
+import { switchLang } from '@/utils/client/switchLang';
+
+vi.mock('@/utils/client/switchLang', () => ({
+  switchLang: vi.fn(),
+}));
+
+vi.mock('@/services/global', () => ({
+  globalService: {
+    getLatestVersion: vi.fn(),
+  },
+}));
+
+describe('generalActionSlice', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useGlobalStore.setState(initialState);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('updateSystemStatus', () => {
+    it('should not update status when not initialized', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        result.current.updateSystemStatus({ inputHeight: 200 });
+      });
+
+      expect(result.current.status).toEqual(initialState.status);
+    });
+
+    it('should update status when initialized', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.updateSystemStatus({ inputHeight: 200 });
+      });
+
+      expect(result.current.status.inputHeight).toBe(200);
+    });
+
+    it('should not update if new status equals current status', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const saveToLocalStorageSpy = vi.spyOn(result.current.statusStorage, 'saveToLocalStorage');
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.updateSystemStatus({ inputHeight: initialState.status.inputHeight });
+      });
+
+      expect(saveToLocalStorageSpy).not.toHaveBeenCalled();
+    });
+
+    it('should save to localStorage when status is updated', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const saveToLocalStorageSpy = vi.spyOn(result.current.statusStorage, 'saveToLocalStorage');
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.updateSystemStatus({ inputHeight: 300 });
+      });
+
+      expect(saveToLocalStorageSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ inputHeight: 300 }),
+      );
+    });
+
+    it('should merge nested objects correctly', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.updateSystemStatus({
+          expandSessionGroupKeys: ['test1', 'test2'],
+        });
+      });
+
+      expect(result.current.status.expandSessionGroupKeys).toEqual(['test1', 'test2']);
+    });
+  });
+
+  describe('switchLocale', () => {
+    it('should update language in system status and call switchLang', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const locale = 'zh-CN';
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.switchLocale(locale);
+      });
+
+      expect(result.current.status.language).toBe(locale);
+      expect(switchLang).toHaveBeenCalledWith(locale);
+    });
+
+    it('should not update language if status is not initialized', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const locale = 'zh-CN';
+
+      act(() => {
+        result.current.switchLocale(locale);
+      });
+
+      expect(result.current.status.language).toBeUndefined();
+    });
+  });
+
+  describe('switchThemeMode', () => {
+    it('should update theme mode in system status', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const themeMode: ThemeMode = 'dark';
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.switchThemeMode(themeMode);
+      });
+
+      expect(result.current.status.themeMode).toBe(themeMode);
+    });
+
+    it('should not update theme mode if status is not initialized', () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const themeMode: ThemeMode = 'dark';
+
+      act(() => {
+        result.current.switchThemeMode(themeMode);
+      });
+
+      expect(result.current.status.themeMode).toBe(initialState.status.themeMode);
+    });
+
+    it('should handle light theme mode', () => {
+      const { result } = renderHook(() => useGlobalStore());
+
+      act(() => {
+        useGlobalStore.setState({ isStatusInit: true });
+        result.current.switchThemeMode('light');
+      });
+
+      expect(result.current.status.themeMode).toBe('light');
+    });
+  });
+
+  describe('useCheckLatestVersion', () => {
+    it('should not fetch version when check is disabled', () => {
+      const getLatestVersionSpy = vi.spyOn(globalService, 'getLatestVersion');
+
+      renderHook(() => useGlobalStore().useCheckLatestVersion(false), {
+        wrapper: withSWR,
+      });
+
+      expect(getLatestVersionSpy).not.toHaveBeenCalled();
+    });
+
+    it('should set hasNewVersion when major version is newer', async () => {
+      const latestVersion = '999.0.0';
+      vi.spyOn(globalService, 'getLatestVersion').mockResolvedValueOnce(latestVersion);
+
+      const { result } = renderHook(() => useGlobalStore().useCheckLatestVersion(), {
+        wrapper: withSWR,
+      });
+
+      await act(async () => {
+        await result.current.data;
+      });
+
+      expect(useGlobalStore.getState().hasNewVersion).toBe(true);
+      expect(useGlobalStore.getState().latestVersion).toBe(latestVersion);
+    });
+
+    it('should not set hasNewVersion for same major.minor version', async () => {
+      const currentParts = CURRENT_VERSION.split('.');
+      const latestVersion = `${currentParts[0]}.${currentParts[1]}.999`;
+      vi.spyOn(globalService, 'getLatestVersion').mockResolvedValueOnce(latestVersion);
+
+      const { result } = renderHook(() => useGlobalStore().useCheckLatestVersion(), {
+        wrapper: withSWR,
+      });
+
+      await act(async () => {
+        await result.current.data;
+      });
+
+      // Reset hasNewVersion and latestVersion
+      useGlobalStore.setState({ hasNewVersion: undefined, latestVersion: undefined });
+
+      expect(useGlobalStore.getState().hasNewVersion).toBeUndefined();
+      expect(useGlobalStore.getState().latestVersion).toBeUndefined();
+    });
+
+    it('should not set hasNewVersion when version is invalid', async () => {
+      vi.spyOn(globalService, 'getLatestVersion').mockResolvedValueOnce('invalid.version');
+
+      const { result } = renderHook(() => useGlobalStore().useCheckLatestVersion(), {
+        wrapper: withSWR,
+      });
+
+      await act(async () => {
+        await result.current.data;
+      });
+
+      // Reset hasNewVersion and latestVersion
+      useGlobalStore.setState({ hasNewVersion: undefined, latestVersion: undefined });
+
+      expect(useGlobalStore.getState().hasNewVersion).toBeUndefined();
+      expect(useGlobalStore.getState().latestVersion).toBeUndefined();
+    });
+  });
+});

package/src/store/global/actions/general.ts

@@ -1,13 +1,16 @@
+import { ThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { gt, parse, valid } from 'semver';
 import { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { LOBE_THEME_APPEARANCE } from '@/const/theme';
 import { CURRENT_VERSION } from '@/const/version';
 import { useOnlyFetchOnceSWR } from '@/libs/swr';
 import { globalService } from '@/services/global';
 import type { SystemStatus } from '@/store/global/initialState';
 import { LocaleMode } from '@/types/locale';
+import { setCookie } from '@/utils/client/cookie';
 import { switchLang } from '@/utils/client/switchLang';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
@@ -18,6 +21,7 @@ const n = setNamespace('g');
 
 export interface GlobalGeneralAction {
   switchLocale: (locale: LocaleMode) => void;
+  switchThemeMode: (themeMode: ThemeMode) => void;
   updateSystemStatus: (status: Partial<SystemStatus>, action?: any) => void;
   useCheckLatestVersion: (enabledCheck?: boolean) => SWRResponse<string>;
   useInitSystemStatus: () => SWRResponse;
@@ -34,15 +38,20 @@ export const generalActionSlice: StateCreator<
 
     switchLang(locale);
   },
+  switchThemeMode: (themeMode) => {
+    get().updateSystemStatus({ themeMode });
+
+    setCookie(LOBE_THEME_APPEARANCE, themeMode === 'auto' ? undefined : themeMode);
+  },
   updateSystemStatus: (status, action) => {
     // Status cannot be modified when it is not initialized
     if (!get().isStatusInit) return;
 
     const nextStatus = merge(get().status, status);
+
     if (isEqual(get().status, nextStatus)) return;
 
     set({ status: nextStatus }, false, action || n('updateSystemStatus'));
-
     get().statusStorage.saveToLocalStorage(nextStatus);
   },
 

package/src/store/global/initialState.ts

@@ -1,3 +1,4 @@
+import type { ThemeMode } from 'antd-style';
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 
 import { DatabaseLoadingState } from '@/types/clientDB';
@@ -61,6 +62,10 @@ export interface SystemStatus {
   showFilePanel?: boolean;
   showSessionPanel?: boolean;
   showSystemRole?: boolean;
+  /**
+   * theme mode
+   */
+  themeMode?: ThemeMode;
   threadInputHeight: number;
   zenMode?: boolean;
 }
@@ -96,6 +101,7 @@ export const INITIAL_STATUS = {
   showFilePanel: true,
   showSessionPanel: true,
   showSystemRole: false,
+  themeMode: 'auto',
   threadInputHeight: 200,
   zenMode: false,
 } satisfies SystemStatus;

package/src/store/global/selectors/systemStatus.test.ts

@@ -0,0 +1,209 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { DatabaseLoadingState } from '@/types/clientDB';
+import { merge } from '@/utils/merge';
+
+import { GlobalState, INITIAL_STATUS, initialState } from '../initialState';
+import { systemStatusSelectors } from './systemStatus';
+
+// Mock version constants
+vi.mock('@/const/version', () => ({
+  isServerMode: false,
+  isUsePgliteDB: true,
+}));
+
+describe('systemStatusSelectors', () => {
+  describe('sessionGroupKeys', () => {
+    it('should return expandSessionGroupKeys from status', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          expandSessionGroupKeys: ['group1', 'group2'],
+        },
+      });
+      expect(systemStatusSelectors.sessionGroupKeys(s)).toEqual(['group1', 'group2']);
+    });
+
+    it('should return initial value if not set', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          expandSessionGroupKeys: undefined,
+        },
+      });
+      expect(systemStatusSelectors.sessionGroupKeys(s)).toEqual(
+        INITIAL_STATUS.expandSessionGroupKeys,
+      );
+    });
+  });
+
+  describe('basic selectors', () => {
+    const s: GlobalState = merge(initialState, {
+      status: {
+        showSystemRole: true,
+        mobileShowTopic: true,
+        mobileShowPortal: true,
+        showChatSideBar: true,
+        showSessionPanel: true,
+        showFilePanel: true,
+        hidePWAInstaller: true,
+        isShowCredit: true,
+        zenMode: false,
+        sessionsWidth: 300,
+        portalWidth: 500,
+        filePanelWidth: 400,
+        inputHeight: 150,
+        threadInputHeight: 100,
+      },
+    });
+
+    it('should return correct values for basic selectors', () => {
+      expect(systemStatusSelectors.showSystemRole(s)).toBe(true);
+      expect(systemStatusSelectors.mobileShowTopic(s)).toBe(true);
+      expect(systemStatusSelectors.mobileShowPortal(s)).toBe(true);
+      expect(systemStatusSelectors.showChatSideBar(s)).toBe(true);
+      expect(systemStatusSelectors.showSessionPanel(s)).toBe(true);
+      expect(systemStatusSelectors.showFilePanel(s)).toBe(true);
+      expect(systemStatusSelectors.hidePWAInstaller(s)).toBe(true);
+      expect(systemStatusSelectors.isShowCredit(s)).toBe(true);
+      expect(systemStatusSelectors.showChatHeader(s)).toBe(true);
+      expect(systemStatusSelectors.inZenMode(s)).toBe(false);
+      expect(systemStatusSelectors.sessionWidth(s)).toBe(300);
+      expect(systemStatusSelectors.portalWidth(s)).toBe(500);
+      expect(systemStatusSelectors.filePanelWidth(s)).toBe(400);
+      expect(systemStatusSelectors.inputHeight(s)).toBe(150);
+      expect(systemStatusSelectors.threadInputHeight(s)).toBe(100);
+    });
+
+    it('should handle zen mode effects', () => {
+      const zenState = merge(s, {
+        status: { zenMode: true },
+      });
+      expect(systemStatusSelectors.showChatSideBar(zenState)).toBe(false);
+      expect(systemStatusSelectors.showSessionPanel(zenState)).toBe(false);
+      expect(systemStatusSelectors.showChatHeader(zenState)).toBe(false);
+    });
+
+    it('should return default portal width if not set', () => {
+      const noPortalWidth = merge(initialState, {
+        status: { portalWidth: undefined },
+      });
+      expect(systemStatusSelectors.portalWidth(noPortalWidth)).toBe(400);
+    });
+  });
+
+  describe('theme mode', () => {
+    it('should return the correct theme', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          themeMode: 'light',
+        },
+      });
+      expect(systemStatusSelectors.themeMode(s)).toBe('light');
+    });
+
+    it('should return auto if not set', () => {
+      const s: GlobalState = merge(initialState, {
+        status: {
+          themeMode: undefined,
+        },
+      });
+      expect(systemStatusSelectors.themeMode(s)).toBe('auto');
+    });
+  });
+
+  describe('pglite status selectors', () => {
+    describe('isPgliteNotEnabled', () => {
+      it('should return true when conditions are met', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: false,
+          },
+        };
+        expect(systemStatusSelectors.isPgliteNotEnabled(s)).toBe(true);
+      });
+
+      it('should return false when isStatusInit is false', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: false,
+          status: {
+            ...initialState.status,
+            isEnablePglite: false,
+          },
+        };
+        expect(systemStatusSelectors.isPgliteNotEnabled(s)).toBe(false);
+      });
+    });
+
+    describe('isPgliteNotInited', () => {
+      it('should return true when pglite is enabled but not ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Initializing,
+        };
+        expect(systemStatusSelectors.isPgliteNotInited(s)).toBe(true);
+      });
+
+      it('should return false when pglite is ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Ready,
+        };
+        expect(systemStatusSelectors.isPgliteNotInited(s)).toBe(false);
+      });
+
+      it('should return false when pglite is not enabled', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: false,
+          },
+          initClientDBStage: DatabaseLoadingState.Initializing,
+        };
+        expect(systemStatusSelectors.isPgliteNotInited(s)).toBe(false);
+      });
+    });
+
+    describe('isPgliteInited', () => {
+      it('should return true when pglite is enabled and ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Ready,
+        };
+        expect(systemStatusSelectors.isPgliteInited(s)).toBe(true);
+      });
+
+      it('should return false when not ready', () => {
+        const s: GlobalState = {
+          ...initialState,
+          isStatusInit: true,
+          status: {
+            ...initialState.status,
+            isEnablePglite: true,
+          },
+          initClientDBStage: DatabaseLoadingState.Initializing,
+        };
+        expect(systemStatusSelectors.isPgliteInited(s)).toBe(false);
+      });
+    });
+  });
+});

package/src/store/global/selectors/systemStatus.ts

@@ -1,38 +1,38 @@
 import { isServerMode, isUsePgliteDB } from '@/const/version';
-import { GlobalStore } from '@/store/global';
 import { DatabaseLoadingState } from '@/types/clientDB';
 
 import { GlobalState, INITIAL_STATUS } from '../initialState';
 
 export const systemStatus = (s: GlobalState) => s.status;
 
-const sessionGroupKeys = (s: GlobalStore): string[] =>
+const sessionGroupKeys = (s: GlobalState): string[] =>
   s.status.expandSessionGroupKeys || INITIAL_STATUS.expandSessionGroupKeys;
 
-const showSystemRole = (s: GlobalStore) => s.status.showSystemRole;
-const mobileShowTopic = (s: GlobalStore) => s.status.mobileShowTopic;
-const mobileShowPortal = (s: GlobalStore) => s.status.mobileShowPortal;
-const showChatSideBar = (s: GlobalStore) => !s.status.zenMode && s.status.showChatSideBar;
-const showSessionPanel = (s: GlobalStore) => !s.status.zenMode && s.status.showSessionPanel;
-const showFilePanel = (s: GlobalStore) => s.status.showFilePanel;
-const hidePWAInstaller = (s: GlobalStore) => s.status.hidePWAInstaller;
-const isShowCredit = (s: GlobalStore) => s.status.isShowCredit;
+const showSystemRole = (s: GlobalState) => s.status.showSystemRole;
+const mobileShowTopic = (s: GlobalState) => s.status.mobileShowTopic;
+const mobileShowPortal = (s: GlobalState) => s.status.mobileShowPortal;
+const showChatSideBar = (s: GlobalState) => !s.status.zenMode && s.status.showChatSideBar;
+const showSessionPanel = (s: GlobalState) => !s.status.zenMode && s.status.showSessionPanel;
+const showFilePanel = (s: GlobalState) => s.status.showFilePanel;
+const hidePWAInstaller = (s: GlobalState) => s.status.hidePWAInstaller;
+const isShowCredit = (s: GlobalState) => s.status.isShowCredit;
+const themeMode = (s: GlobalState) => s.status.themeMode || 'auto';
 
-const showChatHeader = (s: GlobalStore) => !s.status.zenMode;
-const inZenMode = (s: GlobalStore) => s.status.zenMode;
-const sessionWidth = (s: GlobalStore) => s.status.sessionsWidth;
-const portalWidth = (s: GlobalStore) => s.status.portalWidth || 400;
-const filePanelWidth = (s: GlobalStore) => s.status.filePanelWidth;
-const inputHeight = (s: GlobalStore) => s.status.inputHeight;
-const threadInputHeight = (s: GlobalStore) => s.status.threadInputHeight;
+const showChatHeader = (s: GlobalState) => !s.status.zenMode;
+const inZenMode = (s: GlobalState) => s.status.zenMode;
+const sessionWidth = (s: GlobalState) => s.status.sessionsWidth;
+const portalWidth = (s: GlobalState) => s.status.portalWidth || 400;
+const filePanelWidth = (s: GlobalState) => s.status.filePanelWidth;
+const inputHeight = (s: GlobalState) => s.status.inputHeight;
+const threadInputHeight = (s: GlobalState) => s.status.threadInputHeight;
 
-const isPgliteNotEnabled = (s: GlobalStore) =>
+const isPgliteNotEnabled = (s: GlobalState) =>
   isUsePgliteDB && !isServerMode && s.isStatusInit && !s.status.isEnablePglite;
 
 /**
  * 当且仅当 client db 模式，且 pglite 未初始化完成时返回 true
  */
-const isPgliteNotInited = (s: GlobalStore) =>
+const isPgliteNotInited = (s: GlobalState) =>
   isUsePgliteDB &&
   s.isStatusInit &&
   s.status.isEnablePglite &&
@@ -41,14 +41,14 @@ const isPgliteNotInited = (s: GlobalStore) =>
 /**
  * 当且仅当 client db 模式，且 pglite 初始化完成时返回 true
  */
-const isPgliteInited = (s: GlobalStore): boolean =>
+const isPgliteInited = (s: GlobalState): boolean =>
   (s.isStatusInit &&
     s.status.isEnablePglite &&
     s.initClientDBStage === DatabaseLoadingState.Ready) ||
   false;
 
 // 这个变量控制 clientdb 是否完成初始化，正常来说，只有 pgliteDB 模式下，才会存在变化，其他时候都是 true
-const isDBInited = (s: GlobalStore): boolean => (isUsePgliteDB ? isPgliteInited(s) : true);
+const isDBInited = (s: GlobalState): boolean => (isUsePgliteDB ? isPgliteInited(s) : true);
 
 export const systemStatusSelectors = {
   filePanelWidth,
@@ -71,5 +71,6 @@ export const systemStatusSelectors = {
   showSessionPanel,
   showSystemRole,
   systemStatus,
+  themeMode,
   threadInputHeight,
 };

package/src/store/user/slices/settings/action.test.ts

@@ -70,7 +70,7 @@ describe('SettingsAction', () => {
   describe('setSettings', () => {
     it('should set partial settings', async () => {
       const { result } = renderHook(() => useUserStore());
-      const partialSettings: DeepPartial<UserSettings> = { general: { themeMode: 'dark' } };
+      const partialSettings: DeepPartial<UserSettings> = { general: { fontSize: 12 } };
 
       // Perform the action
       await act(async () => {
@@ -85,24 +85,6 @@ describe('SettingsAction', () => {
     });
   });
 
-  describe('switchThemeMode', () => {
-    it('should switch theme mode', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const themeMode = 'light';
-
-      // Perform the action
-      await act(async () => {
-        await result.current.switchThemeMode(themeMode);
-      });
-
-      // Assert that updateUserSettings was called with the correct theme mode
-      expect(userService.updateUserSettings).toHaveBeenCalledWith(
-        { general: { themeMode } },
-        expect.any(AbortSignal),
-      );
-    });
-  });
-
   describe('updateDefaultAgent', () => {
     it('should update default agent settings', async () => {
       const { result } = renderHook(() => useUserStore());

package/src/store/user/slices/settings/action.ts

@@ -1,4 +1,3 @@
-import { ThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { DeepPartial } from 'utility-types';
 import type { StateCreator } from 'zustand/vanilla';
@@ -24,7 +23,6 @@ export interface UserSettingsAction {
   internal_createSignal: () => AbortController;
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<UserSettings>) => Promise<void>;
-  switchThemeMode: (themeMode: ThemeMode) => Promise<void>;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
   updateGeneralConfig: (settings: Partial<UserGeneralConfig>) => Promise<void>;
   updateKeyVaults: (settings: Partial<UserKeyVaults>) => Promise<void>;
@@ -92,9 +90,6 @@ export const createSettingsSlice: StateCreator<
     await userService.updateUserSettings(diffs, abortController.signal);
     await get().refreshUserState();
   },
-  switchThemeMode: async (themeMode) => {
-    await get().updateGeneralConfig({ themeMode });
-  },
   updateDefaultAgent: async (defaultAgent) => {
     await get().setSettings({ defaultAgent });
   },

package/src/store/user/slices/settings/selectors/general.test.ts

@@ -5,27 +5,17 @@ import { merge } from '@/utils/merge';
 import { userGeneralSettingsSelectors } from './general';
 
 describe('settingsSelectors', () => {
-  describe('currentThemeMode', () => {
-    it('should return the correct theme', () => {
+  describe('fontSize', () => {
+    it('should return the fontSize', () => {
       const s: UserState = merge(initialState, {
         settings: {
-          general: { themeMode: 'light' },
+          general: { fontSize: 12 },
         },
       });
 
-      const result = userGeneralSettingsSelectors.currentThemeMode(s as UserStore);
+      const result = userGeneralSettingsSelectors.fontSize(s as UserStore);
 
-      expect(result).toBe('light');
-    });
-    it('should return the auto if not set the themeMode', () => {
-      const s: UserState = merge(initialState, {
-        settings: {
-          general: { themeMode: undefined },
-        },
-      });
-      const result = userGeneralSettingsSelectors.currentThemeMode(s as UserStore);
-
-      expect(result).toBe('auto');
+      expect(result).toBe(12);
     });
   });
 });

package/src/store/user/slices/settings/selectors/general.ts

@@ -3,18 +3,12 @@ import { currentSettings } from './settings';
 
 const generalConfig = (s: UserStore) => currentSettings(s).general || {};
 
-const currentThemeMode = (s: UserStore) => {
-  const themeMode = generalConfig(s).themeMode;
-  return themeMode || 'auto';
-};
-
 const neutralColor = (s: UserStore) => generalConfig(s).neutralColor;
 const primaryColor = (s: UserStore) => generalConfig(s).primaryColor;
 const fontSize = (s: UserStore) => generalConfig(s).fontSize;
 
 export const userGeneralSettingsSelectors = {
   config: generalConfig,
-  currentThemeMode,
   fontSize,
   neutralColor,
   primaryColor,

package/src/types/user/settings/general.ts

@@ -1,9 +1,7 @@
 import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
-import type { ThemeMode } from 'antd-style';
 
 export interface UserGeneralConfig {
   fontSize: number;
   neutralColor?: NeutralColors;
   primaryColor?: PrimaryColors;
-  themeMode: ThemeMode;
 }