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

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 2.0.0-next.214](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.213...v2.0.0-next.214)
+
+<sup>Released on **2026-01-05**</sup>
+
+#### 🐛 Bug Fixes
+
+- **electron**: Correct next config codemod pattern matching.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **electron**: Correct next config codemod pattern matching, closes [#11228](https://github.com/lobehub/lobe-chat/issues/11228) ([06cb019](https://github.com/lobehub/lobe-chat/commit/06cb019))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.213](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.212...v2.0.0-next.213)
 
 <sup>Released on **2026-01-05**</sup>

package/apps/desktop/package.json

@@ -18,6 +18,7 @@
     "build:mac:local": "npm run build && UPDATE_CHANNEL=nightly electron-builder --mac --config electron-builder.js --publish never",
     "build:win": "npm run build && electron-builder --win --config electron-builder.js  --publish never",
     "dev": "electron-vite dev",
+    "dev:static": "cross-env DESKTOP_RENDERER_STATIC=1 npm run electron:dev",
     "electron:dev": "electron-vite dev",
     "electron:run-unpack": "electron .",
     "format": "prettier --write ",
@@ -57,11 +58,11 @@
     "@lobechat/file-loaders": "workspace:*",
     "@lobehub/i18n-cli": "^1.25.1",
     "@modelcontextprotocol/sdk": "^1.24.3",
+    "@t3-oss/env-core": "^0.13.8",
     "@types/async-retry": "^1.4.9",
     "@types/resolve": "^1.20.6",
     "@types/semver": "^7.7.1",
     "@types/set-cookie-parser": "^2.4.10",
-    "@t3-oss/env-core": "^0.13.8",
     "@typescript/native-preview": "7.0.0-dev.20251210.1",
     "async-retry": "^1.3.3",
     "consola": "^3.4.2",
@@ -104,4 +105,4 @@
       "electron-builder"
     ]
   }
-}
+}

package/apps/desktop/src/main/const/store.ts

@@ -31,5 +31,5 @@ export const STORE_DEFAULTS: ElectronMainStore = {
   networkProxy: defaultProxySettings,
   shortcuts: DEFAULT_SHORTCUTS_CONFIG,
   storagePath: appStorageDir,
-  themeMode: 'auto',
+  themeMode: 'system',
 };

package/apps/desktop/src/main/controllers/SystemCtr.ts

@@ -258,9 +258,8 @@ export default class SystemController extends ControllerModule {
     return nativeTheme.themeSource;
   }
 
-  @IpcMethod()
-  async setSystemThemeMode(themeMode: ThemeMode) {
-    nativeTheme.themeSource = themeMode === 'auto' ? 'system' : themeMode;
+  private async setSystemThemeMode(themeMode: ThemeMode) {
+    nativeTheme.themeSource = themeMode;
   }
 
   /**

package/apps/desktop/src/main/core/App.ts

@@ -142,10 +142,17 @@ export class App {
    * This allows nativeTheme.shouldUseDarkColors to be used consistently everywhere
    */
   private initializeThemeMode() {
-    const themeMode = this.storeManager.get('themeMode');
+    let themeMode = this.storeManager.get('themeMode');
+
+    // Migrate legacy 'auto' value to 'system' (nativeTheme.themeSource doesn't accept 'auto')
+    if (Object.is(themeMode, 'auto')) {
+      themeMode = 'system';
+      this.storeManager.set('themeMode', themeMode);
+      logger.info(`Migrated legacy theme mode 'auto' to 'system'`);
+    }
 
     if (themeMode) {
-      nativeTheme.themeSource = themeMode === 'auto' ? 'system' : themeMode;
+      nativeTheme.themeSource = themeMode;
       logger.debug(
         `Theme mode initialized to: ${themeMode} (themeSource: ${nativeTheme.themeSource})`,
       );
@@ -401,4 +408,4 @@ export class App {
     // 执行清理操作
     this.staticFileServerManager.destroy();
   };
-}
+}

package/apps/desktop/src/main/types/store.ts

@@ -11,7 +11,7 @@ export interface ElectronMainStore {
   networkProxy: NetworkProxySettings;
   shortcuts: Record<string, string>;
   storagePath: string;
-  themeMode: 'dark' | 'light' | 'auto';
+  themeMode: 'dark' | 'light' | 'system';
 }
 
 export type StoreKey = keyof ElectronMainStore;

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2026-01-05",
+    "version": "2.0.0-next.214"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.213",
+  "version": "2.0.0-next.214",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -205,7 +205,7 @@
     "@lobehub/icons": "^4.0.2",
     "@lobehub/market-sdk": "^0.25.1",
     "@lobehub/tts": "^4.0.2",
-    "@lobehub/ui": "^4.8.0",
+    "@lobehub/ui": "^4.9.0",
     "@modelcontextprotocol/sdk": "^1.25.1",
     "@neondatabase/serverless": "^1.0.2",
     "@next/third-parties": "^16.1.1",
@@ -234,7 +234,7 @@
     "@zumer/snapdom": "^1.9.14",
     "ahooks": "^3.9.6",
     "antd": "^6.1.1",
-    "antd-style": "^4.1.0",
+    "antd-style": "4.1.0",
     "async-retry": "^1.3.3",
     "bcryptjs": "^3.0.3",
     "better-auth": "1.4.6",
@@ -281,6 +281,7 @@
     "next": "^16.1.1",
     "next-auth": "5.0.0-beta.30",
     "next-mdx-remote": "^5.0.0",
+    "next-themes": "^0.4.6",
     "nextjs-toploader": "^3.9.17",
     "node-machine-id": "^1.1.12",
     "nodemailer": "^7.0.11",

package/packages/builtin-tool-knowledge-base/src/client/Render/SearchKnowledgeBase/Item/index.tsx

@@ -2,7 +2,8 @@
 
 import { FileSearchResult } from '@lobechat/types';
 import { Center, Flexbox, MaterialFileTypeIcon, Text, Tooltip } from '@lobehub/ui';
-import { cx, useThemeMode } from 'antd-style';
+import { cx } from 'antd-style';
+import { useTheme } from 'next-themes';
 import { memo } from 'react';
 
 import { styles } from './style';
@@ -12,7 +13,8 @@ export interface FileItemProps extends FileSearchResult {
 }
 
 const FileItem = memo<FileItemProps>(({ fileId, fileName, relevanceScore }) => {
-  const { isDarkMode } = useThemeMode();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === 'dark';
 
   return (
     <Flexbox

package/packages/builtin-tool-local-system/src/client/Intervention/EditLocalFile/index.tsx

@@ -1,9 +1,9 @@
 import { type EditLocalFileParams } from '@lobechat/electron-client-ipc';
 import { type BuiltinInterventionProps } from '@lobechat/types';
 import { Flexbox, Icon, Skeleton, Text } from '@lobehub/ui';
-import { useThemeMode } from 'antd-style';
 import { createPatch } from 'diff';
 import { ChevronRight } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import path from 'path-browserify-esm';
 import React, { memo, useMemo } from 'react';
 import { Diff, Hunk, parseDiff } from 'react-diff-view';
@@ -29,7 +29,8 @@ const EditLocalFile = memo<BuiltinInterventionProps<EditLocalFileParams>>(({ arg
     },
   );
 
-  const { isDarkMode } = useThemeMode();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === 'dark';
   // Generate diff from full file content
   const files = useMemo(() => {
     if (!fileData?.content) return [];

package/packages/builtin-tool-local-system/src/client/Render/EditLocalFile/index.tsx

@@ -2,8 +2,8 @@ import { type EditLocalFileState } from '@lobechat/builtin-tool-local-system';
 import { type EditLocalFileParams } from '@lobechat/electron-client-ipc';
 import { type BuiltinRenderProps } from '@lobechat/types';
 import { Alert, Flexbox, Icon, Skeleton } from '@lobehub/ui';
-import { useThemeMode } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import path from 'path-browserify-esm';
 import React, { memo, useMemo } from 'react';
 import { Diff, Hunk, parseDiff } from 'react-diff-view';
@@ -28,7 +28,8 @@ const EditLocalFile = memo<BuiltinRenderProps<EditLocalFileParams, EditLocalFile
         return [];
       }
     }, [pluginState?.diffText]);
-    const { isDarkMode } = useThemeMode();
+    const { resolvedTheme } = useTheme();
+    const isDarkMode = resolvedTheme === 'dark';
 
     if (!args) return <Skeleton active />;
 

package/packages/const/src/theme.ts

@@ -1,5 +1,3 @@
-export const LOBE_THEME_APPEARANCE = 'LOBE_THEME_APPEARANCE';
-
 export const LOBE_THEME_PRIMARY_COLOR = 'LOBE_THEME_PRIMARY_COLOR';
 
 export const LOBE_THEME_NEUTRAL_COLOR = 'LOBE_THEME_NEUTRAL_COLOR';

package/packages/desktop-bridge/src/routeVariants.ts

@@ -31,31 +31,26 @@ export interface IRouteVariants {
   locale: Locales;
   neutralColor?: string;
   primaryColor?: string;
-  theme: 'dark' | 'light';
 }
 
-const SUPPORTED_THEMES = ['dark', 'light'] as const;
-
 export const DEFAULT_VARIANTS: IRouteVariants = {
   isMobile: false,
   locale: DEFAULT_LANG,
-  theme: 'light',
 };
 
 const SPLITTER = '__';
 
 export class RouteVariants {
   static serializeVariants = (variants: IRouteVariants): string =>
-    [variants.locale, Number(variants.isMobile), variants.theme].join(SPLITTER);
+    [variants.locale, Number(variants.isMobile)].join(SPLITTER);
 
   static deserializeVariants = (serialized: string): IRouteVariants => {
     try {
-      const [locale, isMobile, theme] = serialized.split(SPLITTER);
+      const [locale, isMobile] = serialized.split(SPLITTER);
 
       return {
         isMobile: isMobile === '1',
         locale: RouteVariants.isValidLocale(locale) ? (locale as Locales) : DEFAULT_VARIANTS.locale,
-        theme: RouteVariants.isValidTheme(theme) ? (theme as any) : DEFAULT_VARIANTS.theme,
       };
     } catch {
       return { ...DEFAULT_VARIANTS };
@@ -68,6 +63,4 @@ export class RouteVariants {
   });
 
   private static isValidLocale = (locale: string): boolean => locales.includes(locale as any);
-
-  private static isValidTheme = (theme: string): boolean => SUPPORTED_THEMES.includes(theme as any);
 }

package/packages/electron-client-ipc/src/types/system.ts

@@ -25,5 +25,5 @@ export interface UserPathData {
   videos?: string; // User's home directory
 }
 
-export type ThemeMode = 'auto' | 'dark' | 'light';
+export type ThemeMode = 'system' | 'dark' | 'light';
 export type ThemeAppearance = 'dark' | 'light' | string;

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/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