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

package/packages/model-runtime/src/types/error.ts

@@ -23,7 +23,7 @@ export const StandardErrorType = {
 export type ErrorType = (typeof StandardErrorType)[keyof typeof StandardErrorType];
 
 /**
- * 聊天消息错误对象
+ * Chat message error object
  */
 export interface ChatMessageError {
   body?: any;

package/packages/model-runtime/src/types/image.ts

@@ -34,7 +34,7 @@ export type CreateImageResponse = {
   modelUsage?: ModelUsage;
 };
 
-// 新增：支持认证图片下载的运行时接口
+// New: Runtime interface for authenticated image download support
 export interface AuthenticatedImageRuntime {
   /**
    * Get authentication headers for image download

package/scripts/electronWorkflow/modifiers/nextConfig.mts

@@ -40,13 +40,19 @@ export const modifyNextConfig = async (TEMP_DIR: string) => {
       }
 
       // 1. Remove redirects
-      const redirectsPair = nextConfigDecl.find({
-        rule: {
-          pattern: 'redirects: $A',
-        },
-      });
-      if (redirectsPair) {
-        const range = redirectsPair.range();
+      const redirectsPair = nextConfigDecl
+        .findAll({
+          rule: {
+            kind: 'pair',
+          },
+        })
+        .find((node) => {
+          const text = node.text();
+          return text.startsWith('redirects:') || text.startsWith('redirects :');
+        });
+      invariant(redirectsPair, '[modifyNextConfig] redirects pair not found');
+      {
+        const range = redirectsPair!.range();
         edits.push({ end: range.end.index, start: range.start.index, text: '' });
       }
 
@@ -61,18 +67,39 @@ export const modifyNextConfig = async (TEMP_DIR: string) => {
           const text = node.text();
           return text.startsWith('async headers') || text.startsWith('headers');
         });
-      if (headersMethod) {
-        const range = headersMethod.range();
+      invariant(headersMethod, '[modifyNextConfig] headers method not found');
+      {
+        const range = headersMethod!.range();
+        edits.push({ end: range.end.index, start: range.start.index, text: '' });
+      }
+
+      // 3. Remove webVitalsAttribution
+      const webVitalsPair = nextConfigDecl
+        .findAll({
+          rule: {
+            kind: 'pair',
+          },
+        })
+        .find((node) => {
+          const text = node.text();
+          return (
+            text.startsWith('webVitalsAttribution:') || text.startsWith('webVitalsAttribution :')
+          );
+        });
+      invariant(webVitalsPair, '[modifyNextConfig] webVitalsAttribution pair not found');
+      {
+        const range = webVitalsPair!.range();
         edits.push({ end: range.end.index, start: range.start.index, text: '' });
       }
 
-      // 3. Remove spread element
+      // 4. Remove spread element
       const spreads = nextConfigDecl.findAll({
         rule: {
           kind: 'spread_element',
         },
       });
 
+      // eslint-disable-next-line unicorn/consistent-function-scoping
       const isObjectLevelSpread = (node: any) => node.parent()?.kind() === 'object';
 
       const standaloneSpread = spreads.find((node) => {
@@ -84,12 +111,13 @@ export const modifyNextConfig = async (TEMP_DIR: string) => {
       const objectLevelSpread = standaloneSpread ? null : spreads.find(isObjectLevelSpread);
 
       const spreadToRemove = standaloneSpread || objectLevelSpread;
-      if (spreadToRemove) {
-        const range = spreadToRemove.range();
+      invariant(spreadToRemove, '[modifyNextConfig] spread element not found');
+      {
+        const range = spreadToRemove!.range();
         edits.push({ end: range.end.index, start: range.start.index, text: '' });
       }
 
-      // 4. Inject/force output: 'export'
+      // 5. Inject/force output: 'export'
       const outputPair = nextConfigDecl.find({
         rule: {
           pattern: 'output: $A',

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

@@ -2,17 +2,18 @@
 
 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 { ProductLogo } from '@/components/Branding';
 import LangButton from '@/features/User/UserPanel/LangButton';
 import ThemeButton from '@/features/User/UserPanel/ThemeButton';
+import { useIsDark } from '@/hooks/useIsDark';
 
 import { styles } from './style';
 
 const AuthContainer: 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]/(auth)/_layout/style.ts

@@ -1,18 +1,13 @@
 import { createStaticStyles } from 'antd-style';
 
 export const styles = createStaticStyles(({ css, cssVar }) => ({
-  
-  
-// Divider 样式
-divider: css`
+  // Divider 样式
+  divider: css`
     height: 24px;
   `,
 
-  
-  
-
-// 内层容器 - 深色模式
-innerContainerDark: css`
+  // 内层容器 - 深色模式
+  innerContainerDark: css`
     position: relative;
 
     overflow: hidden;
@@ -23,11 +18,8 @@ innerContainerDark: css`
     background: ${cssVar.colorBgContainer};
   `,
 
-  
-  
-
-// 内层容器 - 浅色模式
-innerContainerLight: css`
+  // 内层容器 - 浅色模式
+  innerContainerLight: css`
     position: relative;
 
     overflow: hidden;
@@ -38,10 +30,8 @@ innerContainerLight: css`
     background: ${cssVar.colorBgContainer};
   `,
 
-  
-  
-// 外层容器
-outerContainer: css`
+  // 外层容器
+  outerContainer: css`
     position: relative;
   `,
 }));

package/src/app/[variants]/(auth)/layout.tsx

@@ -1,13 +1,17 @@
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { type FC, type PropsWithChildren } from 'react';
 
+import ClientOnly from '@/components/client/ClientOnly';
+
 import AuthContainer from './_layout';
 
 const AuthLayout: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <NuqsAdapter>
-      <AuthContainer>{children}</AuthContainer>
-    </NuqsAdapter>
+    <ClientOnly>
+      <NuqsAdapter>
+        <AuthContainer>{children}</AuthContainer>
+      </NuqsAdapter>
+    </ClientOnly>
   );
 };
 

package/src/app/[variants]/(desktop)/desktop-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
@@ -21,6 +22,7 @@ const OnboardingContainer: FC<PropsWithChildren> = ({ children }) => {
       >
         <Flexbox
           align={'center'}
+          className={cx(styles.drag)}
           gap={8}
           horizontal
           justify={'space-between'}

package/src/app/[variants]/(desktop)/desktop-onboarding/_layout/style.ts

@@ -6,6 +6,9 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
     height: 24px;
   `,
 
+  drag: css`
+    -webkit-app-region: drag;
+  `,
   // 内层容器 - 深色模式
   innerContainerDark: css`
     position: relative;

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

@@ -1,15 +1,16 @@
 import { Flexbox } from '@lobehub/ui';
-import { cssVar, useThemeMode } from 'antd-style';
+import { cssVar } from 'antd-style';
 import { type FC, type PropsWithChildren, useMemo } from 'react';
 
 import { isDesktop } from '@/const/version';
+import { useIsDark } from '@/hooks/useIsDark';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
 import { styles } from './DesktopLayoutContainer/style';
 
 const DesktopLayoutContainer: FC<PropsWithChildren> = ({ children }) => {
-  const { isDarkMode } = useThemeMode();
+  const isDarkMode = useIsDark();
   const [expand] = useGlobalStore((s) => [systemStatusSelectors.showLeftPanel(s)]);
 
   // CSS 变量用于动态样式

package/src/app/[variants]/(main)/chat/features/Conversation/Header/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { isDesktop } from '@lobechat/const';
 import { Flexbox } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { memo } from 'react';
@@ -22,7 +23,7 @@ const Header = memo(() => {
       }
       right={
         <Flexbox align={'center'} horizontal style={{ backgroundColor: cssVar.colorBgContainer }}>
-          <WorkingDirectory />
+          {isDesktop && <WorkingDirectory />}
           <NotebookButton />
           <ShareButton />
           <HeaderActions />

package/src/app/[variants]/(main)/chat/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)/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);