Dynamic Theme (Experimental)

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