主题色切换
按antd官方文档，要动态切换主题不能引用@import '~antd/dist/antd.less';而需要引用@import '~antd/dist/antd.variable.min.css';
// 在src/global.less下引入@import '~antd/dist/antd.variable.min.css'; 如果没有global.less自己创建一个
@import '~antd/dist/antd.variable.min.css';
引入完毕后，配置动态主题色Config。(此处我使用umi的useModel作为状态管理，有用Redux的也可以换成Redux)
const Layout: React.FC = (props) => {
const { theme } = useModel('tabMenu');
ConfigProvider.config({
theme: {
primaryColor: theme,
},
});
return (
<ConfigProvider locale={locale}>
<IndexPage {...props} />
</ConfigProvider>
);
};
配置好后，切换主题色。改变状态参数theme即可。
例如：
const { theme, dispatch } = useModel('tabMenu');
return (
<div className="main">
<ColorRGBPicker
value={theme}
onChange={(e) => {
dispatch({ type: 'CHANGE_THEME', payload: { theme: e } });
}}
/>
</div>
);
切换主题一共就这三处地方，极为简单。
该项目地址以上传github。
