Antd全局主题色设置求助：Django+React项目替换默认主题为紫色

针对你用React+Antd构建应用的场景，之前的操作没生效是因为没有通过Antd的全局配置容器注入主题设置，以下是具体解决方法：

前提说明 #

你提到了theme.useToken()，说明使用的是Antd v5版本，以下方案针对v5：

正确配置流程 #

1. 在应用根组件中全局注入主题配置
   找到你的应用入口文件（通常是main.jsx/main.tsx或App.js/App.tsx），通过ConfigProvider包裹整个应用，并在theme属性中指定主色：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { ConfigProvider } from 'antd';
   import { purple } from '@ant-design/colors';
   import App from './App';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <ConfigProvider
       theme={{
         token: {
           colorPrimary: purple[5], // 紫色调色板的主色，对应#722ED1
         },
       }}
     >
       <App />
     </ConfigProvider>,
   );
   

2. 验证生效
   配置完成后，所有Antd组件的主色都会自动替换为紫色，比如Button的type="primary"、Input的聚焦边框、Select的选中状态等都会应用紫色主题。

为什么之前的方法不生效？ #

• 你之前在Layout.js中定义的theme变量只是局部变量，没有被Antd的组件系统识别；
• theme.useToken()是用来读取当前主题的token，而不是用来设置主题的，所以解构token无法修改全局主题。

可选进阶配置 #

如果需要更精细的主题定制（比如调整背景色、圆角等），可以在theme.token中添加更多配置项：

theme={{
  token: {
    colorPrimary: purple[5],
    colorBgContainer: '#f9f0ff', // 自定义容器背景色
    borderRadiusLG: 8, // 自定义大圆角尺寸
  },
}}

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