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

package/src/app/[variants]/(main)/community/(list)/_layout/Footer.tsx

@@ -1,9 +1,10 @@
 import { Button, Flexbox, Text } from '@lobehub/ui';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DefaultFooter from '@/features/Setting/Footer';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 
 const styles = createStaticStyles(({ css }) => ({
@@ -27,7 +28,7 @@ const styles = createStaticStyles(({ css }) => ({
 
 const Footer = memo(() => {
   const { t } = useTranslation('discover');
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const { isAuthenticated, signIn } = useMarketAuth();
   const [loading, setLoading] = useState(false);
   const handleSignIn = useCallback(async () => {

package/src/app/[variants]/(main)/group/features/Conversation/ChatItem/Thread.tsx

@@ -1,9 +1,10 @@
 import { Flexbox, Text } from '@lobehub/ui';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { type CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsDark } from '@/hooks/useIsDark';
 import { useChatStore } from '@/store/chat';
 import { threadSelectors } from '@/store/chat/selectors';
 
@@ -32,7 +33,7 @@ interface ThreadProps {
 
 const Thread = memo<ThreadProps>(({ id, placement, style }) => {
   const { t } = useTranslation('chat');
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const threads = useChatStore(threadSelectors.getThreadsBySourceMsgId(id), isEqual);
 

package/src/app/[variants]/(main)/group/profile/features/AgentBuilder/index.tsx

@@ -16,7 +16,6 @@ const AgentBuilder = memo(() => {
   const setChatPanelExpanded = useProfileStore((s) => s.setChatPanelExpanded);
   const groupAgentBuilderId = useAgentStore(builtinAgentSelectors.groupAgentBuilderId);
 
-  console.log('groupAgentBuilderId', groupAgentBuilderId);
   const [width, setWidth] = useState<string | number>(360);
 
   const useInitBuiltinAgent = useAgentStore((s) => s.useInitBuiltinAgent);

package/src/app/[variants]/(main)/group/profile/features/ProfileEditor/PluginTag.tsx

@@ -2,7 +2,7 @@
 
 import { KLAVIS_SERVER_TYPES, type KlavisServerType } from '@lobechat/const';
 import { Avatar, Icon, Tag } from '@lobehub/ui';
-import { createStaticStyles, cssVar, useThemeMode } from 'antd-style';
+import { createStaticStyles, cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { AlertCircle, X } from 'lucide-react';
 import Image from 'next/image';
@@ -10,6 +10,7 @@ import React, { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useDiscoverStore } from '@/store/discover';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
@@ -53,7 +54,7 @@ interface PluginTagProps {
 }
 
 const PluginTag = memo<PluginTagProps>(({ pluginId, onRemove }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const { t } = useTranslation('setting');
 
   // Extract identifier

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/AgentItem/Editing.tsx

@@ -1,9 +1,9 @@
 import { Avatar, Block, Flexbox, Input } from '@lobehub/ui';
 import { Popover } from 'antd';
-import { useThemeMode } from 'antd-style';
 import { memo, useCallback, useState } from 'react';
 
 import EmojiPicker from '@/components/EmojiPicker';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useAgentStore } from '@/store/agent';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
@@ -18,7 +18,7 @@ interface EditingProps {
 
 const Editing = memo<EditingProps>(({ id, title, avatar, toggleEditing }) => {
   const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
 
   const editing = useHomeStore((s) => s.agentRenamingId === id);
 

package/src/app/[variants]/(main)/home/_layout/Footer/index.tsx

@@ -118,7 +118,7 @@ const Footer = memo(() => {
             </a>
           )}
         </Flexbox>
-        <ThemeButton placement={'top'} size={16} />
+        <ThemeButton placement={'topCenter'} size={16} />
       </Flexbox>
       <LabsModal onClose={handleCloseLabsModal} open={isLabsModalOpen} />
       <ChangelogModal

package/src/app/[variants]/(main)/home/_layout/index.tsx

@@ -1,8 +1,9 @@
 import { Flexbox } from '@lobehub/ui';
-import { useTheme, useThemeMode } from 'antd-style';
+import { useTheme } from 'antd-style';
 import { Activity, type FC, type ReactNode, useEffect, useMemo, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import { useIsDark } from '@/hooks/useIsDark';
 import { useHomeStore } from '@/store/home';
 
 import RecentHydration from './RecentHydration';
@@ -14,7 +15,7 @@ interface LayoutProps {
 }
 
 const Layout: FC<LayoutProps> = ({ children }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const theme = useTheme(); // Keep for colorBgContainerSecondary (not in cssVar)
   const navigate = useNavigate();
   const { pathname } = useLocation();

package/src/app/[variants]/(main)/home/features/CommunityAgents/Item.tsx

@@ -1,14 +1,15 @@
 import { Avatar, Block, Flexbox, Text } from '@lobehub/ui';
-import { cssVar, useThemeMode } from 'antd-style';
+import { cssVar } from 'antd-style';
 import { memo } from 'react';
 
 import { RECENT_BLOCK_SIZE } from '@/app/[variants]/(main)/home/features/const';
 import { DEFAULT_AVATAR } from '@/const/meta';
+import { useIsDark } from '@/hooks/useIsDark';
 import { type DiscoverAssistantItem } from '@/types/discover';
 
 const CommunityAgentItem = memo<DiscoverAssistantItem>(
   ({ title, avatar, backgroundColor, author, description }) => {
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     return (
       <Block

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/AspectRatioSelect/index.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { Block, Center, Grid, type GridProps, Text } from '@lobehub/ui';
-import { cssVar, useThemeMode } from 'antd-style';
+import { cssVar } from 'antd-style';
 import { memo } from 'react';
 import useMergeState from 'use-merge-value';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 export interface AspectRatioSelectProps extends Omit<GridProps, 'children' | 'onChange'> {
   defaultValue?: string;
   onChange?: (value: string) => void;
@@ -14,7 +16,7 @@ export interface AspectRatioSelectProps extends Omit<GridProps, 'children' | 'on
 
 const AspectRatioSelect = memo<AspectRatioSelectProps>(
   ({ options, onChange, value, defaultValue, ...rest }) => {
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
     const [active, setActive] = useMergeState('1:1', {
       defaultValue: defaultValue || '1:1',
       onChange,

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/ModelSelect/ImageModelItem.tsx

@@ -1,12 +1,13 @@
 import { ModelIcon } from '@lobehub/icons';
 import { Flexbox, Text } from '@lobehub/ui';
 import { Popover } from 'antd';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { type AiModelForSelect } from 'model-bank';
 import numeral from 'numeral';
 import { memo, useMemo } from 'react';
 
 import NewModelBadge from '@/components/ModelSelect/NewModelBadge';
+import { useIsDark } from '@/hooks/useIsDark';
 
 const POPOVER_MAX_WIDTH = 320;
 
@@ -59,7 +60,7 @@ const ImageModelItem = memo<ImageModelItemProps>(
     showBadge = true,
     ...model
   }) => {
-    const { isDarkMode } = useThemeMode();
+    const isDarkMode = useIsDark();
 
     const priceLabel = useMemo(() => {
       // Priority 1: Use exact price

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/Select/index.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { Block, Center, Grid, type GridProps, Select, Text } from '@lobehub/ui';
-import { cssVar, useThemeMode } from 'antd-style';
+import { cssVar } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 import useMergeState from 'use-merge-value';
 
+import { useIsDark } from '@/hooks/useIsDark';
+
 export interface SizeSelectProps extends Omit<GridProps, 'children' | 'onChange'> {
   defaultValue?: 'auto' | string;
   onChange?: (value: string) => void;
@@ -26,7 +28,7 @@ const canParseAsRatio = (value: string): boolean => {
 };
 
 const SizeSelect = memo<SizeSelectProps>(({ options, onChange, value, defaultValue, ...rest }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const [active, setActive] = useMergeState('auto', {
     defaultValue,
     onChange,

package/src/app/[variants]/(main)/image/features/PromptInput/index.tsx

@@ -2,13 +2,14 @@
 
 import { ChatInput } from '@lobehub/editor/react';
 import { Button, Flexbox, TextArea } from '@lobehub/ui';
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import { Sparkles } from 'lucide-react';
 import type { KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { loginRequired } from '@/components/Error/loginRequiredNotification';
 import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useImageStore } from '@/store/image';
 import { createImageSelectors } from '@/store/image/selectors';
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
@@ -39,7 +40,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const PromptInput = ({ showTitle = false }: PromptInputProps) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const { t } = useTranslation('image');
   const { value, setValue } = useGenerationConfigParam('prompt');
   const isCreating = useImageStore(createImageSelectors.isCreating);

package/src/app/[variants]/(main)/memory/features/TimeLineView/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { createStaticStyles, cx, useThemeMode } from 'antd-style';
+import { createStaticStyles, cx } from 'antd-style';
 import dayjs from 'dayjs';
 import { type ReactNode, memo, useMemo } from 'react';
 import { GroupedVirtuoso } from 'react-virtuoso';
 
 import Loading from '@/app/[variants]/(main)/memory/features/Loading';
+import { useIsDark } from '@/hooks/useIsDark';
 
 import { useScrollParent } from './useScrollParent';
 
@@ -31,7 +32,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
 export type GroupBy = 'day' | 'month';
 
-interface TimelineViewProps<T extends { capturedAt?: Date | string; createdAt?: Date | string; id: string }> {
+interface TimelineViewProps<
+  T extends { capturedAt?: Date | string; createdAt?: Date | string; id: string },
+> {
   data: T[];
   /**
    * Custom date field extractor for grouping
@@ -68,7 +71,9 @@ const getDateValue = <T extends { capturedAt?: Date | string; createdAt?: Date |
   return item.capturedAt ?? item.createdAt ?? new Date();
 };
 
-function TimelineViewInner<T extends { capturedAt?: Date | string; createdAt?: Date | string; id: string }>({
+function TimelineViewInner<
+  T extends { capturedAt?: Date | string; createdAt?: Date | string; id: string },
+>({
   data,
   groupBy = 'day',
   getDateForGrouping,
@@ -78,7 +83,7 @@ function TimelineViewInner<T extends { capturedAt?: Date | string; createdAt?: D
   renderHeader,
   renderItem,
 }: TimelineViewProps<T>) {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const scrollParent = useScrollParent();
 
   const { groupCounts, sortedPeriods, groupedItems } = useMemo(() => {

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/Editing.tsx

@@ -1,10 +1,10 @@
 import { Block, Flexbox, Input } from '@lobehub/ui';
 import { Popover } from 'antd';
-import { useThemeMode } from 'antd-style';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import EmojiPicker from '@/components/EmojiPicker';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
@@ -18,7 +18,7 @@ interface EditingProps {
 
 const Editing = memo<EditingProps>(({ documentId, title, currentEmoji, toggleEditing }) => {
   const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const { t } = useTranslation('file');
 
   const editing = useFileStore((s) => s.renamingPageId === documentId);

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