diff --git a/site/src/router/index.js b/site/src/router/index.js
index 1e38c73bf..a5f286ae8 100644
--- a/site/src/router/index.js
+++ b/site/src/router/index.js
@@ -78,6 +78,17 @@ const routes = [
meta: { enTitle: 'Customize Theme', title: '定制主题', category: 'docs' },
component: () => import('../vueDocs/customize-theme.en-US.md'),
},
+
+ {
+ path: 'vue/customize-theme-variable-cn',
+ meta: { enTitle: 'Dynamic Theme (Experimental)', title: '动态主题', category: 'docs' },
+ component: () => import('../vueDocs/customize-theme-variable.zh-CN.md'),
+ },
+ {
+ path: 'vue/customize-theme-variable',
+ meta: { enTitle: 'Dynamic Theme (Experimental)', title: '动态主题', category: 'docs' },
+ component: () => import('../vueDocs/customize-theme-variable.en-US.md'),
+ },
{
path: 'vue/migration-v2-cn',
meta: { enTitle: 'V1 to V2', title: '从 v1 到 v2', category: 'docs' },
diff --git a/site/src/vueDocs/customize-theme-variable.en-US.md b/site/src/vueDocs/customize-theme-variable.en-US.md
new file mode 100644
index 000000000..1a6901b42
--- /dev/null
+++ b/site/src/vueDocs/customize-theme-variable.en-US.md
@@ -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 () => (
+
+
+
+);
+```
+
+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.
diff --git a/site/src/vueDocs/customize-theme-variable.zh-CN.md b/site/src/vueDocs/customize-theme-variable.zh-CN.md
new file mode 100644
index 000000000..90d244460
--- /dev/null
+++ b/site/src/vueDocs/customize-theme-variable.zh-CN.md
@@ -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 () => (
+
+
+
+);
+```
+
+通过静态方法设置主题色以及对应 `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` 文件而非调用内部文件，因为它们经常会受重构影响。
diff --git a/site/src/vueDocs/customize-theme.en-US.md b/site/src/vueDocs/customize-theme.en-US.md
index 448b1cb2c..994e7eb74 100644
--- a/site/src/vueDocs/customize-theme.en-US.md
+++ b/site/src/vueDocs/customize-theme.en-US.md
@@ -121,6 +121,10 @@ Another approach to customize theme is creating a `less` file within variables t
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
+### Dynamic theme
+
+Runtime update theme color please [ref this doc](/docs/react/customize-theme-variable).
+
## How to avoid modifying global styles?
Currently ant-design-vue is designed as a whole experience and modify global styles (eg `body` etc). If you need to integrate ant-design-vue as a part of an existing website, it's likely you want to prevent ant-design-vue to override global styles.
diff --git a/site/src/vueDocs/customize-theme.zh-CN.md b/site/src/vueDocs/customize-theme.zh-CN.md
index 7dfa6f333..941bf10a0 100644
--- a/site/src/vueDocs/customize-theme.zh-CN.md
+++ b/site/src/vueDocs/customize-theme.zh-CN.md
@@ -121,6 +121,10 @@ module.exports = {
注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
+### 动态主题色
+
+在运行时调整主题色请[参考此处](/docs/vue/customize-theme-variable)。
+
## 没有生效？
注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
diff --git a/site/src/vueDocs/i18n.en-US.md b/site/src/vueDocs/i18n.en-US.md
index fddf0c324..3572d8d4e 100644
--- a/site/src/vueDocs/i18n.en-US.md
+++ b/site/src/vueDocs/i18n.en-US.md
@@ -35,42 +35,71 @@ Note: `fr_FR` is the filename, follow below.
Supported languages:
-| Language | Filename |
-| --------------------- | -------- |
-| Arabic | ar_EG |
-| Bulgarian | bg_BG |
-| Catalan | ca_ES |
-| Czech | cs_CZ |
-| German | de_DE |
-| Greek | el_GR |
-| English (Global) | en_GB |
-| English | en_US |
-| Spanish | es_ES |
-| Estonian | et_EE |
-| Persian | fa_IR |
-| Finnish | fi_FI |
-| French (Belgium) | fr_BE |
-| French (France) | fr_FR |
-| Italian | it_IT |
-| Icelandic | is_IS |
-| Japanese | ja_JP |
-| Korean | ko_KR |
-| Norwegian | nb_NO |
-| Dutch (Belgium) | nl_BE |
-| Dutch | nl_NL |
-| Polish | pl_PL |
-| Portuguese (Brazil) | pt_BR |
-| Portuguese | pt_PT |
-| Slovak | sk_SK |
-| Serbian | sr_RS |
-| Slovenian | sl_SI |
-| Swedish | sv_SE |
-| Thai | th_TH |
-| Turkish | tr_TR |
-| Russian | ru_RU |
-| Ukrainian | uk_UA |
-| Vietnamese | vi_VN |
-| Chinese (Simplified) | zh_CN |
-| Chinese (Traditional) | zh_TW |
+| Language | Filename |
+| ------------------------ | -------- |
+| Arabic | ar_EG |
+| Azerbaijani | az_AZ |
+| Bulgarian | bg_BG |
+| Bangla (Bangladesh) | bn_BD |
+| Belarusian | by_BY |
+| Catalan | ca_ES |
+| Czech | cs_CZ |
+| Danish | da_DK |
+| German | de_DE |
+| Greek | el_GR |
+| English (United Kingdom) | en_GB |
+| English | en_US |
+| Spanish | es_ES |
+| Estonian | et_EE |
+| Persian | fa_IR |
+| Finnish | fi_FI |
+| French (Belgium) | fr_BE |
+| French (Canada) | fr_CA |
+| French (France) | fr_FR |
+| Irish (Ireland) | ga_IE |
+| Galician (Spain) | gl_ES |
+| Hebrew | he_IL |
+| Hindi | hi_IN |
+| Croatian | hr_HR |
+| Hungarian | hu_HU |
+| Armenian | hy_AM |
+| Indonesian | id_ID |
+| Italian | it_IT |
+| Icelandic | is_IS |
+| Japanese | ja_JP |
+| Georgian | ka_GE |
+| Kurdish (Kurmanji) | kmr_IQ |
+| Kannada | kn_IN |
+| Kazakh | kk_KZ |
+| Khmer | km_KH |
+| Korean | ko_KR |
+| Lithuanian | lt_LT |
+| Latvian | lv_LV |
+| Macedonian | mk_MK |
+| Malayalam (India) | ml_IN |
+| Mongolian | mn_MN |
+| Malay (Malaysia) | ms_MY |
+| Norwegian | nb_NO |
+| Nepal | ne_NP |
+| Dutch (Belgium) | nl_BE |
+| Dutch | nl_NL |
+| Polish | pl_PL |
+| Portuguese (Brazil) | pt_BR |
+| Portuguese | pt_PT |
+| Romanian | ro_RO |
+| Russian | ru_RU |
+| Slovak | sk_SK |
+| Serbian | sr_RS |
+| Slovenian | sl_SI |
+| Swedish | sv_SE |
+| Tamil | ta_IN |
+| Thai | th_TH |
+| Turkish | tr_TR |
+| Urdu (Pakistan) | ur_PK |
+| Ukrainian | uk_UA |
+| Vietnamese | vi_VN |
+| Chinese (Simplified) | zh_CN |
+| Chinese (Traditional) | zh_HK |
+| Chinese (Traditional) | zh_TW |
See usage at [ConfigProvider](/components/config-provider).
diff --git a/site/src/vueDocs/i18n.zh-CN.md b/site/src/vueDocs/i18n.zh-CN.md
index 86d84bcbd..20b4cff89 100644
--- a/site/src/vueDocs/i18n.zh-CN.md
+++ b/site/src/vueDocs/i18n.zh-CN.md
@@ -35,42 +35,71 @@ ant-design-vue 提供了一个 Vue 组件 [ConfigProvider](/components/config-pr
目前支持以下语言：
-| 语言 | 文件名 |
-| ---------------- | ------ |
-| 阿拉伯 | ar_EG |
-| 保加利亚语 | bg_BG |
-| 加泰罗尼亚语 | ca_ES |
-| 捷克语 | cs_CZ |
-| 德语 | de_DE |
-| 希腊语 | el_GR |
-| 英语 | en_GB |
-| 英语（美式） | en_US |
-| 西班牙语 | es_ES |
-| 爱沙尼亚语 | et_EE |
-| 波斯语 | fa_IR |
-| 芬兰语 | fi_FI |
-| 法语（比利时） | fr_BE |
-| 法语 | fr_FR |
-| 冰岛语 | is_IS |
-| 意大利语 | it_IT |
-| 日语 | ja_JP |
-| 韩语/朝鲜语 | ko_KR |
-| 挪威 | nb_NO |
-| 荷兰语（比利时） | nl_BE |
-| 荷兰语 | nl_NL |
-| 波兰语 | pl_PL |
-| 葡萄牙语(巴西) | pt_BR |
-| 葡萄牙语 | pt_PT |
-| 斯洛伐克语 | sk_SK |
-| 塞尔维亚 | sr_RS |
-| 斯洛文尼亚 | sl_SI |
-| 瑞典语 | sv_SE |
-| 泰语 | th_TH |
-| 土耳其语 | tr_TR |
-| 俄罗斯语 | ru_RU |
-| 乌克兰语 | uk_UA |
-| 越南语 | vi_VN |
-| 简体中文 | zh_CN |
-| 繁体中文 | zh_TW |
+| 语言 | 文件名 |
+| -------------------- | ------ |
+| 阿拉伯语 | ar_EG |
+| 阿塞拜疆语 | az_AZ |
+| 保加利亚语 | bg_BG |
+| 孟加拉语（孟加拉国） | bn_BD |
+| 白俄罗斯语 | by_BY |
+| 加泰罗尼亚语 | ca_ES |
+| 捷克语 | cs_CZ |
+| 丹麦语 | da_DK |
+| 德语 | de_DE |
+| 希腊语 | el_GR |
+| 英语 | en_GB |
+| 英语（美式） | en_US |
+| 西班牙语 | es_ES |
+| 爱沙尼亚语 | et_EE |
+| 波斯语 | fa_IR |
+| 芬兰语 | fi_FI |
+| 法语（比利时） | fr_BE |
+| 法语（加拿大） | fr_CA |
+| 法语（法国） | fr_FR |
+| 爱尔兰语 | ga_IE |
+| 加利西亚语（西班牙） | gl_ES |
+| 希伯来语 | he_IL |
+| 印地语 | hi_IN |
+| 克罗地亚语 | hr_HR |
+| 匈牙利语 | hu_HU |
+| 亚美尼亚 | hy_AM |
+| 印度尼西亚语 | id_ID |
+| 意大利语 | it_IT |
+| 冰岛语 | is_IS |
+| 日语 | ja_JP |
+| 格鲁吉亚语 | ka_GE |
+| 高棉语 | km_KH |
+| 北库尔德语 | kmr_IQ |
+| 卡纳达语 | kn_IN |
+| 哈萨克语 | kk_KZ |
+| 韩语/朝鲜语 | ko_KR |
+| 立陶宛语 | lt_LT |
+| 拉脱维亚语 | lv_LV |
+| 马其顿语 | mk_MK |
+| 马拉雅拉姆语 | ml_IN |
+| 蒙古语 | mn_MN |
+| 马来语 (马来西亚) | ms_MY |
+| 挪威语 | nb_NO |
+| 尼泊尔语 | ne_NP |
+| 荷兰语（比利时） | nl_BE |
+| 荷兰语 | nl_NL |
+| 波兰语 | pl_PL |
+| 葡萄牙语(巴西) | pt_BR |
+| 葡萄牙语 | pt_PT |
+| 罗马尼亚语 | ro_RO |
+| 俄罗斯语 | ru_RU |
+| 斯洛伐克语 | sk_SK |
+| 塞尔维亚语 | sr_RS |
+| 斯洛文尼亚语 | sl_SI |
+| 瑞典语 | sv_SE |
+| 泰米尔语 | ta_IN |
+| 泰语 | th_TH |
+| 土耳其语 | tr_TR |
+| 乌尔都语 (巴基斯坦) | ur_PK |
+| 乌克兰语 | uk_UA |
+| 越南语 | vi_VN |
+| 简体中文 | zh_CN |
+| 繁体中文（中国香港） | zh_HK |
+| 繁体中文（中国台湾） | zh_TW |
具体的使用方法请参考 [ConfigProvider 文档](/components/config-provider-cn)。