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

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

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/Portal/Document/Header.tsx

@@ -61,15 +61,17 @@ const Header = () => {
       </Flexbox>
       <Flexbox align={'center'} gap={8} horizontal>
         <AutoSaveHint />
-        <Button
-          icon={<ExternalLink size={14} />}
-          loading={loading}
-          onClick={handleOpenInPageEditor}
-          size={'small'}
-          type={'text'}
-        >
-          {t('openInPageEditor')}
-        </Button>
+        {document.fileType !== 'agent/plan' && (
+          <Button
+            icon={<ExternalLink size={14} />}
+            loading={loading}
+            onClick={handleOpenInPageEditor}
+            size={'small'}
+            type={'text'}
+          >
+            {t('openInPageEditor')}
+          </Button>
+        )}
       </Flexbox>
     </Flexbox>
   );

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