|
| 1 | +--- |
| 2 | +order: 7.1 |
| 3 | +title: Dynamic Theme (Experimental) |
| 4 | +--- |
| 5 | + |
| 6 | +Except [less customize theme](/docs/react/customize-theme), We also provide CSS Variable version to enable dynamic theme. You can check on [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) demo. |
| 7 | + |
| 8 | +## Caveats |
| 9 | + |
| 10 | +- This function requires at least `[email protected]`. |
| 11 | + |
| 12 | +## How to use |
| 13 | + |
| 14 | +### Import antd.variable.min.css |
| 15 | + |
| 16 | +Replace your import style file with CSS Variable version: |
| 17 | + |
| 18 | +```diff |
| 19 | +-- import 'ant-design-vue/dist/antd.min.css'; |
| 20 | +++ import 'ant-design-vue/dist/antd.variable.min.css'; |
| 21 | +``` |
| 22 | + |
| 23 | +Note: You need remove `babel-plugin-import` for the dynamic theme. |
| 24 | + |
| 25 | +### Static config |
| 26 | + |
| 27 | +Call ConfigProvider static function to modify theme color: |
| 28 | + |
| 29 | +```ts |
| 30 | +import { ConfigProvider } from 'ant-design-vue'; |
| 31 | + |
| 32 | +ConfigProvider.config({ |
| 33 | + theme: { |
| 34 | + primaryColor: '#25b864', |
| 35 | + }, |
| 36 | +}); |
| 37 | +``` |
| 38 | + |
| 39 | +## Conflict resolve |
| 40 | + |
| 41 | +CSS Variable use `--ant` prefix by default. When exist multiple antd style file in your project, you can modify prefix to fix it. |
| 42 | + |
| 43 | +### Adjust |
| 44 | + |
| 45 | +Modify `prefixCls` on the root of ConfigProvider: |
| 46 | + |
| 47 | +```tsx |
| 48 | +import { ConfigProvider } from 'ant-design-vue'; |
| 49 | + |
| 50 | +export default () => ( |
| 51 | + <ConfigProvider prefixCls="custom"> |
| 52 | + <MyApp /> |
| 53 | + </ConfigProvider> |
| 54 | +); |
| 55 | +``` |
| 56 | + |
| 57 | +Also need call the static function to modify `prefixCls`: |
| 58 | + |
| 59 | +```ts |
| 60 | +ConfigProvider.config({ |
| 61 | + prefixCls: 'custom', |
| 62 | + theme: { |
| 63 | + primaryColor: '#25b864', |
| 64 | + }, |
| 65 | +}); |
| 66 | +``` |
| 67 | + |
| 68 | +### Compile less |
| 69 | + |
| 70 | +Since prefix modified. Origin `antd.variable.css` should also be replaced: |
| 71 | + |
| 72 | +```bash |
| 73 | +lessc --js --modify-var="ant-prefix=custom" ant-design-vue/dist/antd.variable.less modified.css |
| 74 | +``` |
| 75 | + |
| 76 | +### Related changes |
| 77 | + |
| 78 | +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. |
| 79 | + |
| 80 | +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. |
0 commit comments