tangjinzhou
3 years ago
7 changed files with 311 additions and 74 deletions
@ -0,0 +1,80 @@
|
||||
--- |
||||
order: 7.1 |
||||
title: Dynamic Theme (Experimental) |
||||
--- |
||||
|
||||
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. |
||||
|
||||
## Caveats |
||||
|
||||
- This function requires at least `ant-design-vue@3.1.0-beta.0`. |
||||
|
||||
## How to use |
||||
|
||||
### Import antd.variable.min.css |
||||
|
||||
Replace your import style file with CSS Variable version: |
||||
|
||||
```diff |
||||
-- import 'ant-design-vue/dist/antd.min.css'; |
||||
++ import 'ant-design-vue/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: |
||||
|
||||
```ts |
||||
import { ConfigProvider } from 'ant-design-vue'; |
||||
|
||||
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 'ant-design-vue'; |
||||
|
||||
export default () => ( |
||||
<ConfigProvider prefixCls="custom"> |
||||
<MyApp /> |
||||
</ConfigProvider> |
||||
); |
||||
``` |
||||
|
||||
Also need call the static function to modify `prefixCls`: |
||||
|
||||
```ts |
||||
ConfigProvider.config({ |
||||
prefixCls: 'custom', |
||||
theme: { |
||||
primaryColor: '#25b864', |
||||
}, |
||||
}); |
||||
``` |
||||
|
||||
### Compile less |
||||
|
||||
Since prefix modified. Origin `antd.variable.css` should also be replaced: |
||||
|
||||
```bash |
||||
lessc --js --modify-var="ant-prefix=custom" ant-design-vue/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. |
||||
@ -0,0 +1,80 @@
|
||||
--- |
||||
order: 7.1 |
||||
title: 动态主题（实验性） |
||||
--- |
||||
|
||||
除了 [less 定制主题](/docs/vue/customize-theme) 外，我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) 进行体验。 |
||||
|
||||
## 注意事项 |
||||
|
||||
- 该功能在 `ant-design-vue@3.1.0-beta.0` 版本起支持。 |
||||
|
||||
## 如何使用 |
||||
|
||||
### 引入 antd.variable.min.css |
||||
|
||||
替换当前项目引入样式文件为 CSS Variable 版本： |
||||
|
||||
```diff |
||||
-- import 'ant-design-vue/dist/antd.min.css'; |
||||
++ import 'ant-design-vue/dist/antd.variable.min.css'; |
||||
``` |
||||
|
||||
注：如果你使用了 `babel-plugin-import`，需要将其去除。 |
||||
|
||||
### 静态方法配置 |
||||
|
||||
调用 ConfigProvider 配置方法设置主题色： |
||||
|
||||
```ts |
||||
import { ConfigProvider } from 'ant-design-vue'; |
||||
|
||||
ConfigProvider.config({ |
||||
theme: { |
||||
primaryColor: '#25b864', |
||||
}, |
||||
}); |
||||
``` |
||||
|
||||
## 冲突解决 |
||||
|
||||
默认情况下，CSS Variable 会以 `--ant` 作为前缀。当你的项目中引用多份 css 文件时，可以通过修改前缀的方式避免冲突。 |
||||
|
||||
### 代码调整 |
||||
|
||||
通过 ConfigProvider 在顶层修改 `prefixCls`： |
||||
|
||||
```tsx |
||||
import { ConfigProvider } from 'ant-design-vue'; |
||||
|
||||
export default () => ( |
||||
<ConfigProvider prefixCls="custom"> |
||||
<MyApp /> |
||||
</ConfigProvider> |
||||
); |
||||
``` |
||||
|
||||
通过静态方法设置主题色以及对应 `prefixCls`： |
||||
|
||||
```ts |
||||
ConfigProvider.config({ |
||||
prefixCls: 'custom', |
||||
theme: { |
||||
primaryColor: '#25b864', |
||||
}, |
||||
}); |
||||
``` |
||||
|
||||
### 编译 less |
||||
|
||||
由于前缀变更，你需要重新生成一份对应的 css 文件。 |
||||
|
||||
```bash |
||||
lessc --js --modify-var="ant-prefix=custom" ant-design-vue/dist/antd.variable.less modified.css |
||||
``` |
||||
|
||||
### 相关变更 |
||||
|
||||
为了实现 CSS Variable 并保持原始用法兼容性，我们于 `dist/antd.xxx.less` 文件中添加了 `@root-entry-name: xxx;` 入口注入以支持 less 动态加载对应的 less 文件。一般情况下，你不需要关注该变化。但是，如果你的项目中直接引用了 `lib|es` 目录下的 less 文件。你需要在 less 入口处配置 `@root-entry-name: default;` （或者 `@root-entry-name: variable;`）以使 less 可以找到正确的入口。 |
||||
|
||||
此外，我们将 `lib|es/style/minxins/index.less` 中的 `@import 'motion'` 和 `@import 'reset'` 迁移至了 `lib|es/style/themes/xxx.less` 中，因为这两个文件依赖了主题相关变量。如果你使用了相关内部方法，请自行调整。当然，我们还是建议直接使用 `dist` 目录下的 `antd.less` 文件而非调用内部文件，因为它们经常会受重构影响。 |
||||
Loading…
Reference in new issue