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

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

@@ -5,6 +5,7 @@ import { Select, Skeleton } from '@lobehub/ui';
 import { Segmented, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { Ban, Gauge, Loader2Icon, Monitor, Moon, Mouse, Sun, Waves } from 'lucide-react';
+import { useTheme as useNextThemesTheme } from 'next-themes';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -22,16 +23,15 @@ const Common = memo(() => {
   const { t } = useTranslation('setting');
 
   const general = useUserStore((s) => settingsSelectors.currentSettings(s).general, isEqual);
-  const themeMode = useGlobalStore(systemStatusSelectors.themeMode);
+  const { theme, setTheme } = useNextThemesTheme();
   const language = useGlobalStore(systemStatusSelectors.language);
   const [setSettings, isUserStateInit] = useUserStore((s) => [s.setSettings, s.isUserStateInit]);
-  const [setThemeMode, switchLocale, isStatusInit] = useGlobalStore((s) => [
-    s.switchThemeMode,
-    s.switchLocale,
-    s.isStatusInit,
-  ]);
+  const [switchLocale, isStatusInit] = useGlobalStore((s) => [s.switchLocale, s.isStatusInit]);
   const [loading, setLoading] = useState(false);
 
+  // Use the theme value from next-themes, default to 'system'
+  const currentTheme = theme || 'system';
+
   const handleLangChange = (value: LocaleMode) => {
     switchLocale(value);
   };
@@ -39,13 +39,13 @@ const Common = memo(() => {
   if (!(isStatusInit && isUserStateInit))
     return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
-  const theme: FormGroupItemType = {
+  const themeFormGroup: FormGroupItemType = {
     children: [
       {
         children: (
           <ImageSelect
             height={60}
-            onChange={setThemeMode}
+            onChange={(value) => setTheme(value === 'auto' ? 'system' : value)}
             options={[
               {
                 icon: Sun,
@@ -63,11 +63,11 @@ const Common = memo(() => {
                 icon: Monitor,
                 img: imageUrl('theme_auto.webp'),
                 label: t('settingCommon.themeMode.auto'),
-                value: 'auto',
+                value: 'system',
               },
             ]}
             unoptimized={isDesktop}
-            value={themeMode}
+            value={currentTheme}
             width={100}
           />
         ),
@@ -173,7 +173,7 @@ const Common = memo(() => {
     <Form
       collapsible={false}
       initialValues={general}
-      items={[theme]}
+      items={[themeFormGroup]}
       itemsType={'group'}
       onValuesChange={async (v) => {
         setLoading(true);

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -2,11 +2,12 @@ import { BRANDING_PROVIDER } from '@lobechat/business-const';
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
 import { Avatar, Flexbox, Skeleton, Text } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { cssVar, cx, useThemeMode } from 'antd-style';
+import { cssVar, cx } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { BrandingProviderCard } from '@/business/client/features/BrandingProviderCard';
+import { useIsDark } from '@/hooks/useIsDark';
 import { type AiProviderListItem } from '@/types/aiProvider';
 
 import EnableSwitch from './EnableSwitch';
@@ -19,7 +20,7 @@ interface ProviderCardProps extends AiProviderListItem {
 const ProviderCard = memo<ProviderCardProps>(
   ({ id, description, name, enabled, source, logo, loading, onProviderSelect }) => {
     const { t } = useTranslation('providers');
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     if (loading)
       return (

package/src/app/[variants]/(main)/settings/stats/features/overview/ShareButton/TotalCard.tsx

@@ -1,14 +1,16 @@
 import { Flexbox } from '@lobehub/ui';
-import { cssVar, useThemeMode } from 'antd-style';
+import { cssVar } from 'antd-style';
 import { memo } from 'react';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 interface TotalCardProps {
   count: string | number;
   title: string;
 }
 
 const TotalCard = memo<TotalCardProps>(({ title, count }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   return (
     <Flexbox
       padding={12}

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

@@ -2,28 +2,26 @@
 
 import { ActionIcon } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useThemeMode } from 'antd-style';
 import { Moon, Sun } from 'lucide-react';
+import { useTheme as useNextThemesTheme } from 'next-themes';
 import { memo } from 'react';
 
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
-import { mobileHeaderSticky } from '@/styles/mobileHeader';
+import { useIsDark } from '@/hooks/useIsDark';
 
 const Header = memo(() => {
-  const { isDarkMode } = useThemeMode();
-  const switchThemeMode = useGlobalStore((s) => s.switchThemeMode);
+  const { setTheme } = useNextThemesTheme();
+  const isDark = useIsDark();
 
   return (
     <ChatHeader
       right={
         <ActionIcon
-          icon={isDarkMode ? Moon : Sun}
-          onClick={() => switchThemeMode(isDarkMode ? 'light' : 'dark')}
+          icon={isDark ? Moon : Sun}
+          onClick={() => setTheme(isDark ? 'light' : 'dark')}
           size={MOBILE_HEADER_ICON_SIZE}
         />
       }
-      style={mobileHeaderSticky}
     />
   );
 });

package/src/app/[variants]/layout.tsx

@@ -1,6 +1,5 @@
 import { ENABLE_BUSINESS_FEATURES } from '@lobechat/business-const';
 import { SpeedInsights } from '@vercel/speed-insights/next';
-import { type ThemeAppearance } from 'antd-style';
 import { type ResolvingViewport } from 'next';
 import Script from 'next/script';
 import { type ReactNode, Suspense } from 'react';
@@ -26,7 +25,7 @@ export interface RootLayoutProps extends DynamicLayoutProps {
 const RootLayout = async ({ children, params }: RootLayoutProps) => {
   const { variants } = await params;
 
-  const { locale, isMobile, theme, primaryColor, neutralColor } =
+  const { locale, isMobile, primaryColor, neutralColor } =
     RouteVariants.deserializeVariants(variants);
 
   const direction = isRtlLang(locale) ? 'rtl' : 'ltr';
@@ -34,7 +33,6 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
   const renderContent = () => {
     return (
       <GlobalProvider
-        appearance={theme}
         isMobile={isMobile}
         locale={locale}
         neutralColor={neutralColor}
@@ -50,8 +48,9 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
   };
 
   return (
-    <html dir={direction} lang={locale}>
+    <html dir={direction} lang={locale} suppressHydrationWarning>
       <head>
+        {/* <script dangerouslySetInnerHTML={{ __html: 'setTimeout(() => {debugger}, 16)' }} /> */}
         {process.env.DEBUG_REACT_SCAN === '1' && (
           <Script
             crossOrigin={'anonymous'}
@@ -99,7 +98,6 @@ export const generateViewport = async (props: DynamicLayoutProps): ResolvingView
 };
 
 export const generateStaticParams = () => {
-  const themes: ThemeAppearance[] = ['dark', 'light'];
   const mobileOptions = isDesktop ? [false] : [true, false];
   // only static for serveral page, other go to dynamtic
   const staticLocales: Locales[] = [DEFAULT_LANG, 'zh-CN'];
@@ -107,16 +105,13 @@ export const generateStaticParams = () => {
   const variants: { variants: string }[] = [];
 
   for (const locale of staticLocales) {
-    for (const theme of themes) {
-      for (const isMobile of mobileOptions) {
-        variants.push({
-          variants: RouteVariants.serializeVariants({
-            isMobile,
-            locale,
-            theme: theme as 'dark' | 'light',
-          }),
-        });
-      }
+    for (const isMobile of mobileOptions) {
+      variants.push({
+        variants: RouteVariants.serializeVariants({
+          isMobile,
+          locale,
+        }),
+      });
     }
   }
 

package/src/app/[variants]/onboarding/_layout/index.tsx

@@ -2,16 +2,17 @@
 
 import { Center, Flexbox, Text } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { cx, useThemeMode } from 'antd-style';
+import { cx } from 'antd-style';
 import type { FC, PropsWithChildren } from 'react';
 
 import LangButton from '@/features/User/UserPanel/LangButton';
 import ThemeButton from '@/features/User/UserPanel/ThemeButton';
+import { useIsDark } from '@/hooks/useIsDark';
 
 import { styles } from './style';
 
 const OnBoardingContainer: FC<PropsWithChildren> = ({ children }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   return (
     <Flexbox className={styles.outerContainer} height={'100%'} padding={8} width={'100%'}>
       <Flexbox

package/src/app/[variants]/onboarding/features/ModeSelectionStep.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import { Block, Button, Flexbox, Text } from '@lobehub/ui';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Undo2Icon } from 'lucide-react';
 import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import LobeMessage from '@/app/[variants]/onboarding/components/LobeMessage';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useUserStore } from '@/store/user';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -76,7 +77,7 @@ interface ModeSelectionStepProps {
 const ModeSelectionStep = memo<ModeSelectionStepProps>(({ onBack, onNext }) => {
   const { t } = useTranslation('onboarding');
   const navigate = useNavigate();
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const imageStyles = useMemo<React.CSSProperties>(
     () =>

package/src/app/[variants]/router/index.tsx

@@ -1,16 +1,20 @@
 'use client';
 
-import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
 
-import Loading from '@/components/Loading/BrandTextLoading';
-
-const DesktopRouterClient = dynamic(() => import('./DesktopClientRouter'), {
-  loading: () => <Loading debugId="DesktopRouter" />,
-  ssr: false,
-});
+import DesktopClientRouter from './DesktopClientRouter';
 
+const useIsClient = () => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+};
 const DesktopRouter = () => {
-  return <DesktopRouterClient />;
+  const isClient = useIsClient();
+  if (!isClient) return null;
+  return <DesktopClientRouter />;
 };
 
 export default DesktopRouter;

package/src/components/Cell/Divider.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { createStaticStyles, useThemeMode } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { memo } from 'react';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 const styles = createStaticStyles(({ css, cssVar }) => ({
   dividerDark: css`
     flex: none;
@@ -19,7 +21,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const Divider = memo(() => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   return <div className={isDarkMode ? styles.dividerDark : styles.dividerLight} />;
 });

package/src/components/DataStyleModal/index.tsx

@@ -1,8 +1,10 @@
 import { Flexbox, Icon, Modal } from '@lobehub/ui';
-import { createStaticStyles, useThemeMode } from 'antd-style';
+import { createStaticStyles } from 'antd-style';
 import { type LucideIcon } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 const prefixCls = 'ant';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -52,7 +54,7 @@ interface DataStyleModalProps {
 
 const DataStyleModal = memo<DataStyleModalProps>(
   ({ icon, onOpenChange, title, open, children, width = 550, height }) => {
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     return (
       <Modal

package/src/components/FeatureList/index.tsx

@@ -1,8 +1,10 @@
 import { Center, Flexbox, Icon } from '@lobehub/ui';
-import { createStaticStyles, useThemeMode , responsive } from 'antd-style';
+import { createStaticStyles, responsive } from 'antd-style';
 import { type LucideIcon } from 'lucide-react';
 import { memo } from 'react';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 const styles = createStaticStyles(({ css, cssVar }) => ({
   desc: css`
     width: 280px;
@@ -48,7 +50,7 @@ interface FeatureListProps {
 }
 
 const FeatureList = memo<FeatureListProps>(({ data }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   return (
     <Flexbox gap={32}>

package/src/components/FileParsingStatus/EmbeddingStatus.tsx

@@ -1,9 +1,10 @@
 import { Flexbox, Icon, Tag, Tooltip } from '@lobehub/ui';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { BoltIcon, RotateCwIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
 import { AsyncTaskStatus, type FileParsingTask } from '@/types/asyncTask';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
@@ -36,7 +37,7 @@ interface EmbeddingStatusProps extends FileParsingTask {
 const EmbeddingStatus = memo<EmbeddingStatusProps>(
   ({ chunkCount, embeddingStatus, embeddingError, onClick, onErrorClick, className }) => {
     const { t } = useTranslation(['components', 'common']);
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     switch (embeddingStatus) {
       case AsyncTaskStatus.Processing: {

package/src/components/FileParsingStatus/index.tsx

@@ -1,10 +1,11 @@
 import { Button, Flexbox, Icon, Tag, Tooltip } from '@lobehub/ui';
 import { Badge } from 'antd';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { BoltIcon, Loader2Icon, RotateCwIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
 import { AsyncTaskStatus, type FileParsingTask } from '@/types/asyncTask';
 
 import EmbeddingStatus from './EmbeddingStatus';
@@ -52,7 +53,7 @@ const FileParsingStatus = memo<FileParsingStatusProps>(
     hideEmbeddingButton,
   }) => {
     const { t } = useTranslation(['components', 'common']);
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     switch (chunkingStatus) {
       case AsyncTaskStatus.Processing: {

package/src/components/Notification/index.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { ActionIcon, Flexbox, type FlexboxProps } from '@lobehub/ui';
-import { createStaticStyles, cssVar, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { XIcon } from 'lucide-react';
 import { memo } from 'react';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 const styles = createStaticStyles(({ css }) => ({
   cancelIcon: css`
     position: absolute;
@@ -70,7 +72,7 @@ const Notification = memo<NotificationProps>(
     className,
     ...rest
   }) => {
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
     const { className: wrapperClassName, ...restWrapper } = wrapper;
     return (
       show && (

package/src/components/client/ClientOnly.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { type FC, type PropsWithChildren, useEffect, useState } from 'react';
+
+const ClientOnly: FC<PropsWithChildren> = ({ children }) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return children;
+};
+
+export default ClientOnly;

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