求助：如何在Ant Design Pro Layout中实现主题动态切换

你当前在config/config.ts里的静态主题配置只能在编译阶段生效，没法实现运行时动态切换。以下是具体实现步骤：

1. 移除静态主题配置 #

先删掉config/config.ts里的theme配置项，避免和动态配置冲突：

// config/config.ts
export default defineConfig({
  // 移除此处的theme配置
})

2. 用ConfigProvider实现动态主题 #

在项目的全局布局组件（比如src/layouts/index.tsx）或入口文件src/app.tsx中，引入Ant Design的ConfigProvider，结合状态管理动态传递主题配置：

// src/layouts/index.tsx
import { ConfigProvider } from 'antd';
import { useState, useEffect } from 'react';
import type { ThemeConfig } from 'antd/es/config-provider/context';

const Layout = ({ children }) => {
  // 从localStorage读取上次保存的主题色，没有则用默认值
  const savedColor = localStorage.getItem('themeColor') || '#1890ff';
  const [themeConfig, setThemeConfig] = useState<ThemeConfig>({
    token: {
      colorPrimary: savedColor,
    },
  });

  // 主题切换函数
  const changeTheme = (newColor: string) => {
    const newTheme: ThemeConfig = {
      token: {
        colorPrimary: newColor,
      },
    };
    setThemeConfig(newTheme);
    // 保存到localStorage，实现持久化
    localStorage.setItem('themeColor', newColor);
  };

  return (
    <ConfigProvider theme={themeConfig}>
      {/* 示例：添加主题切换按钮，可放到页面头部工具栏 */}
      <div style={{ padding: '10px' }}>
        <button onClick={() => changeTheme('#f5222d')}>红色主题</button>
        <button onClick={() => changeTheme('#1890ff')}>默认主题</button>
        <button onClick={() => changeTheme('#52c41a')}>绿色主题</button>
      </div>
      {children}
    </ConfigProvider>
  );
};

export default Layout;

3. 适配Pro Layout组件 #

Ant Design Pro Layout的菜单、面包屑、按钮等组件会自动继承ConfigProvider的主题配置，无需额外修改，颜色会跟随主题动态变化。

内容的提问来源于stack exchange，提问作者munkylo