ant-design/docs/react/customize-theme-variable.en-US.md

order	title
7.1	Dynamic Theme (experience)

Except less customize theme, We also provide CSS Variable version to enable dynamic theme. You can check on ConfigProvider demo.

Notice

This function need CSS Variable support which mean it can not support IE. Please make sure your browser requirement.

How to use

Import antd.variable.min.css

Replace your import style file with CSS Variable version:

-- import 'antd/dist/antd.min.css';
++ import 'antd/dist/antd.variable.min.css';

Note: You need remove babel-plugin-import for the dynamic theme.

Static config

Call ConfigProvider static function to modify theme color:

import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: '#25b864',
  },
});

Conflict resolve

CSS Variable use --ant prefix by default. When exist multiple antd style file in your project, you can modify prefix to fix it.

Adjust

Modify prefixCls on the root of ConfigProvider:

import { ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider prefixCls="custom">
    <MyApp />
  </ConfigProvider>
);

Also need call the static function to modify prefixCls:

ConfigProvider.config({
  prefixCls: 'custom',
  theme: {
    primaryColor: '#25b864',
  },
});

Compile less

Since prefix modified. Origin antd.variable.css should also be replaced:

lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css