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

package/src/features/AlertBanner/CloudBanner.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { LOBE_CHAT_CLOUD, UTM_SOURCE } from '@lobechat/business-const';
-import { Button, Center, Flexbox, Icon , lobeStaticStylish } from '@lobehub/ui';
+import { Button, Center, Flexbox, Icon, lobeStaticStylish } from '@lobehub/ui';
 import { useSize } from 'ahooks';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { ArrowRightIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useEffect, useRef, useState } from 'react';
@@ -11,6 +11,7 @@ import Marquee from 'react-fast-marquee';
 import { useTranslation } from 'react-i18next';
 
 import { OFFICIAL_URL } from '@/const/url';
+import { useIsDark } from '@/hooks/useIsDark';
 import { isOnServerSide } from '@/utils/env';
 
 export const BANNER_HEIGHT = 40;
@@ -50,7 +51,7 @@ const CloudBanner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const contentRef = useRef(null);
   const size = useSize(ref);
   const contentSize = useSize(contentRef);
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const { t } = useTranslation('common');
   const [isTruncated, setIsTruncated] = useState(mobile);
 

package/src/features/CommandMenu/ThemeMenu.tsx

@@ -24,7 +24,7 @@ const ThemeMenu = memo(() => {
           <div className={styles.itemLabel}>{t('cmdk.themeDark')}</div>
         </div>
       </Command.Item>
-      <Command.Item onSelect={() => handleThemeChange('auto')} value="theme-auto">
+      <Command.Item onSelect={() => handleThemeChange('system')} value="theme-system">
         <Monitor className={styles.icon} />
         <div className={styles.itemContent}>
           <div className={styles.itemLabel}>{t('cmdk.themeAuto')}</div>

package/src/features/CommandMenu/types.ts

@@ -4,7 +4,7 @@ export interface ChatMessage {
   role: 'user' | 'assistant';
 }
 
-export type ThemeMode = 'light' | 'dark' | 'auto';
+export type ThemeMode = 'light' | 'dark' | 'system';
 
 export type PageType = 'theme' | 'ask-ai' | string;
 
@@ -25,4 +25,7 @@ export type MenuContext =
   | 'page'
   | 'painting';
 
-export type ContextType = Extract<MenuContext, 'agent' | 'group' | 'resource' | 'settings' | 'page' | 'painting'>;
+export type ContextType = Extract<
+  MenuContext,
+  'agent' | 'group' | 'resource' | 'settings' | 'page' | 'painting'
+>;

package/src/features/CommandMenu/useCommandMenu.ts

@@ -1,4 +1,5 @@
 import { useDebounce } from 'ahooks';
+import { useTheme as useNextThemesTheme } from 'next-themes';
 import { useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
@@ -37,7 +38,7 @@ export const useCommandMenu = () => {
   } = useCommandMenuContext();
 
   const navigate = useNavigate();
-  const switchThemeMode = useGlobalStore((s) => s.switchThemeMode);
+  const { setTheme } = useNextThemesTheme();
   const createAgent = useAgentStore((s) => s.createAgent);
   const refreshAgentList = useHomeStore((s) => s.refreshAgentList);
   const inboxAgentId = useAgentStore(builtinAgentSelectors.inboxAgentId);
@@ -106,7 +107,7 @@ export const useCommandMenu = () => {
   };
 
   const handleThemeChange = (theme: ThemeMode) => {
-    switchThemeMode(theme);
+    setTheme(theme);
     closeCommandMenu();
   };
 

package/src/features/Conversation/Markdown/plugins/LobeArtifact/Render/index.tsx

@@ -1,9 +1,10 @@
 import { Center, Flexbox, Icon } from '@lobehub/ui';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { dotLoading } from '@/styles/loading';
@@ -57,7 +58,7 @@ interface ArtifactProps extends MarkdownElementProps {
 
 const Render = memo<ArtifactProps>(({ identifier, title, type, language, children, id }) => {
   const { t } = useTranslation('chat');
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const hasChildren = !!children;
   const str = ((children as string) || '').toString?.();

package/src/features/Conversation/Messages/components/FileChunks/ChunkItem.tsx

@@ -1,9 +1,10 @@
 import { type ChatFileChunk } from '@lobechat/types';
 import { Center, Flexbox, Text, Tooltip } from '@lobehub/ui';
-import { cx, useThemeMode } from 'antd-style';
+import { cx } from 'antd-style';
 import { memo } from 'react';
 
 import FileIcon from '@/components/FileIcon';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useChatStore } from '@/store/chat';
 
 import { styles } from './style';
@@ -13,7 +14,7 @@ export interface ChunkItemProps extends ChatFileChunk {
 }
 
 const ChunkItem = memo<ChunkItemProps>(({ id, fileId, similarity, text, filename, fileType }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   // Note: openFilePreview is a portal action, kept in ChatStore as it's a global UI state
   const openFilePreview = useChatStore((s) => s.openFilePreview);
 

package/src/features/Conversation/Messages/components/FileChunks/index.tsx

@@ -1,10 +1,12 @@
 import { type ChatFileChunk } from '@lobechat/types';
 import { Flexbox, Icon } from '@lobehub/ui';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { BookOpenTextIcon, ChevronDown, ChevronRight } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 import ChunkItem from './ChunkItem';
 
 const styles = createStaticStyles(({ css }) => ({
@@ -47,7 +49,7 @@ interface FileChunksProps {
 
 const FileChunks = memo<FileChunksProps>(({ data }) => {
   const { t } = useTranslation('chat');
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const [showDetail, setShowDetail] = useState(false);
 

package/src/features/Conversation/Messages/components/SearchGrounding.tsx

@@ -1,11 +1,12 @@
 import { Flexbox, Icon, SearchResultCards, Tag } from '@lobehub/ui';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { ChevronDown, ChevronRight, Globe } from 'lucide-react';
 import { AnimatePresence, m as motion } from 'motion/react';
 import Image from 'next/image';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
 import { type GroundingSearch } from '@/types/search';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -46,7 +47,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
 const SearchGrounding = memo<GroundingSearch>(({ searchQueries, citations }) => {
   const { t } = useTranslation('chat');
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const [showDetail, setShowDetail] = useState(false);
 

package/src/features/ElectronTitlebar/hooks/useWatchThemeUpdate.ts

@@ -1,33 +1,15 @@
 import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
-import { LOBE_THEME_APP_ID } from '@lobehub/ui';
-import { useLayoutEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { useEffect } from 'react';
 
+import { isDesktop } from '@/const/version';
 import { useElectronStore } from '@/store/electron';
 import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
 import { ensureElectronIpc } from '@/utils/electron/ipc';
 
-const sidebarColors = {
-  dark: '#000',
-  light: '#f8f8f8',
-};
 export const useWatchThemeUpdate = () => {
-  const [isAppStateInit, systemAppearance, updateElectronAppState, isMac] = useElectronStore(
-    (s) => [
-      s.isAppStateInit,
-      s.appState.systemAppearance,
-      s.updateElectronAppState,
-      s.appState.isMac,
-    ],
-  );
-  const [switchThemeMode, switchLocale] = useGlobalStore((s) => [
-    s.switchThemeMode,
-    s.switchLocale,
-  ]);
-
-  useWatchBroadcast('themeChanged', ({ themeMode }) => {
-    switchThemeMode(themeMode, { skipBroadcast: true });
-  });
+  const [updateElectronAppState] = useElectronStore((s) => [s.updateElectronAppState]);
+  const [switchLocale] = useGlobalStore((s) => [s.switchLocale]);
 
   useWatchBroadcast('localeChanged', ({ locale }) => {
     switchLocale(locale as any, { skipBroadcast: true });
@@ -36,20 +18,21 @@ export const useWatchThemeUpdate = () => {
   useWatchBroadcast('systemThemeChanged', ({ themeMode }) => {
     updateElectronAppState({ systemAppearance: themeMode });
   });
-  const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
-  useLayoutEffect(() => {
-    ensureElectronIpc().system.setSystemThemeMode(themeMode);
-  }, []);
-
-  useLayoutEffect(() => {
-    if (!isAppStateInit || !isMac) return;
-    document.documentElement.style.background = 'none';
-
-    const lobeApp = document.querySelector('#' + LOBE_THEME_APP_ID);
-    if (!lobeApp) return;
 
-    if (systemAppearance) {
-      document.body.style.background = `color-mix(in srgb, ${sidebarColors[systemAppearance as 'dark' | 'light']} 86%, transparent)`;
-    }
-  }, [systemAppearance, isAppStateInit, isMac]);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (!isDesktop) return;
+    if (!theme) return;
+
+    (async () => {
+      try {
+        await ensureElectronIpc().system.updateThemeModeHandler(
+          theme as 'dark' | 'light' | 'system',
+        );
+      } catch {
+        // Ignore errors in non-electron environment
+      }
+    })();
+  }, [theme]);
 };

package/src/features/GroupChatSettings/AgentCard.tsx

@@ -2,12 +2,13 @@
 
 import { Avatar, Flexbox, Icon, Skeleton, Text, Tooltip } from '@lobehub/ui';
 import { Switch } from 'antd';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Bot, Loader2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_AVATAR } from '@/const/meta';
+import { useIsDark } from '@/hooks/useIsDark';
 import { type LobeAgentSession } from '@/types/session';
 
 const styles = createStaticStyles(({ css }) => ({
@@ -59,7 +60,7 @@ interface AgentCardProps {
 const AgentCard = memo<AgentCardProps>(
   ({ agent, inGroup, isHost, loading, onAction, operationLoading }) => {
     const { t } = useTranslation('setting');
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     if (loading) {
       return (

package/src/features/GroupChatSettings/HostMemberCard.tsx

@@ -2,12 +2,13 @@
 
 import { Avatar, Flexbox, Icon, Text, Tooltip } from '@lobehub/ui';
 import { Switch } from 'antd';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Bot, Loader2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_SUPERVISOR_AVATAR } from '@/const/meta';
+import { useIsDark } from '@/hooks/useIsDark';
 
 const styles = createStaticStyles(({ css }) => ({
   container: css`
@@ -53,7 +54,7 @@ interface HostMemberCardProps {
 }
 
 const HostMemberCard = memo<HostMemberCardProps>(({ checked, loading, onToggle }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const { t } = useTranslation('setting');
 
   const title = t('settingGroupMembers.host.title');

package/src/features/PageEditor/DiffAllToolbar.tsx

@@ -3,11 +3,13 @@
 import { DiffAction, LITEXML_DIFFNODE_ALL_COMMAND } from '@lobehub/editor';
 import { Block, Icon } from '@lobehub/ui';
 import { Button, Space } from 'antd';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Check, X } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 import { usePageEditorStore } from './store';
 
 const styles = createStaticStyles(({ css }) => ({
@@ -36,7 +38,7 @@ const styles = createStaticStyles(({ css }) => ({
 
 const DiffAllToolbar = memo(() => {
   const { t } = useTranslation('editor');
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const [editor, performSave] = usePageEditorStore((s) => [s.editor, s.performSave]);
   const [hasPendingDiffs, setHasPendingDiffs] = useState(false);
 

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

@@ -1,65 +1,54 @@
-import { ActionIcon, Dropdown, type DropdownProps, Icon } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, type DropdownMenuProps, Icon } from '@lobehub/ui';
 import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme as useNextThemesTheme } from 'next-themes';
 import { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type MenuProps } from '@/components/Menu';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
-
 const themeIcons = {
-  auto: Monitor,
   dark: Moon,
   light: Sun,
+  system: Monitor,
 };
 
-const ThemeButton: FC<{ placement?: DropdownProps['placement']; size?: number }> = ({
+const ThemeButton: FC<{ placement?: DropdownMenuProps['placement']; size?: number }> = ({
   placement,
   size,
 }) => {
-  const [themeMode, switchThemeMode] = useGlobalStore((s) => [
-    systemStatusSelectors.themeMode(s),
-    s.switchThemeMode,
-  ]);
+  const { setTheme, theme } = useNextThemesTheme();
 
   const { t } = useTranslation('setting');
 
-  const items: MenuProps['items'] = useMemo(
+  const items = useMemo<DropdownMenuProps['items']>(
     () => [
       {
-        icon: <Icon icon={themeIcons.auto} />,
-        key: 'auto',
+        icon: <Icon icon={themeIcons.system} />,
+        key: 'system',
         label: t('settingCommon.themeMode.auto'),
-        onClick: () => switchThemeMode('auto'),
+        onClick: () => setTheme('system'),
       },
       {
         icon: <Icon icon={themeIcons.light} />,
         key: 'light',
         label: t('settingCommon.themeMode.light'),
-        onClick: () => switchThemeMode('light'),
+        onClick: () => setTheme('light'),
       },
       {
         icon: <Icon icon={themeIcons.dark} />,
         key: 'dark',
         label: t('settingCommon.themeMode.dark'),
-        onClick: () => switchThemeMode('dark'),
+        onClick: () => setTheme('dark'),
       },
     ],
-    [t],
+    [setTheme, t],
   );
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items,
-        selectable: true,
-        selectedKeys: [themeMode],
-      }}
-      placement={placement}
-    >
-      <ActionIcon icon={themeIcons[themeMode]} size={size || { blockSize: 32, size: 16 }} />
-    </Dropdown>
+    <DropdownMenu items={items} placement={placement}>
+      <ActionIcon
+        icon={themeIcons[(theme as 'dark' | 'light' | 'system') || 'system']}
+        size={size || { blockSize: 32, size: 16 }}
+      />
+    </DropdownMenu>
   );
 };
 

package/src/hooks/useIsDark.ts

@@ -0,0 +1,11 @@
+import { useTheme as useNextThemesTheme } from 'next-themes';
+
+/**
+ * Hook to check if the current theme is dark
+ * @returns boolean - true if current theme is dark, false otherwise
+ */
+export const useIsDark = (): boolean => {
+  const { resolvedTheme } = useNextThemesTheme();
+
+  return resolvedTheme === 'dark';
+};

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -3,7 +3,9 @@
 import { dark } from '@clerk/themes';
 import { type ElementsConfig, type Theme } from '@clerk/types';
 import { BRANDING_URL } from '@lobechat/business-const';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+
+import { useIsDark } from '@/hooks/useIsDark';
 
 const prefixCls = 'cl';
 
@@ -95,7 +97,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 })) as Partial<Record<keyof ElementsConfig, any>>;
 
 export const useAppearance = () => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const navbarStyle = cx(styles.navbar, isDarkMode && (styles as any).navbar_dark);
   const scrollBoxStyle = cx(styles.scrollBox, isDarkMode && (styles as any).scrollBox_dark);

package/src/layout/AuthProvider/MarketAuth/MarketAuthConfirmModal.tsx

@@ -2,12 +2,13 @@
 
 import { BRANDING_NAME } from '@lobechat/business-const';
 import { Block, Modal, Text } from '@lobehub/ui';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { PRIVACY_URL, TERMS_URL } from '@/const/url';
 import AuthCard from '@/features/AuthCard';
+import { useIsDark } from '@/hooks/useIsDark';
 
 const styles = createStaticStyles(({ css }) => ({
   container: css`
@@ -34,7 +35,7 @@ interface MarketAuthConfirmModalProps {
 const MarketAuthConfirmModal = memo<MarketAuthConfirmModalProps>(
   ({ open, onConfirm, onCancel }) => {
     const { t } = useTranslation('marketAuth');
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     const footer = (
       <Text align={'center'} as={'div'} fontSize={13} type={'secondary'}>

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;