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

package/src/layout/GlobalProvider/AppTheme.tsx

@@ -8,7 +8,7 @@ import {
   ThemeProvider,
 } from '@lobehub/ui';
 import { message as antdMessage } from 'antd';
-import { type ThemeAppearance, createStaticStyles, cx, useTheme } from 'antd-style';
+import { createStaticStyles, cx, useTheme } from 'antd-style';
 import 'antd/dist/reset.css';
 import { AppConfigContext } from 'antd/es/app/context';
 import * as motion from 'motion/react-m';
@@ -17,13 +17,10 @@ import Link from 'next/link';
 import { type ReactNode, memo, useEffect, useMemo, useState } 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 { isDesktop } from '@/const/version';
 import { TITLE_BAR_HEIGHT } from '@/features/ElectronTitlebar';
+import { useIsDark } from '@/hooks/useIsDark';
 import { getUILocaleAndResources } from '@/libs/getUILocaleAndResources';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -92,7 +89,6 @@ export interface AppThemeProps {
   children?: ReactNode;
   customFontFamily?: string;
   customFontURL?: string;
-  defaultAppearance?: ThemeAppearance;
   defaultNeutralColor?: NeutralColors;
   defaultPrimaryColor?: PrimaryColors;
   globalCDN?: boolean;
@@ -101,16 +97,16 @@ export interface AppThemeProps {
 const AppTheme = memo<AppThemeProps>(
   ({
     children,
-    defaultAppearance,
     defaultPrimaryColor,
     defaultNeutralColor,
     globalCDN,
     customFontURL,
     customFontFamily,
   }) => {
-    const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
     const language = useGlobalStore(systemStatusSelectors.language);
-    const theme = useTheme();
+    const antdTheme = useTheme();
+    const isDark = useIsDark();
+
     const [primaryColor, neutralColor, animationMode] = useUserStore((s) => [
       userGeneralSettingsSelectors.primaryColor(s),
       userGeneralSettingsSelectors.neutralColor(s),
@@ -154,29 +150,29 @@ const AppTheme = memo<AppThemeProps>(
       antdMessage.config({ top: messageTop });
     }, [messageTop]);
 
+    const currentAppearence = isDark ? 'dark' : 'light';
+
     return (
       <AppConfigContext.Provider value={appConfig}>
         <ThemeProvider
-          appearance={themeMode !== 'auto' ? themeMode : undefined}
+          appearance={currentAppearence}
           className={cx(styles.app, styles.scrollbar, styles.scrollbarPolyfill)}
           customTheme={{
             neutralColor: neutralColor ?? defaultNeutralColor,
             primaryColor: primaryColor ?? defaultPrimaryColor,
           }}
-          defaultAppearance={defaultAppearance}
-          onAppearanceChange={(appearance) => {
-            if (themeMode !== 'auto') return;
-
-            setCookie(LOBE_THEME_APPEARANCE, appearance);
-          }}
+          defaultAppearance={currentAppearence}
+          defaultThemeMode={currentAppearence}
           theme={{
+            cssVar: { key: 'lobe-vars' },
             token: {
-              fontFamily: customFontFamily ? `${customFontFamily},${theme.fontFamily}` : undefined,
+              fontFamily: customFontFamily
+                ? `${customFontFamily},${antdTheme.fontFamily}`
+                : undefined,
               motion: animationMode !== 'disabled',
               motionUnit: animationMode === 'agile' ? 0.05 : 0.1,
             },
           }}
-          themeMode={themeMode}
         >
           {!!customFontURL && <FontLoader url={customFontURL} />}
           <GlobalStyle />

package/src/layout/GlobalProvider/NextThemeProvider.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { type ReactNode } from 'react';
+
+interface NextThemeProviderProps {
+  children: ReactNode;
+}
+
+export default function NextThemeProvider({ children }: NextThemeProviderProps) {
+  return (
+    <NextThemesProvider
+      attribute="data-theme"
+      defaultTheme="system"
+      disableTransitionOnChange
+      enableSystem
+      forcedTheme={undefined}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}

package/src/layout/GlobalProvider/StyleRegistry.tsx

@@ -1,24 +1,29 @@
 'use client';
 
-import { StyleProvider, extractStaticStyle } from 'antd-style';
+import { StyleProvider } from 'antd-style';
 import { useServerInsertedHTML } from 'next/navigation';
-import { type PropsWithChildren, useRef } from 'react';
+import { type PropsWithChildren } from 'react';
 
-const StyleRegistry = ({ children }: PropsWithChildren) => {
-  const isInsert = useRef(false);
+import { isDesktop } from '@/const/version';
 
+const StyleRegistry = ({ children }: PropsWithChildren) => {
   useServerInsertedHTML(() => {
-    // avoid duplicate css insert
-    // refs: https://github.com/vercel/next.js/discussions/49354#discussioncomment-6279917
-    if (isInsert.current) return;
-
-    isInsert.current = true;
-
-    // @ts-ignore
-    return extractStaticStyle().map((item) => item.style);
+    return (
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+              html body {background: #f8f8f8;}
+              html[data-theme="dark"] body { background-color: #000; }
+              ${isDesktop ? 'html body, html { background: none; }' : ''}
+              ${isDesktop ? 'html[data-theme="dark"] body { background: color-mix(in srgb, #000 86%, transparent); }' : ''}
+              ${isDesktop ? 'html[data-theme="light"] body { background: color-mix(in srgb, #f8f8f8 86%, transparent); }' : ''}
+            `,
+        }}
+      />
+    );
   });
 
-  return <StyleProvider cache={extractStaticStyle.cache}>{children}</StyleProvider>;
+  return <StyleProvider>{children}</StyleProvider>;
 };
 
 export default StyleRegistry;

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;
     }