mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
36bcaaef85
* chore: use varaible.less * chore: basic primary varaible * chore: Move to variable * chore: align active color * chore: global fix of css variable * chore: primary colors * chore: button danger * chore: btn default error color * chore: button series * chore: More examples * chore: More components * chore: Form demo * chore: form style * fix: Tag & Alert variable * chore: update footer * chore: rm tmp code * chore: transfer * fix: picker column active color * chore: Adjust active bg color * chore: table hover color * chore: all css variables * chore: Global using variables * chore: Test case * chore: Update test logic * chore: back of default less * chore: entry of site use proxy style * chore: update entry * chore: split of variables * refactor: quick dist speed * fix: site use variable version * chore: Update less config * chore: add mv script * chore: Update repalcement script * chore: Add inject variables * chore: Update script * fix: script path * chore: Move to component instead * chore: fix condition * chore: update config * chore: Update in less transform * chore: Modify logic * chore: change to variables * chore: Update name * fix: script name * chore: do inject * revert: back of path * chore: 2 way of generate * bump tools * chore: Add auto replacement script * chore: auto genrate less file * chore: fix test * test: More test case * chore: Update limit config * test: coverage * docs: Update doc
73 lines
1.5 KiB
Markdown
73 lines
1.5 KiB
Markdown
---
|
|
order: 7.1
|
|
title: Dynamic Theme (experience)
|
|
---
|
|
|
|
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.
|
|
|
|
## 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:
|
|
|
|
```diff
|
|
-- import 'antd/dist/antd.min.css';
|
|
++ import 'antd/dist/antd.variable.min.css';
|
|
```
|
|
|
|
### Static config
|
|
|
|
Call ConfigProvider static function to modify theme color:
|
|
|
|
```ts
|
|
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:
|
|
|
|
```tsx
|
|
import { ConfigProvider } from 'antd';
|
|
|
|
export default () => (
|
|
<ConfigProvider prefixCls="custom">
|
|
<MyApp />
|
|
</ConfigProvider>
|
|
);
|
|
```
|
|
|
|
Also need call the static function to modify `prefixCls`:
|
|
|
|
```ts
|
|
ConfigProvider.config({
|
|
theme: {
|
|
prefixCls: 'custom',
|
|
primaryColor: '#25b864',
|
|
},
|
|
});
|
|
```
|
|
|
|
### Compile less
|
|
|
|
Since prefix modified. Origin `antd.variable.css` should also be replaced:
|
|
|
|
```bash
|
|
lessc --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
|
|
```
|