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

order	title
7.1	Dynamic Theme (Experimental)

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

Caveats

• This function depends on CSS Variables. Please check the browser compatibility.
• This function requires at least antd@4.17.0-alpha.0.

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

Related changes

In order to implement CSS Variable and maintain original usage compatibility, we added @root-entry-name: xxx; entry injection to the dist/antd.xxx.less file to support less dynamic loading of the corresponding less file. Under normal circumstances, you do not need to pay attention to this change. However, if your project directly references the less file in the lib|es directory. You need to configure @root-entry-name: default; (or @root-entry-name: variable;) at the entry of less so that less can find the correct entry.

In addition, we migrated @import'motion' and @import'reset' in lib|es/style/minxins/index.less to lib|es/style/themes/xxx.less In, because these two files rely on theme-related variables. If you use the relevant internal method, please adjust it yourself. Of course, we still recommend using the antd.less files in the dist directory directly instead of calling internal files, because they are often affected by refactoring.