@lobehub/lobehub 2.0.0-next.213 → 2.0.0-next.214

package/src/layout/GlobalProvider/index.tsx

@@ -17,12 +17,12 @@ import AppTheme from './AppTheme';
 import { GroupWizardProvider } from './GroupWizardProvider';
 import ImportSettings from './ImportSettings';
 import Locale from './Locale';
+import NextThemeProvider from './NextThemeProvider';
 import QueryProvider from './Query';
 import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
 interface GlobalLayoutProps {
-  appearance: string;
   children: ReactNode;
   isMobile: boolean;
   locale: string;
@@ -36,7 +36,7 @@ const GlobalLayout = async ({
   neutralColor,
   primaryColor,
   locale: userLocale,
-  appearance,
+
   isMobile,
   variants,
 }: GlobalLayoutProps) => {
@@ -45,44 +45,46 @@ const GlobalLayout = async ({
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = await getServerGlobalConfig();
+
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={userLocale}>
-        <AppTheme
-          customFontFamily={appEnv.CUSTOM_FONT_FAMILY}
-          customFontURL={appEnv.CUSTOM_FONT_URL}
-          defaultAppearance={appearance}
-          defaultNeutralColor={neutralColor as any}
-          defaultPrimaryColor={primaryColor as any}
-          globalCDN={appEnv.CDN_USE_GLOBAL}
-        >
-          <ServerConfigStoreProvider
-            featureFlags={serverFeatureFlags}
-            isMobile={isMobile}
-            segmentVariants={variants}
-            serverConfig={serverConfig}
+        <NextThemeProvider>
+          <AppTheme
+            customFontFamily={appEnv.CUSTOM_FONT_FAMILY}
+            customFontURL={appEnv.CUSTOM_FONT_URL}
+            defaultNeutralColor={neutralColor as any}
+            defaultPrimaryColor={primaryColor as any}
+            globalCDN={appEnv.CDN_USE_GLOBAL}
           >
-            <QueryProvider>
-              <GroupWizardProvider>
-                <DragUploadProvider>
-                  <LazyMotion features={domMax}>
-                    <TooltipGroup layoutAnimation={false}>
-                      <LobeAnalyticsProviderWrapper>{children}</LobeAnalyticsProviderWrapper>
-                    </TooltipGroup>
-                    <ModalHost />
-                    <ContextMenuHost />
-                  </LazyMotion>
-                </DragUploadProvider>
-              </GroupWizardProvider>
-            </QueryProvider>
-            <StoreInitialization />
-            <Suspense>
-              {ENABLE_BUSINESS_FEATURES ? <ReferralProvider /> : null}
-              <ImportSettings />
-              {process.env.NODE_ENV === 'development' && <DevPanel />}
-            </Suspense>
-          </ServerConfigStoreProvider>
-        </AppTheme>
+            <ServerConfigStoreProvider
+              featureFlags={serverFeatureFlags}
+              isMobile={isMobile}
+              segmentVariants={variants}
+              serverConfig={serverConfig}
+            >
+              <QueryProvider>
+                <GroupWizardProvider>
+                  <DragUploadProvider>
+                    <LazyMotion features={domMax}>
+                      <TooltipGroup layoutAnimation={false}>
+                        <LobeAnalyticsProviderWrapper>{children}</LobeAnalyticsProviderWrapper>
+                      </TooltipGroup>
+                      <ModalHost />
+                      <ContextMenuHost />
+                    </LazyMotion>
+                  </DragUploadProvider>
+                </GroupWizardProvider>
+              </QueryProvider>
+              <StoreInitialization />
+              <Suspense>
+                {ENABLE_BUSINESS_FEATURES ? <ReferralProvider /> : null}
+                <ImportSettings />
+                {process.env.NODE_ENV === 'development' && <DevPanel />}
+              </Suspense>
+            </ServerConfigStoreProvider>
+          </AppTheme>
+        </NextThemeProvider>
       </Locale>
     </StyleRegistry>
   );

package/src/libs/next/proxy/define-config.ts

@@ -1,5 +1,4 @@
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
-import { parseDefaultThemeFromCountry } from '@lobechat/utils/server';
 import debug from 'debug';
 import { type NextRequest, NextResponse } from 'next/server';
 import { UAParser } from 'ua-parser-js';
@@ -8,7 +7,6 @@ import urlJoin from 'url-join';
 import { auth } from '@/auth';
 import { OAUTH_AUTHORIZED } from '@/const/auth';
 import { LOBE_LOCALE_COOKIE } from '@/const/locale';
-import { LOBE_THEME_APPEARANCE } from '@/const/theme';
 import { isDesktop } from '@/const/version';
 import { appEnv } from '@/envs/app';
 import { authEnv } from '@/envs/auth';
@@ -39,10 +37,6 @@ export function defineConfig() {
       return NextResponse.next();
     }
 
-    // 1. Read user preferences from cookies
-    const theme = (request.cookies.get(LOBE_THEME_APPEARANCE)?.value ||
-      parseDefaultThemeFromCountry(request)) as 'dark' | 'light';
-
     // locale has three levels
     // 1. search params
     // 2. cookie
@@ -67,17 +61,14 @@ export function defineConfig() {
       deviceType: device.type,
       hasCookies: {
         locale: !!request.cookies.get(LOBE_LOCALE_COOKIE)?.value,
-        theme: !!request.cookies.get(LOBE_THEME_APPEARANCE)?.value,
       },
       locale,
-      theme,
     });
 
     // 2. Create normalized preference values
     const route = RouteVariants.serializeVariants({
       isMobile: device.type === 'mobile',
       locale,
-      theme,
     });
 
     logDefault('Serialized route variant: %s', route);
@@ -99,8 +90,8 @@ export function defineConfig() {
 
     // refs: https://github.com/lobehub/lobe-chat/pull/5866
     // new handle segment rewrite: /${route}${originalPathname}
-    // / -> /zh-CN__0__dark
-    // /discover -> /zh-CN__0__dark/discover
+    // / -> /zh-CN__0
+    // /discover -> /zh-CN__0/discover
     // All SPA routes that use react-router-dom should be rewritten to just /${route}
     const spaRoutes = [
       '/chat',

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

@@ -408,19 +408,4 @@ describe('createPreferenceSlice', () => {
       expect(result.current.status.noWideScreen).toEqual(false);
     });
   });
-
-  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

@@ -1,5 +1,4 @@
 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';
 
@@ -117,42 +116,6 @@ describe('generalActionSlice', () => {
     });
   });
 
-  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('useInitSystemStatus', () => {
     it('should reset transient UI states when loading from localStorage', async () => {
       const mockStatus = {

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

@@ -1,16 +1,13 @@
-import { type ThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { gt, parse, valid } from 'semver';
 import { type SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { LOBE_THEME_APPEARANCE } from '@/const/theme';
 import { CURRENT_VERSION, isDesktop } from '@/const/version';
 import { useOnlyFetchOnceSWR } from '@/libs/swr';
 import { globalService } from '@/services/global';
 import type { SystemStatus } from '@/store/global/initialState';
 import { type 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';
@@ -23,7 +20,6 @@ export interface GlobalGeneralAction {
   openAgentInNewWindow: (agentId: string) => Promise<void>;
   openTopicInNewWindow: (agentId: string, topicId: string) => Promise<void>;
   switchLocale: (locale: LocaleMode, params?: { skipBroadcast?: boolean }) => void;
-  switchThemeMode: (themeMode: ThemeMode, params?: { skipBroadcast?: boolean }) => void;
   updateSystemStatus: (status: Partial<SystemStatus>, action?: any) => void;
   useCheckLatestVersion: (enabledCheck?: boolean) => SWRResponse<string>;
   useInitSystemStatus: () => SWRResponse;
@@ -114,23 +110,6 @@ export const generalActionSlice: StateCreator<
       })();
     }
   },
-  switchThemeMode: (themeMode, { skipBroadcast } = {}) => {
-    get().updateSystemStatus({ themeMode });
-
-    setCookie(LOBE_THEME_APPEARANCE, themeMode === 'auto' ? undefined : themeMode);
-
-    if (isDesktop && !skipBroadcast) {
-      (async () => {
-        try {
-          const { ensureElectronIpc } = await import('@/utils/electron/ipc');
-
-          await ensureElectronIpc().system.updateThemeModeHandler(themeMode);
-        } catch (error) {
-          console.error('Failed to update theme in main process:', error);
-        }
-      })();
-    }
-  },
   updateSystemStatus: (status, action) => {
     if (!get().isStatusInit) return;
 

package/src/store/global/initialState.ts

@@ -1,4 +1,3 @@
-import type { ThemeMode } from 'antd-style';
 import type { NavigateFunction } from 'react-router-dom';
 
 import { DatabaseLoadingState, type MigrationSQL, type MigrationTableItem } from '@/types/clientDB';
@@ -129,10 +128,6 @@ export interface SystemStatus {
   showRightPanel?: boolean;
   showSystemRole?: boolean;
   systemRoleExpandedMap: Record<string, boolean>;
-  /**
-   * theme mode
-   */
-  themeMode?: ThemeMode;
   /**
    * 是否使用短格式显示 token
    */
@@ -196,7 +191,6 @@ export const INITIAL_STATUS = {
   showRightPanel: true,
   showSystemRole: false,
   systemRoleExpandedMap: {},
-  themeMode: 'auto',
   tokenDisplayFormatShort: true,
   topicPageSize: 20,
   zenMode: false,

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

@@ -87,24 +87,4 @@ describe('systemStatusSelectors', () => {
       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');
-    });
-  });
 });

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

@@ -23,7 +23,6 @@ const showImagePanel = (s: GlobalState) => s.status.showImagePanel;
 const showImageTopicPanel = (s: GlobalState) => s.status.showImageTopicPanel;
 const hidePWAInstaller = (s: GlobalState) => s.status.hidePWAInstaller;
 const isShowCredit = (s: GlobalState) => s.status.isShowCredit;
-const themeMode = (s: GlobalState) => s.status.themeMode || 'auto';
 const language = (s: GlobalState) => s.status.language || 'auto';
 
 const showChatHeader = (s: GlobalState) => !s.status.zenMode;
@@ -80,7 +79,6 @@ export const systemStatusSelectors = {
   showRightPanel,
   showSystemRole,
   systemStatus,
-  themeMode,
   tokenDisplayFormatShort,
   topicGroupKeys,
   topicPageSize,

package/src/styles/global.ts

@@ -16,8 +16,6 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     min-height: 100dvh;
     max-height: 100dvh;
 
-    background: ${token.colorBgLayout};
-
     @media (min-device-width: 576px) {
       overflow: hidden;
     }

package/src/utils/server/routeVariants.test.ts

@@ -11,7 +11,6 @@ describe('RouteVariants', () => {
       expect(DEFAULT_VARIANTS).toEqual({
         isMobile: false,
         locale: DEFAULT_LANG,
-        theme: 'light',
       });
     });
   });
@@ -21,30 +20,27 @@ describe('RouteVariants', () => {
       const variants: IRouteVariants = {
         isMobile: false,
         locale: 'en-US',
-        theme: 'light',
       };
       const result = RouteVariants.serializeVariants(variants);
-      expect(result).toBe('en-US__0__light');
+      expect(result).toBe('en-US__0');
     });
 
     it('should serialize variants with mobile enabled', () => {
       const variants: IRouteVariants = {
         isMobile: true,
         locale: 'zh-CN',
-        theme: 'dark',
       };
       const result = RouteVariants.serializeVariants(variants);
-      expect(result).toBe('zh-CN__1__dark');
+      expect(result).toBe('zh-CN__1');
     });
 
     it('should serialize variants with different locales', () => {
       const variants: IRouteVariants = {
         isMobile: false,
         locale: 'ja-JP',
-        theme: 'light',
       };
       const result = RouteVariants.serializeVariants(variants);
-      expect(result).toBe('ja-JP__0__light');
+      expect(result).toBe('ja-JP__0');
     });
 
     it('should serialize variants with custom colors', () => {
@@ -53,31 +49,28 @@ describe('RouteVariants', () => {
         locale: 'en-US',
         neutralColor: '#cccccc',
         primaryColor: '#ff0000',
-        theme: 'dark',
       };
       const result = RouteVariants.serializeVariants(variants);
-      expect(result).toBe('en-US__1__dark');
+      expect(result).toBe('en-US__1');
     });
   });
 
   describe('deserializeVariants', () => {
     it('should deserialize valid serialized string', () => {
-      const serialized = 'en-US__0__light';
+      const serialized = 'en-US__0';
       const result = RouteVariants.deserializeVariants(serialized);
       expect(result).toEqual({
         isMobile: false,
         locale: 'en-US',
-        theme: 'light',
       });
     });
 
     it('should deserialize mobile variants', () => {
-      const serialized = 'zh-CN__1__dark';
+      const serialized = 'zh-CN__1';
       const result = RouteVariants.deserializeVariants(serialized);
       expect(result).toEqual({
         isMobile: true,
         locale: 'zh-CN',
-        theme: 'dark',
       });
     });
 
@@ -94,22 +87,11 @@ describe('RouteVariants', () => {
     });
 
     it('should handle invalid locale by falling back to default', () => {
-      const serialized = 'invalid-locale__0__light';
+      const serialized = 'invalid-locale__0';
       const result = RouteVariants.deserializeVariants(serialized);
       expect(result).toEqual({
         isMobile: false,
         locale: DEFAULT_LANG,
-        theme: 'light',
-      });
-    });
-
-    it('should handle invalid theme by falling back to default', () => {
-      const serialized = 'en-US__0__invalid-theme';
-      const result = RouteVariants.deserializeVariants(serialized);
-      expect(result).toEqual({
-        isMobile: false,
-        locale: 'en-US',
-        theme: 'light',
       });
     });
 
@@ -120,19 +102,19 @@ describe('RouteVariants', () => {
     });
 
     it('should handle isMobile value correctly for "0"', () => {
-      const serialized = 'en-US__0__dark';
+      const serialized = 'en-US__0';
       const result = RouteVariants.deserializeVariants(serialized);
       expect(result.isMobile).toBe(false);
     });
 
     it('should handle isMobile value correctly for "1"', () => {
-      const serialized = 'en-US__1__dark';
+      const serialized = 'en-US__1';
       const result = RouteVariants.deserializeVariants(serialized);
       expect(result.isMobile).toBe(true);
     });
 
     it('should handle isMobile value correctly for other values', () => {
-      const serialized = 'en-US__2__dark';
+      const serialized = 'en-US__2';
       const result = RouteVariants.deserializeVariants(serialized);
       expect(result.isMobile).toBe(false);
     });
@@ -141,25 +123,23 @@ describe('RouteVariants', () => {
   describe('getVariantsFromProps', () => {
     it('should extract and deserialize variants from props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'en-US__0__light' }),
+        params: Promise.resolve({ variants: 'en-US__0' }),
       };
       const result = await RouteVariants.getVariantsFromProps(props);
       expect(result).toEqual({
         isMobile: false,
         locale: 'en-US',
-        theme: 'light',
       });
     });
 
     it('should handle mobile variants from props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'zh-CN__1__dark' }),
+        params: Promise.resolve({ variants: 'zh-CN__1' }),
       };
       const result = await RouteVariants.getVariantsFromProps(props);
       expect(result).toEqual({
         isMobile: true,
         locale: 'zh-CN',
-        theme: 'dark',
       });
     });
 
@@ -175,7 +155,7 @@ describe('RouteVariants', () => {
   describe('getIsMobile', () => {
     it('should extract isMobile as false from props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'en-US__0__light' }),
+        params: Promise.resolve({ variants: 'en-US__0' }),
       };
       const result = await RouteVariants.getIsMobile(props);
       expect(result).toBe(false);
@@ -183,7 +163,7 @@ describe('RouteVariants', () => {
 
     it('should extract isMobile as true from props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'en-US__1__dark' }),
+        params: Promise.resolve({ variants: 'en-US__1' }),
       };
       const result = await RouteVariants.getIsMobile(props);
       expect(result).toBe(true);
@@ -201,7 +181,7 @@ describe('RouteVariants', () => {
   describe('getLocale', () => {
     it('should extract locale from props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'zh-CN__0__light' }),
+        params: Promise.resolve({ variants: 'zh-CN__0' }),
       };
       const result = await RouteVariants.getLocale(props);
       expect(result).toBe('zh-CN');
@@ -209,7 +189,7 @@ describe('RouteVariants', () => {
 
     it('should extract different locale from props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'ja-JP__1__dark' }),
+        params: Promise.resolve({ variants: 'ja-JP__1' }),
       };
       const result = await RouteVariants.getLocale(props);
       expect(result).toBe('ja-JP');
@@ -225,7 +205,7 @@ describe('RouteVariants', () => {
 
     it('should return default locale for invalid locale in props', async () => {
       const props: DynamicLayoutProps = {
-        params: Promise.resolve({ variants: 'invalid-locale__0__light' }),
+        params: Promise.resolve({ variants: 'invalid-locale__0' }),
       };
       const result = await RouteVariants.getLocale(props);
       expect(result).toBe(DEFAULT_LANG);
@@ -254,24 +234,14 @@ describe('RouteVariants', () => {
       });
     });
 
-    it('should create variants with custom theme', () => {
-      const result = RouteVariants.createVariants({ theme: 'dark' });
-      expect(result).toEqual({
-        ...DEFAULT_VARIANTS,
-        theme: 'dark',
-      });
-    });
-
     it('should create variants with multiple custom options', () => {
       const result = RouteVariants.createVariants({
         isMobile: true,
         locale: 'ja-JP',
-        theme: 'dark',
       });
       expect(result).toEqual({
         isMobile: true,
         locale: 'ja-JP',
-        theme: 'dark',
       });
     });
 
@@ -293,14 +263,12 @@ describe('RouteVariants', () => {
         locale: 'zh-CN',
         neutralColor: '#aaaaaa',
         primaryColor: '#00ff00',
-        theme: 'dark',
       });
       expect(result).toEqual({
         isMobile: true,
         locale: 'zh-CN',
         neutralColor: '#aaaaaa',
         primaryColor: '#00ff00',
-        theme: 'dark',
       });
     });
   });
@@ -310,7 +278,6 @@ describe('RouteVariants', () => {
       const original: IRouteVariants = {
         isMobile: true,
         locale: 'zh-CN',
-        theme: 'dark',
       };
       const serialized = RouteVariants.serializeVariants(original);
       const deserialized = RouteVariants.deserializeVariants(serialized);
@@ -329,7 +296,6 @@ describe('RouteVariants', () => {
         const original: IRouteVariants = {
           isMobile: false,
           locale: locale as any,
-          theme: 'light',
         };
         const serialized = RouteVariants.serializeVariants(original);
         const deserialized = RouteVariants.deserializeVariants(serialized);

package/src/utils/server/routeVariants.ts

@@ -3,7 +3,6 @@ import { RouteVariants } from '@lobechat/desktop-bridge';
 import { type DynamicLayoutProps } from '@/types/next';
 
 export { LOBE_LOCALE_COOKIE } from '@/const/locale';
-export { LOBE_THEME_APPEARANCE } from '@/const/theme';
 export {
   DEFAULT_LANG,
   DEFAULT_VARIANTS,