如何在Ant设计v4中动态切换主题？

npm install antd @ant-design/icons

// theme.js
export const themes = {
  light: {
    '@primary-color': '#1890ff',
    '@link-color': '#1890ff',
    '@font-size-base': '14px',
  },
  dark: {
    '@primary-color': '#ff4d4f',
    '@link-color': '#ff4d4f',
    '@font-size-base': '14px',
  },
};

// App.js
import React, { useState } from 'react';
import { ConfigProvider } from 'antd';
import { Button } from 'antd';
import { themes } from './theme';

const App = () => {
  const [currentTheme, setCurrentTheme] = useState('light');

  const toggleTheme = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ConfigProvider theme={{ token: themes[currentTheme] }}>
      <div>
        <h1>Dynamic Theme Switching</h1>
        <Button onClick={toggleTheme}>Toggle Theme</Button>
        {/* 其他组件 */}
      </div>
    </ConfigProvider>
  );
};

export default App;