diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md
index 1082eb564..59da82e69 100644
--- a/docs/markdown/theme.en-US.md
+++ b/docs/markdown/theme.en-US.md
@@ -2,21 +2,81 @@
 
 ### Intro
 
-Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
+Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme.
 
 ### Less variables
 
-Vant use [Less](http://lesscss.org/) as css preprocessor，you can modify less variables to custom theme.
-
 There are some basic variables below, all available variables could be found in [var.less](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
 
 ```less
+// Color Palette
+@black: #000;
+@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
+@red: #ee0a24;
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
 // Component Colors
-@text-color: #323233;
-@border-color: #ebedf0;
-@active-color: #f2f3f5;
-@background-color: #f7f8fa;
+@text-color: @gray-8;
+@active-color: @gray-2;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
+@background-color: @gray-1;
 @background-color-light: #fafafa;
+@text-link-color: #576b95;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+@line-height-xs: 14px;
+@line-height-sm: 18px;
+@line-height-md: 20px;
+@line-height-lg: 22px;
+@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
+  'Microsoft Yahei', sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+  sans-serif;
+
+// Animation
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
+@animation-timing-function-enter: ease-out;
+@animation-timing-function-leave: ease-in;
+
+// Border
+@border-color: @gray-3;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-lg: 8px;
+@border-radius-max: 999px;
 ```
 
 ## How to custom theme
diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
index bc62ba87f..493423fc3 100644
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -2,7 +2,7 @@
 
 ### 介绍
 
-Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。
+Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
 
 ### 示例工程
 
@@ -12,15 +12,77 @@ Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用
 
 Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
 
-下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
+下面是所有的基础样式变量，组件的颜色变量请参考各个组件的文档或[配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
 
 ```less
+// Color Palette
+@black: #000;
+@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
+@red: #ee0a24;
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
 // Component Colors
-@text-color: #323233;
-@border-color: #ebedf0;
-@active-color: #f2f3f5;
-@background-color: #f7f8fa;
+@text-color: @gray-8;
+@active-color: @gray-2;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
+@background-color: @gray-1;
 @background-color-light: #fafafa;
+@text-link-color: #576b95;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+@line-height-xs: 14px;
+@line-height-sm: 18px;
+@line-height-md: 20px;
+@line-height-lg: 22px;
+@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
+  'Microsoft Yahei', sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+  sans-serif;
+
+// Animation
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
+@animation-timing-function-enter: ease-out;
+@animation-timing-function-leave: ease-in;
+
+// Border
+@border-color: @gray-3;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-lg: 8px;
+@border-radius-max: 999px;
 ```
 
 ## 定制方法
diff --git a/src/action-bar/README.md b/src/action-bar/README.md
index da8d84b75..06531f5e7 100644
--- a/src/action-bar/README.md
+++ b/src/action-bar/README.md
@@ -126,3 +126,22 @@ Use `badge` prop to show badge in icon.
 | Name    | Description    |
 | ------- | -------------- |
 | default | Button content |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                               | Default Value      | Description |
+| ---------------------------------- | ------------------ | ----------- |
+| @goods-action-background-color     | `@white`           | -           |
+| @goods-action-height               | `50px`             | -           |
+| @goods-action-icon-width           | `48px`             | -           |
+| @goods-action-icon-height          | `100%`             | -           |
+| @goods-action-icon-color           | `@text-color`      | -           |
+| @goods-action-icon-size            | `18px`             | -           |
+| @goods-action-icon-font-size       | `@font-size-xs`    | -           |
+| @goods-action-icon-active-color    | `@active-color`    | -           |
+| @goods-action-icon-text-color      | `@gray-7`          | -           |
+| @goods-action-button-height        | `40px`             | -           |
+| @goods-action-button-warning-color | `@gradient-orange` | -           |
+| @goods-action-button-danger-color  | `@gradient-red`    | -           |
diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md
index e7d04c2a3..0beee6698 100644
--- a/src/action-bar/README.zh-CN.md
+++ b/src/action-bar/README.zh-CN.md
@@ -106,7 +106,7 @@ export default {
 ### ActionBarButton Props
 
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | text | 按钮文字 | _string_ | - |
 | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
 | color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
@@ -129,3 +129,22 @@ export default {
 | 名称    | 说明         |
 | ------- | ------------ |
 | default | 按钮显示内容 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                               | 默认值             | 描述 |
+| ---------------------------------- | ------------------ | ---- |
+| @goods-action-background-color     | `@white`           | -    |
+| @goods-action-height               | `50px`             | -    |
+| @goods-action-icon-width           | `48px`             | -    |
+| @goods-action-icon-height          | `100%`             | -    |
+| @goods-action-icon-color           | `@text-color`      | -    |
+| @goods-action-icon-size            | `18px`             | -    |
+| @goods-action-icon-font-size       | `@font-size-xs`    | -    |
+| @goods-action-icon-active-color    | `@active-color`    | -    |
+| @goods-action-icon-text-color      | `@gray-7`          | -    |
+| @goods-action-button-height        | `40px`             | -    |
+| @goods-action-button-warning-color | `@gradient-orange` | -    |
+| @goods-action-button-danger-color  | `@gradient-red`    | -    |
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 1aea3105c..e96e4d4bd 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -198,3 +198,32 @@ export default {
 | --------------------- | ------------------ |
 | default               | Custom content     |
 | description `v2.10.4` | Custom description |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                   | Default Value       | Description |
+| -------------------------------------- | ------------------- | ----------- |
+| @action-sheet-max-height               | `80%`               | -           |
+| @action-sheet-header-height            | `48px`              | -           |
+| @action-sheet-header-font-size         | `@font-size-lg`     | -           |
+| @action-sheet-description-color        | `@gray-6`           | -           |
+| @action-sheet-description-font-size    | `@font-size-md`     | -           |
+| @action-sheet-description-line-height  | `@line-height-md`   | -           |
+| @action-sheet-item-background          | `@white`            | -           |
+| @action-sheet-item-font-size           | `@font-size-lg`     | -           |
+| @action-sheet-item-line-height         | `@line-height-lg`   | -           |
+| @action-sheet-item-text-color          | `@text-color`       | -           |
+| @action-sheet-item-disabled-text-color | `@gray-5`           | -           |
+| @action-sheet-subname-color            | `@gray-6`           | -           |
+| @action-sheet-subname-font-size        | `@font-size-sm`     | -           |
+| @action-sheet-subname-line-height      | `@line-height-sm`   | -           |
+| @action-sheet-close-icon-size          | `22px`              | -           |
+| @action-sheet-close-icon-color         | `@gray-5`           | -           |
+| @action-sheet-close-icon-active-color  | `@gray-6`           | -           |
+| @action-sheet-close-icon-padding       | `0 @padding-md`     | -           |
+| @action-sheet-cancel-text-color        | `@gray-7`           | -           |
+| @action-sheet-cancel-padding-top       | `@padding-xs`       | -           |
+| @action-sheet-cancel-padding-color     | `@background-color` | -           |
+| @action-sheet-loading-icon-size        | `22px`              | -           |
diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md
index 2fc01ebfa..278d5e5b1 100644
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@@ -207,6 +207,35 @@ export default {
 | default               | 自定义面板的展示内容 |
 | description `v2.10.4` | 自定义描述文案       |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                   | 默认值              | 描述 |
+| -------------------------------------- | ------------------- | ---- |
+| @action-sheet-max-height               | `80%`               | -    |
+| @action-sheet-header-height            | `48px`              | -    |
+| @action-sheet-header-font-size         | `@font-size-lg`     | -    |
+| @action-sheet-description-color        | `@gray-6`           | -    |
+| @action-sheet-description-font-size    | `@font-size-md`     | -    |
+| @action-sheet-description-line-height  | `@line-height-md`   | -    |
+| @action-sheet-item-background          | `@white`            | -    |
+| @action-sheet-item-font-size           | `@font-size-lg`     | -    |
+| @action-sheet-item-line-height         | `@line-height-lg`   | -    |
+| @action-sheet-item-text-color          | `@text-color`       | -    |
+| @action-sheet-item-disabled-text-color | `@gray-5`           | -    |
+| @action-sheet-subname-color            | `@gray-6`           | -    |
+| @action-sheet-subname-font-size        | `@font-size-sm`     | -    |
+| @action-sheet-subname-line-height      | `@line-height-sm`   | -    |
+| @action-sheet-close-icon-size          | `22px`              | -    |
+| @action-sheet-close-icon-color         | `@gray-5`           | -    |
+| @action-sheet-close-icon-active-color  | `@gray-6`           | -    |
+| @action-sheet-close-icon-padding       | `0 @padding-md`     | -    |
+| @action-sheet-cancel-text-color        | `@gray-7`           | -    |
+| @action-sheet-cancel-padding-top       | `@padding-xs`       | -    |
+| @action-sheet-cancel-padding-color     | `@background-color` | -    |
+| @action-sheet-loading-icon-size        | `22px`              | -    |
+
 ## 常见问题
 
 ### 引入时提示 dependencies not found？
diff --git a/src/address-edit/README.md b/src/address-edit/README.md
index 604e097cd..ecbca56f9 100644
--- a/src/address-edit/README.md
+++ b/src/address-edit/README.md
@@ -144,3 +144,15 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Addres
 ### Area Data Structure
 
 Please refer to [Area](#/en-US/area) component。
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @address-edit-padding | `@padding-sm` | - |
+| @address-edit-buttons-padding | `@padding-xl @padding-base` | - |
+| @address-edit-button-margin-bottom | `@padding-sm` | - |
+| @address-edit-detail-finish-color | `@blue` | - |
+| @address-edit-detail-finish-font-size | `@font-size-sm` | - |
diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md
index 808c85417..d1accc9ec 100644
--- a/src/address-edit/README.zh-CN.md
+++ b/src/address-edit/README.zh-CN.md
@@ -150,3 +150,15 @@ export default {
 ### 省市县列表数据格式
 
 请参考 [Area](#/zh-CN/area) 组件。
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                  | 默认值                      | 描述 |
+| ------------------------------------- | --------------------------- | ---- |
+| @address-edit-padding                 | `@padding-sm`               | -    |
+| @address-edit-buttons-padding         | `@padding-xl @padding-base` | -    |
+| @address-edit-button-margin-bottom    | `@padding-sm`               | -    |
+| @address-edit-detail-finish-color     | `@blue`                     | -    |
+| @address-edit-detail-finish-font-size | `@font-size-sm`             | -    |
diff --git a/src/address-list/README.md b/src/address-list/README.md
index a7e36a2bb..c4b41a5cb 100644
--- a/src/address-list/README.md
+++ b/src/address-list/README.md
@@ -111,3 +111,23 @@ export default {
 | default              | Custom content after list      | -         |
 | top                  | Custom content before list     | -         |
 | item-bottom `v2.5.0` | Custom content after list item | item      |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @address-list-padding | `@padding-sm @padding-sm 80px` | - |
+| @address-list-disabled-text-color | `@gray-6` | - |
+| @address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - |
+| @address-list-disabled-text-font-size | `@font-size-md` | - |
+| @address-list-disabled-text-line-height | `@line-height-md` | - |
+| @address-list-add-button-z-index | `999` | - |
+| @address-list-item-padding | `@padding-sm` | - |
+| @address-list-item-text-color | `@text-color` | - |
+| @address-list-item-disabled-text-color | `@gray-5` | - |
+| @address-list-item-font-size | `13px` | - |
+| @address-list-item-line-height | `@line-height-sm` | - |
+| @address-list-item-radio-icon-color | `@red` | - |
+| @address-list-edit-icon-size | `20px` | - |
diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md
index a6fff4fae..6497de187 100644
--- a/src/address-list/README.zh-CN.md
+++ b/src/address-list/README.zh-CN.md
@@ -115,3 +115,23 @@ export default {
 | default              | 在列表下方插入内容   | -          |
 | top                  | 在顶部插入内容       | -          |
 | item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @address-list-padding | `@padding-sm @padding-sm 80px` | - |
+| @address-list-disabled-text-color | `@gray-6` | - |
+| @address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - |
+| @address-list-disabled-text-font-size | `@font-size-md` | - |
+| @address-list-disabled-text-line-height | `@line-height-md` | - |
+| @address-list-add-button-z-index | `999` | - |
+| @address-list-item-padding | `@padding-sm` | - |
+| @address-list-item-text-color | `@text-color` | - |
+| @address-list-item-disabled-text-color | `@gray-5` | - |
+| @address-list-item-font-size | `13px` | - |
+| @address-list-item-line-height | `@line-height-sm` | - |
+| @address-list-item-radio-icon-color | `@red` | - |
+| @address-list-edit-icon-size | `20px` | - |
diff --git a/src/badge/README.md b/src/badge/README.md
index 6cc4b3e63..afe329436 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -76,3 +76,20 @@ app.use(Badge);
 | Name    | Description  |
 | ------- | ------------ |
 | default | Default slot |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @badge-size | `16px` | - |
+| @badge-color | `@white` | - |
+| @badge-padding | `0 3px` | - |
+| @badge-font-size | `@font-size-sm` | - |
+| @badge-font-weight | `@font-weight-bold` | - |
+| @badge-border-width | `@border-width-base` | - |
+| @badge-background-color | `@red` | - |
+| @badge-dot-color | `@red` | - |
+| @badge-dot-size | `8px` | - |
+| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |
diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md
index 0bea13e48..fee1ce4e3 100644
--- a/src/badge/README.zh-CN.md
+++ b/src/badge/README.zh-CN.md
@@ -89,3 +89,20 @@ app.use(Badge);
 | ------- | ---------------- |
 | default | 徽标包裹的子元素 |
 | content | 自定义徽标内容   |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @badge-size | `16px` | - |
+| @badge-color | `@white` | - |
+| @badge-padding | `0 3px` | - |
+| @badge-font-size | `@font-size-sm` | - |
+| @badge-font-weight | `@font-weight-bold` | - |
+| @badge-border-width | `@border-width-base` | - |
+| @badge-background-color | `@red` | - |
+| @badge-dot-color | `@red` | - |
+| @badge-dot-size | `8px` | - |
+| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |
diff --git a/src/badge/index.js b/src/badge/index.js
new file mode 100644
index 000000000..652e5184b
--- /dev/null
+++ b/src/badge/index.js
@@ -0,0 +1,69 @@
+import { isDef, createNamespace } from '../utils';
+import { isNumeric } from '../utils/validate/number';
+
+const [createComponent, bem] = createNamespace('badge');
+
+export default createComponent({
+  props: {
+    dot: Boolean,
+    max: [Number, String],
+    color: String,
+    content: [Number, String],
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  methods: {
+    hasContent() {
+      return !!(
+        this.$scopedSlots.content ||
+        (isDef(this.content) && this.content !== '')
+      );
+    },
+
+    renderContent() {
+      const { dot, max, content } = this;
+
+      if (!dot && this.hasContent()) {
+        if (this.$scopedSlots.content) {
+          return this.$scopedSlots.content();
+        }
+
+        if (isDef(max) && isNumeric(content) && +content > max) {
+          return `${max}+`;
+        }
+
+        return content;
+      }
+    },
+
+    renderBadge() {
+      if (this.hasContent() || this.dot) {
+        return (
+          <div
+            class={bem({ dot: this.dot, fixed: !!this.$scopedSlots.default })}
+            style={{ background: this.color }}
+          >
+            {this.renderContent()}
+          </div>
+        );
+      }
+    },
+  },
+
+  render() {
+    if (this.$scopedSlots.default) {
+      const { tag } = this;
+      return (
+        <tag class={bem('wrapper')}>
+          {this.$scopedSlots.default()}
+          {this.renderBadge()}
+        </tag>
+      );
+    }
+
+    return this.renderBadge();
+  },
+});
diff --git a/src/button/README.md b/src/button/README.md
index 757cf942c..7a2ad1edd 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -141,3 +141,39 @@ app.use(Button);
 | ----------------- | ------------------- |
 | default           | Default slot        |
 | loading `v2.10.1` | Custom loading icon |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value        | Description |
+| -------------------------------- | -------------------- | ----------- |
+| @button-mini-height              | `24px`               | -           |
+| @button-mini-font-size           | `@font-size-xs`      | -           |
+| @button-small-height             | `32px`               | -           |
+| @button-small-font-size          | `@font-size-sm`      | -           |
+| @button-normal-font-size         | `@font-size-md`      | -           |
+| @button-large-height             | `50px`               | -           |
+| @button-default-height           | `44px`               | -           |
+| @button-default-line-height      | `1.2`                | -           |
+| @button-default-font-size        | `@font-size-lg`      | -           |
+| @button-default-color            | `@text-color`        | -           |
+| @button-default-background-color | `@white`             | -           |
+| @button-default-border-color     | `@border-color`      | -           |
+| @button-primary-color            | `@white`             | -           |
+| @button-primary-background-color | `@green`             | -           |
+| @button-primary-border-color     | `@green`             | -           |
+| @button-info-color               | `@white`             | -           |
+| @button-info-background-color    | `@blue`              | -           |
+| @button-info-border-color        | `@blue`              | -           |
+| @button-danger-color             | `@white`             | -           |
+| @button-danger-background-color  | `@red`               | -           |
+| @button-danger-border-color      | `@red`               | -           |
+| @button-warning-color            | `@white`             | -           |
+| @button-warning-background-color | `@orange`            | -           |
+| @button-warning-border-color     | `@orange`            | -           |
+| @button-border-width             | `@border-width-base` | -           |
+| @button-border-radius            | `@border-radius-sm`  | -           |
+| @button-round-border-radius      | `@border-radius-max` | -           |
+| @button-plain-background-color   | `@white`             | -           |
+| @button-disabled-opacity         | `@disabled-opacity`  | -           |
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index c65973976..a1485ac3a 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -168,3 +168,39 @@ app.use(Button);
 | ----------------- | -------------- |
 | default           | 按钮内容       |
 | loading `v2.10.1` | 自定义加载图标 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值               | 描述 |
+| -------------------------------- | -------------------- | ---- |
+| @button-mini-height              | `24px`               | -    |
+| @button-mini-font-size           | `@font-size-xs`      | -    |
+| @button-small-height             | `32px`               | -    |
+| @button-small-font-size          | `@font-size-sm`      | -    |
+| @button-normal-font-size         | `@font-size-md`      | -    |
+| @button-large-height             | `50px`               | -    |
+| @button-default-height           | `44px`               | -    |
+| @button-default-line-height      | `1.2`                | -    |
+| @button-default-font-size        | `@font-size-lg`      | -    |
+| @button-default-color            | `@text-color`        | -    |
+| @button-default-background-color | `@white`             | -    |
+| @button-default-border-color     | `@border-color`      | -    |
+| @button-primary-color            | `@white`             | -    |
+| @button-primary-background-color | `@green`             | -    |
+| @button-primary-border-color     | `@green`             | -    |
+| @button-info-color               | `@white`             | -    |
+| @button-info-background-color    | `@blue`              | -    |
+| @button-info-border-color        | `@blue`              | -    |
+| @button-danger-color             | `@white`             | -    |
+| @button-danger-background-color  | `@red`               | -    |
+| @button-danger-border-color      | `@red`               | -    |
+| @button-warning-color            | `@white`             | -    |
+| @button-warning-background-color | `@orange`            | -    |
+| @button-warning-border-color     | `@orange`            | -    |
+| @button-border-width             | `@border-width-base` | -    |
+| @button-border-radius            | `@border-radius-sm`  | -    |
+| @button-round-border-radius      | `@border-radius-max` | -    |
+| @button-plain-background-color   | `@white`             | -    |
+| @button-disabled-opacity         | `@disabled-opacity`  | -    |
diff --git a/src/calendar/README.md b/src/calendar/README.md
index e9507db14..9a8ad000c 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -318,3 +318,35 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Calend
 | Name  | Description                         | Attribute | Return value |
 | ----- | ----------------------------------- | --------- | ------------ |
 | reset | Reset selected date to default date | -         | -            |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @calendar-background-color | `@white` | - |
+| @calendar-popup-height | `80%` | - |
+| @calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - |
+| @calendar-header-title-height | `44px` | - |
+| @calendar-header-title-font-size | `@font-size-lg` | - |
+| @calendar-header-subtitle-font-size | `@font-size-md` | - |
+| @calendar-weekdays-height | `30px` | - |
+| @calendar-weekdays-font-size | `@font-size-sm` | - |
+| @calendar-month-title-font-size | `@font-size-md` | - |
+| @calendar-month-mark-color | `fade(@gray-2, 80%)` | - |
+| @calendar-month-mark-font-size | `160px` | - |
+| @calendar-day-height | `64px` | - |
+| @calendar-day-font-size | `@font-size-lg` | - |
+| @calendar-range-edge-color | `@white` | - |
+| @calendar-range-edge-background-color | `@red` | - |
+| @calendar-range-middle-color | `@red` | - |
+| @calendar-range-middle-background-opacity | `0.1` | - |
+| @calendar-selected-day-size | `54px` | - |
+| @calendar-selected-day-color | `@white` | - |
+| @calendar-info-font-size | `@font-size-xs` | - |
+| @calendar-info-line-height | `@line-height-xs` | - |
+| @calendar-selected-day-background-color | `@red` | - |
+| @calendar-day-disabled-color | `@gray-5` | - |
+| @calendar-confirm-button-height | `36px` | - |
+| @calendar-confirm-button-margin | `7px 0` | - |
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 9fa9f6aff..1de8333b6 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -323,6 +323,38 @@ export default {
 | ------ | ---------------------- | ---- | ------ |
 | reset  | 重置选中的日期到默认值 | -    | -      |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @calendar-background-color | `@white` | - |
+| @calendar-popup-height | `80%` | - |
+| @calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - |
+| @calendar-header-title-height | `44px` | - |
+| @calendar-header-title-font-size | `@font-size-lg` | - |
+| @calendar-header-subtitle-font-size | `@font-size-md` | - |
+| @calendar-weekdays-height | `30px` | - |
+| @calendar-weekdays-font-size | `@font-size-sm` | - |
+| @calendar-month-title-font-size | `@font-size-md` | - |
+| @calendar-month-mark-color | `fade(@gray-2, 80%)` | - |
+| @calendar-month-mark-font-size | `160px` | - |
+| @calendar-day-height | `64px` | - |
+| @calendar-day-font-size | `@font-size-lg` | - |
+| @calendar-range-edge-color | `@white` | - |
+| @calendar-range-edge-background-color | `@red` | - |
+| @calendar-range-middle-color | `@red` | - |
+| @calendar-range-middle-background-opacity | `0.1` | - |
+| @calendar-selected-day-size | `54px` | - |
+| @calendar-selected-day-color | `@white` | - |
+| @calendar-info-font-size | `@font-size-xs` | - |
+| @calendar-info-line-height | `@line-height-xs` | - |
+| @calendar-selected-day-background-color | `@red` | - |
+| @calendar-day-disabled-color | `@gray-5` | - |
+| @calendar-confirm-button-height | `36px` | - |
+| @calendar-confirm-button-margin | `7px 0` | - |
+
 ## 常见问题
 
 ### 在 iOS 系统上初始化组件失败？
diff --git a/src/card/README.md b/src/card/README.md
index d88984a32..df2985f85 100644
--- a/src/card/README.md
+++ b/src/card/README.md
@@ -101,3 +101,26 @@ Use slot to custom content.
 | tag          | Custom thumb tag    |
 | tags         | Custom tags         |
 | footer       | Custom footer       |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                          | Default Value                | Description |
+| ----------------------------- | ---------------------------- | ----------- |
+| @card-padding                 | `@padding-xs @padding-md`    | -           |
+| @card-font-size               | `@font-size-sm`              | -           |
+| @card-text-color              | `@text-color`                | -           |
+| @card-background-color        | `@background-color-light`    | -           |
+| @card-thumb-size              | `88px`                       | -           |
+| @card-thumb-border-radius     | `@border-radius-lg`          | -           |
+| @card-title-line-height       | `16px`                       | -           |
+| @card-desc-color              | `@gray-7`                    | -           |
+| @card-desc-line-height        | `@line-height-md`            | -           |
+| @card-price-color             | `@gray-8`                    | -           |
+| @card-origin-price-color      | `@gray-6`                    | -           |
+| @card-num-color               | `@gray-6`                    | -           |
+| @card-origin-price-font-size  | `@font-size-xs`              | -           |
+| @card-price-font-size         | `@font-size-sm`              | -           |
+| @card-price-integer-font-size | `@font-size-lg`              | -           |
+| @card-price-font-family       | `@price-integer-font-family` | -           |
diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md
index ad2bf8a9b..7d1ffcba7 100644
--- a/src/card/README.zh-CN.md
+++ b/src/card/README.zh-CN.md
@@ -107,3 +107,26 @@ app.use(Card);
 | tag          | 自定义图片角标         |
 | tags         | 自定义描述下方标签区域 |
 | footer       | 自定义右下角内容       |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                          | 默认值                       | 描述 |
+| ----------------------------- | ---------------------------- | ---- |
+| @card-padding                 | `@padding-xs @padding-md`    | -    |
+| @card-font-size               | `@font-size-sm`              | -    |
+| @card-text-color              | `@text-color`                | -    |
+| @card-background-color        | `@background-color-light`    | -    |
+| @card-thumb-size              | `88px`                       | -    |
+| @card-thumb-border-radius     | `@border-radius-lg`          | -    |
+| @card-title-line-height       | `16px`                       | -    |
+| @card-desc-color              | `@gray-7`                    | -    |
+| @card-desc-line-height        | `@line-height-md`            | -    |
+| @card-price-color             | `@gray-8`                    | -    |
+| @card-origin-price-color      | `@gray-6`                    | -    |
+| @card-num-color               | `@gray-6`                    | -    |
+| @card-origin-price-font-size  | `@font-size-xs`              | -    |
+| @card-price-font-size         | `@font-size-sm`              | -    |
+| @card-price-integer-font-size | `@font-size-lg`              | -    |
+| @card-price-font-family       | `@price-integer-font-family` | -    |
diff --git a/src/cell/README.md b/src/cell/README.md
index 2450709e1..aefcedff0 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -175,3 +175,34 @@ app.use(CellGroup);
 | label      | Custom label                      |
 | right-icon | Custom right icon                 |
 | extra      | Custom extra content on the right |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @cell-font-size | `@font-size-md` | - |
+| @cell-line-height | `24px` | - |
+| @cell-vertical-padding | `10px` | - |
+| @cell-horizontal-padding | `@padding-md` | - |
+| @cell-text-color | `@text-color` | - |
+| @cell-background-color | `@white` | - |
+| @cell-border-color | `@border-color` | - |
+| @cell-active-color | `@active-color` | - |
+| @cell-required-color | `@red` | - |
+| @cell-label-color | `@gray-6` | - |
+| @cell-label-font-size | `@font-size-sm` | - |
+| @cell-label-line-height | `@line-height-sm` | - |
+| @cell-label-margin-top | `@padding-base` | - |
+| @cell-value-color | `@gray-6` | - |
+| @cell-icon-size | `16px` | - |
+| @cell-right-icon-color | `@gray-6` | - |
+| @cell-large-vertical-padding | `@padding-sm` | - |
+| @cell-large-title-font-size | `@font-size-lg` | - |
+| @cell-large-label-font-size | `@font-size-md` | - |
+| @cell-group-background-color | `@white` | - |
+| @cell-group-title-color | `@gray-6` | - |
+| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - |
+| @cell-group-title-font-size | `@font-size-md` | - |
+| @cell-group-title-line-height | `16px` | - |
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md
index 220f2427d..a313b0775 100644
--- a/src/cell/README.zh-CN.md
+++ b/src/cell/README.zh-CN.md
@@ -182,3 +182,34 @@ app.use(CellGroup);
 | icon       | 自定义左侧图标                |
 | right-icon | 自定义右侧按钮，默认为`arrow` |
 | extra      | 自定义单元格最右侧的额外内容  |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                          | 默认值                                | 描述 |
+| ----------------------------- | ------------------------------------- | ---- |
+| @cell-font-size               | `@font-size-md`                       | -    |
+| @cell-line-height             | `24px`                                | -    |
+| @cell-vertical-padding        | `10px`                                | -    |
+| @cell-horizontal-padding      | `@padding-md`                         | -    |
+| @cell-text-color              | `@text-color`                         | -    |
+| @cell-background-color        | `@white`                              | -    |
+| @cell-border-color            | `@border-color`                       | -    |
+| @cell-active-color            | `@active-color`                       | -    |
+| @cell-required-color          | `@red`                                | -    |
+| @cell-label-color             | `@gray-6`                             | -    |
+| @cell-label-font-size         | `@font-size-sm`                       | -    |
+| @cell-label-line-height       | `@line-height-sm`                     | -    |
+| @cell-label-margin-top        | `@padding-base`                       | -    |
+| @cell-value-color             | `@gray-6`                             | -    |
+| @cell-icon-size               | `16px`                                | -    |
+| @cell-right-icon-color        | `@gray-6`                             | -    |
+| @cell-large-vertical-padding  | `@padding-sm`                         | -    |
+| @cell-large-title-font-size   | `@font-size-lg`                       | -    |
+| @cell-large-label-font-size   | `@font-size-md`                       | -    |
+| @cell-group-background-color  | `@white`                              | -    |
+| @cell-group-title-color       | `@gray-6`                             | -    |
+| @cell-group-title-padding     | `@padding-md @padding-md @padding-xs` | -    |
+| @cell-group-title-font-size   | `@font-size-md`                       | -    |
+| @cell-group-title-line-height | `16px`                                | -    |
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 0f49b9ee3..20ff6e151 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -225,7 +225,7 @@ export default {
 ### Checkbox Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | v-model (value) | Check status | _boolean_ | `false` |
 | name | Checkbox name | _any_ | - |
 | shape | Can be set to `square` | _string_ | `round` |
@@ -239,7 +239,7 @@ export default {
 ### CheckboxGroup Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | v-model (value) | Names of all checked checkboxes | _any[]_ | - |
 | disabled | Whether to disable all checkboxes | _boolean_ | `false` |
 | max | Maximum amount of checked options | _number \| string_ | `0`(Unlimited) |
@@ -282,3 +282,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
 | Name   | Description         | Attribute           | Return value |
 | ------ | ------------------- | ------------------- | ------------ |
 | toggle | Toggle check status | _checked?: boolean_ | -            |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @checkbox-size | `20px` | - |
+| @checkbox-border-color | `@gray-5` | - |
+| @checkbox-transition-duration | `@animation-duration-fast` | - |
+| @checkbox-label-margin | `@padding-xs` | - |
+| @checkbox-label-color | `@text-color` | - |
+| @checkbox-checked-icon-color | `@blue` | - |
+| @checkbox-disabled-icon-color | `@gray-5` | - |
+| @checkbox-disabled-label-color | `@gray-5` | - |
+| @checkbox-disabled-background-color | `@border-color` | - |
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index 4da2c1b82..bdcb5a397 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -306,3 +306,19 @@ export default {
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                | 默认值                     | 描述 |
+| ----------------------------------- | -------------------------- | ---- |
+| @checkbox-size                      | `20px`                     | -    |
+| @checkbox-border-color              | `@gray-5`                  | -    |
+| @checkbox-transition-duration       | `@animation-duration-fast` | -    |
+| @checkbox-label-margin              | `@padding-xs`              | -    |
+| @checkbox-label-color               | `@text-color`              | -    |
+| @checkbox-checked-icon-color        | `@blue`                    | -    |
+| @checkbox-disabled-icon-color       | `@gray-5`                  | -    |
+| @checkbox-disabled-label-color      | `@gray-5`                  | -    |
+| @checkbox-disabled-background-color | `@border-color`            | -    |
diff --git a/src/circle/README.md b/src/circle/README.md
index 5fad3cac4..6dd482abe 100644
--- a/src/circle/README.md
+++ b/src/circle/README.md
@@ -130,3 +130,14 @@ export default {
 | Name    | Description         |
 | ------- | ------------------- |
 | default | custom text content |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                     | Default Value       | Description |
+| ------------------------ | ------------------- | ----------- |
+| @circle-text-color       | `@text-color`       | -           |
+| @circle-text-font-weight | `@font-weight-bold` | -           |
+| @circle-text-font-size   | `@font-size-md`     | -           |
+| @circle-text-line-height | `@line-height-md`   | -           |
diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md
index 1e876675d..bda928294 100644
--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@@ -146,3 +146,14 @@ export default {
 | 名称    | 说明           |
 | ------- | -------------- |
 | default | 自定义文字内容 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                     | 默认值              | 描述 |
+| ------------------------ | ------------------- | ---- |
+| @circle-text-color       | `@text-color`       | -    |
+| @circle-text-font-weight | `@font-weight-bold` | -    |
+| @circle-text-font-size   | `@font-size-md`     | -    |
+| @circle-text-line-height | `@line-height-md`   | -    |
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 27fed469c..67a5dc338 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -149,3 +149,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collap
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
 | toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @collapse-item-transition-duration | `@animation-duration-base` | - |
+| @collapse-item-content-padding | `@padding-sm @padding-md` | - |
+| @collapse-item-content-font-size | `@font-size-md` | - |
+| @collapse-item-content-line-height | `1.5` | - |
+| @collapse-item-content-text-color | `@gray-6` | - |
+| @collapse-item-content-background-color | `@white` | - |
+| @collapse-item-title-disabled-color | `@gray-5` | - |
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index 4f169c163..b44572f7e 100644
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@@ -151,3 +151,17 @@ export default {
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                    | 默认值                     | 描述 |
+| --------------------------------------- | -------------------------- | ---- |
+| @collapse-item-transition-duration      | `@animation-duration-base` | -    |
+| @collapse-item-content-padding          | `@padding-sm @padding-md`  | -    |
+| @collapse-item-content-font-size        | `@font-size-md`            | -    |
+| @collapse-item-content-line-height      | `1.5`                      | -    |
+| @collapse-item-content-text-color       | `@gray-6`                  | -    |
+| @collapse-item-content-background-color | `@white`                   | -    |
+| @collapse-item-title-disabled-color     | `@gray-5`                  | -    |
diff --git a/src/contact-card/README.md b/src/contact-card/README.md
index f5baf4897..8d6090e2b 100644
--- a/src/contact-card/README.md
+++ b/src/contact-card/README.md
@@ -88,3 +88,14 @@ export default {
 | Event | Description                       | Arguments      |
 | ----- | --------------------------------- | -------------- |
 | click | Emitted when component is clicked | _event: Event_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                            | Default Value     | Description |
+| ------------------------------- | ----------------- | ----------- |
+| @contact-card-padding           | `@padding-md`     | -           |
+| @contact-card-add-icon-size     | `40px`            | -           |
+| @contact-card-add-icon-color    | `@blue`           | -           |
+| @contact-card-value-line-height | `@line-height-md` | -           |
diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md
index 99e789458..33fbfdc41 100644
--- a/src/contact-card/README.zh-CN.md
+++ b/src/contact-card/README.zh-CN.md
@@ -87,3 +87,14 @@ export default {
 | 事件名 | 说明       | 回调参数       |
 | ------ | ---------- | -------------- |
 | click  | 点击时触发 | _event: Event_ |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                            | 默认值            | 描述 |
+| ------------------------------- | ----------------- | ---- |
+| @contact-card-padding           | `@padding-md`     | -    |
+| @contact-card-add-icon-size     | `40px`            | -    |
+| @contact-card-add-icon-color    | `@blue`           | -    |
+| @contact-card-value-line-height | `@line-height-md` | -    |
diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md
index 9b7c8f41a..5d4f48032 100644
--- a/src/contact-edit/README.md
+++ b/src/contact-edit/README.md
@@ -72,3 +72,16 @@ export default {
 | ---- | ----------- | -------- |
 | name | Name        | _string_ |
 | tel  | Phone       | _string_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                               | Default Value       | Description |
+| ---------------------------------- | ------------------- | ----------- |
+| @contact-edit-padding              | `@padding-md`       | -           |
+| @contact-edit-fields-radius        | `@border-radius-md` | -           |
+| @contact-edit-buttons-padding      | `@padding-xl 0`     | -           |
+| @contact-edit-button-margin-bottom | `@padding-sm`       | -           |
+| @contact-edit-button-font-size     | `16px`              | -           |
+| @contact-edit-field-label-width    | `4.1em`             | -           |
diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md
index 49aa9c1a7..c72e90a18 100644
--- a/src/contact-edit/README.zh-CN.md
+++ b/src/contact-edit/README.zh-CN.md
@@ -76,3 +76,16 @@ export default {
 | ---- | ------------ | ------------------ |
 | name | 联系人姓名   | _string_           |
 | tel  | 联系人手机号 | _number \| string_ |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                               | 默认值              | 描述 |
+| ---------------------------------- | ------------------- | ---- |
+| @contact-edit-padding              | `@padding-md`       | -    |
+| @contact-edit-fields-radius        | `@border-radius-md` | -    |
+| @contact-edit-buttons-padding      | `@padding-xl 0`     | -    |
+| @contact-edit-button-margin-bottom | `@padding-sm`       | -    |
+| @contact-edit-button-font-size     | `16px`              | -    |
+| @contact-edit-field-label-width    | `4.1em`             | -    |
diff --git a/src/contact-list/README.md b/src/contact-list/README.md
index 20ecd430b..bb4ecea18 100644
--- a/src/contact-list/README.md
+++ b/src/contact-list/README.md
@@ -88,3 +88,13 @@ export default {
 | name      | Name               | _string_           |
 | tel       | Phone              | _string_           |
 | isDefault | Is default contact | _boolean_          |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value | Description |
+| -------------------------------- | ------------- | ----------- |
+| @contact-list-edit-icon-size     | `16px`        | -           |
+| @contact-list-add-button-z-index | `999`         | -           |
+| @contact-list-item-padding       | `@padding-md` | -           |
diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md
index 56bba0ae6..528767fb1 100644
--- a/src/contact-list/README.zh-CN.md
+++ b/src/contact-list/README.zh-CN.md
@@ -92,3 +92,13 @@ export default {
 | name      | 联系人姓名           | _string_           |
 | tel       | 联系人手机号         | _number \| string_ |
 | isDefault | 是否为默认联系人     | _boolean_          |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值        | 描述 |
+| -------------------------------- | ------------- | ---- |
+| @contact-list-edit-icon-size     | `16px`        | -    |
+| @contact-list-add-button-z-index | `999`         | -    |
+| @contact-list-item-padding       | `@padding-md` | -    |
diff --git a/src/count-down/README.md b/src/count-down/README.md
index 7be91ecb2..4d5a00c18 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -165,3 +165,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CountD
 | start | Start count down | -         | -            |
 | pause | Pause count down | -         | -            |
 | reset | Reset count down | -         | -            |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                    | Default Value     | Description |
+| ----------------------- | ----------------- | ----------- |
+| @count-down-text-color  | `@text-color`     | -           |
+| @count-down-font-size   | `@font-size-md`   | -           |
+| @count-down-line-height | `@line-height-md` | -           |
diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md
index f66290ee1..e4746af34 100644
--- a/src/count-down/README.zh-CN.md
+++ b/src/count-down/README.zh-CN.md
@@ -178,7 +178,17 @@ export default {
 | --- | --- | --- | --- |
 | start | 开始倒计时 | - | - |
 | pause | 暂停倒计时 | - | - |
-| reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - |
+| reset | 重设倒计时，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | - | - |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                    | 默认值            | 描述 |
+| ----------------------- | ----------------- | ---- |
+| @count-down-text-color  | `@text-color`     | -    |
+| @count-down-font-size   | `@font-size-md`   | -    |
+| @count-down-line-height | `@line-height-md` | -    |
 
 ## 常见问题
 
diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md
index d6234003e..29df73cad 100644
--- a/src/coupon-list/README.md
+++ b/src/coupon-list/README.md
@@ -88,7 +88,7 @@ export default {
 ### CouponList Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | v-model | Current exchange code | _string_ | - |
 | chosen-coupon | Index of chosen coupon | _number_ | `-1` |
 | coupons | Coupon list | _Coupon[]_ | `[]` |
@@ -127,3 +127,34 @@ export default {
 | value       | Value                               | _number_ |
 | valueDesc   | Value Text                          | _string_ |
 | unitDesc    | Unit Text                           | _string_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @coupon-margin | `0 @padding-sm @padding-sm` | - |
+| @coupon-content-height | `84px` | - |
+| @coupon-content-padding | `14px 0` | - |
+| @coupon-background-color | `@white` | - |
+| @coupon-active-background-color | `@active-color` | - |
+| @coupon-border-radius | `@border-radius-lg` | - |
+| @coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - |
+| @coupon-head-width | `96px` | - |
+| @coupon-amount-color | `@red` | - |
+| @coupon-amount-font-size | `30px` | - |
+| @coupon-currency-font-size | `40%` | - |
+| @coupon-name-font-size | `@font-size-md` | - |
+| @coupon-disabled-text-color | `@gray-6` | - |
+| @coupon-description-padding | `@padding-xs @padding-md` | - |
+| @coupon-description-border-color | `@border-color` | - |
+| @coupon-list-background-color | `@background-color` | - |
+| @coupon-list-field-padding | `5px 0 5px @padding-md` | - |
+| @coupon-list-exchange-button-height | `32px` | - |
+| @coupon-list-close-button-height | `40px` | - |
+| @coupon-list-empty-image-size | `200px` | - |
+| @coupon-list-empty-tip-color | `@gray-6` | - |
+| @coupon-list-empty-tip-font-size | `@font-size-md` | - |
+| @coupon-list-empty-tip-line-height | `@line-height-md` | - |
+| @coupon-cell-selected-text-color | `@text-color` | - |
diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md
index 81d8588ce..2e2fff23f 100644
--- a/src/coupon-list/README.zh-CN.md
+++ b/src/coupon-list/README.zh-CN.md
@@ -77,13 +77,13 @@ export default {
 ### CouponCell Props
 
 | 参数          | 说明                 | 类型               | 默认值   |
-| ------------- | -------------------- | ------------------ | -------- |
+| ------------- | -------------------- | ------------------ | -------- | --- |
 | title         | 单元格标题           | _string_           | `优惠券` |
 | chosen-coupon | 当前选中优惠券的索引 | _number \| string_ | `-1`     |
 | coupons       | 可用优惠券列表       | _Coupon[]_         | `[]`     |
 | editable      | 能否切换优惠券       | _boolean_          | `true`   |
 | border        | 是否显示内边框       | _boolean_          | `true`   |
-| currency      | 货币符号             | _string_           | `¥`      | - |
+| currency      | 货币符号             | _string_           | `¥`      | -   |
 
 ### CouponList Props
 
@@ -129,3 +129,34 @@ export default {
 | value       | 折扣券优惠金额，单位分          | _number_ |
 | valueDesc   | 折扣券优惠金额文案              | _string_ |
 | unitDesc    | 单位文案                        | _string_ |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                | 默认值                       | 描述 |
+| ----------------------------------- | ---------------------------- | ---- |
+| @coupon-margin                      | `0 @padding-sm @padding-sm`  | -    |
+| @coupon-content-height              | `84px`                       | -    |
+| @coupon-content-padding             | `14px 0`                     | -    |
+| @coupon-background-color            | `@white`                     | -    |
+| @coupon-active-background-color     | `@active-color`              | -    |
+| @coupon-border-radius               | `@border-radius-lg`          | -    |
+| @coupon-box-shadow                  | `0 0 4px rgba(0, 0, 0, 0.1)` | -    |
+| @coupon-head-width                  | `96px`                       | -    |
+| @coupon-amount-color                | `@red`                       | -    |
+| @coupon-amount-font-size            | `30px`                       | -    |
+| @coupon-currency-font-size          | `40%`                        | -    |
+| @coupon-name-font-size              | `@font-size-md`              | -    |
+| @coupon-disabled-text-color         | `@gray-6`                    | -    |
+| @coupon-description-padding         | `@padding-xs @padding-md`    | -    |
+| @coupon-description-border-color    | `@border-color`              | -    |
+| @coupon-list-background-color       | `@background-color`          | -    |
+| @coupon-list-field-padding          | `5px 0 5px @padding-md`      | -    |
+| @coupon-list-exchange-button-height | `32px`                       | -    |
+| @coupon-list-close-button-height    | `40px`                       | -    |
+| @coupon-list-empty-image-size       | `200px`                      | -    |
+| @coupon-list-empty-tip-color        | `@gray-6`                    | -    |
+| @coupon-list-empty-tip-font-size    | `@font-size-md`              | -    |
+| @coupon-list-empty-tip-line-height  | `@line-height-md`            | -    |
+| @coupon-cell-selected-text-color    | `@text-color`                | -    |
diff --git a/src/dialog/README.md b/src/dialog/README.md
index a019ce75b..5e3748aea 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -205,3 +205,29 @@ export default {
 | ------- | -------------- |
 | default | Custom message |
 | title   | Custom title   |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @dialog-width | `320px` | - |
+| @dialog-small-screen-width | `90%` | - |
+| @dialog-font-size | `@font-size-lg` | - |
+| @dialog-transition | `@animation-duration-base` | - |
+| @dialog-border-radius | `16px` | - |
+| @dialog-background-color | `@white` | - |
+| @dialog-header-font-weight | `@font-weight-bold` | - |
+| @dialog-header-line-height | `24px` | - |
+| @dialog-header-padding-top | `26px` | - |
+| @dialog-header-isolated-padding | `@padding-lg 0` | - |
+| @dialog-message-padding | `@padding-lg` | - |
+| @dialog-message-font-size | `@font-size-md` | - |
+| @dialog-message-line-height | `@line-height-md` | - |
+| @dialog-message-max-height | `60vh` | - |
+| @dialog-has-title-message-text-color | `@gray-7` | - |
+| @dialog-has-title-message-padding-top | `@padding-xs` | - |
+| @dialog-button-height | `48px` | - |
+| @dialog-round-button-height | `36px` | - |
+| @dialog-confirm-button-text-color | `@red` | - |
diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md
index 285e3cf7e..850d0b494 100644
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@@ -246,3 +246,29 @@ export default {
 | ------- | ---------- |
 | default | 自定义内容 |
 | title   | 自定义标题 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                  | 默认值                     | 描述 |
+| ------------------------------------- | -------------------------- | ---- |
+| @dialog-width                         | `320px`                    | -    |
+| @dialog-small-screen-width            | `90%`                      | -    |
+| @dialog-font-size                     | `@font-size-lg`            | -    |
+| @dialog-transition                    | `@animation-duration-base` | -    |
+| @dialog-border-radius                 | `16px`                     | -    |
+| @dialog-background-color              | `@white`                   | -    |
+| @dialog-header-font-weight            | `@font-weight-bold`        | -    |
+| @dialog-header-line-height            | `24px`                     | -    |
+| @dialog-header-padding-top            | `26px`                     | -    |
+| @dialog-header-isolated-padding       | `@padding-lg 0`            | -    |
+| @dialog-message-padding               | `@padding-lg`              | -    |
+| @dialog-message-font-size             | `@font-size-md`            | -    |
+| @dialog-message-line-height           | `@line-height-md`          | -    |
+| @dialog-message-max-height            | `60vh`                     | -    |
+| @dialog-has-title-message-text-color  | `@gray-7`                  | -    |
+| @dialog-has-title-message-padding-top | `@padding-xs`              | -    |
+| @dialog-button-height                 | `48px`                     | -    |
+| @dialog-round-button-height           | `36px`                     | -    |
+| @dialog-confirm-button-text-color     | `@red`                     | -    |
diff --git a/src/divider/README.md b/src/divider/README.md
index 7e66aefe2..a7d044c1f 100644
--- a/src/divider/README.md
+++ b/src/divider/README.md
@@ -62,3 +62,18 @@ app.use(Divider);
 | Name    | Description |
 | ------- | ----------- |
 | default | content     |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                         | Default Value   | Description |
+| ---------------------------- | --------------- | ----------- |
+| @divider-margin              | `@padding-md 0` | -           |
+| @divider-text-color          | `@gray-6`       | -           |
+| @divider-font-size           | `@font-size-md` | -           |
+| @divider-line-height         | `24px`          | -           |
+| @divider-border-color        | `@border-color` | -           |
+| @divider-content-padding     | `@padding-md`   | -           |
+| @divider-content-left-width  | `10%`           | -           |
+| @divider-content-right-width | `10%`           | -           |
diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md
index f3499dc3f..f8097a660 100644
--- a/src/divider/README.zh-CN.md
+++ b/src/divider/README.zh-CN.md
@@ -76,3 +76,18 @@ app.use(Divider);
 | 名称    | 说明 |
 | ------- | ---- |
 | default | 内容 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                         | 默认值          | 描述 |
+| ---------------------------- | --------------- | ---- |
+| @divider-margin              | `@padding-md 0` | -    |
+| @divider-text-color          | `@gray-6`       | -    |
+| @divider-font-size           | `@font-size-md` | -    |
+| @divider-line-height         | `24px`          | -    |
+| @divider-border-color        | `@border-color` | -    |
+| @divider-content-padding     | `@padding-md`   | -    |
+| @divider-content-left-width  | `10%`           | -    |
+| @divider-content-right-width | `10%`           | -    |
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 58c29cf27..70537d495 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -177,3 +177,22 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dropdo
 | text  | Text        | _string_           |
 | value | Value       | _number \| string_ |
 | icon  | Left icon   | _string_           |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @dropdown-menu-height | `48px` | - |
+| @dropdown-menu-background-color | `@white` | - |
+| @dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - |
+| @dropdown-menu-title-font-size | `15px` | - |
+| @dropdown-menu-title-text-color | `@text-color` | - |
+| @dropdown-menu-title-active-text-color | `@red` | - |
+| @dropdown-menu-title-disabled-text-color | `@gray-6` | - |
+| @dropdown-menu-title-padding | `0 @padding-xs` | - |
+| @dropdown-menu-title-line-height | `@line-height-lg` | - |
+| @dropdown-menu-option-active-color | `@red` | - |
+| @dropdown-menu-content-max-height | `80%` | - |
+| @dropdown-item-z-index | `10` | - |
diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md
index c1dcbc259..baac42864 100644
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@@ -185,3 +185,22 @@ export default {
 | text  | 文字                                   | _string_           |
 | value | 标识符                                 | _number \| string_ |
 | icon  | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_           |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @dropdown-menu-height | `48px` | - |
+| @dropdown-menu-background-color | `@white` | - |
+| @dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - |
+| @dropdown-menu-title-font-size | `15px` | - |
+| @dropdown-menu-title-text-color | `@text-color` | - |
+| @dropdown-menu-title-active-text-color | `@red` | - |
+| @dropdown-menu-title-disabled-text-color | `@gray-6` | - |
+| @dropdown-menu-title-padding | `0 @padding-xs` | - |
+| @dropdown-menu-title-line-height | `@line-height-lg` | - |
+| @dropdown-menu-option-active-color | `@red` | - |
+| @dropdown-menu-content-max-height | `80%` | - |
+| @dropdown-item-z-index | `10` | - |
diff --git a/src/empty/README.md b/src/empty/README.md
index 1ff99f5ad..5b47a6023 100644
--- a/src/empty/README.md
+++ b/src/empty/README.md
@@ -51,9 +51,7 @@ Use the image prop to display different placeholder images.
 
 ```html
 <van-empty description="Description">
-  <van-button round type="danger" class="bottom-button">
-    Button
-  </van-button>
+  <van-button round type="danger" class="bottom-button"> Button </van-button>
 </van-empty>
 
 <style>
@@ -81,3 +79,18 @@ Use the image prop to display different placeholder images.
 | default     | Custom bottom content |
 | image       | Custom image          |
 | description | Custom description    |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                           | Default Value     | Description |
+| ------------------------------ | ----------------- | ----------- |
+| @empty-padding                 | `@padding-xl 0`   | -           |
+| @empty-image-size              | `160px`           | -           |
+| @empty-description-margin-top  | `@padding-md`     | -           |
+| @empty-description-padding     | `0 60px`          | -           |
+| @empty-description-color       | `@gray-6`         | -           |
+| @empty-description-font-size   | `@font-size-md`   | -           |
+| @empty-description-line-height | `@line-height-md` | -           |
+| @empty-bottom-margin-top       | `24px`            | -           |
diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md
index 3d1acf19f..1dab31bf9 100644
--- a/src/empty/README.zh-CN.md
+++ b/src/empty/README.zh-CN.md
@@ -60,9 +60,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
 
 ```html
 <van-empty description="描述文字">
-  <van-button round type="danger" class="bottom-button">
-    按钮
-  </van-button>
+  <van-button round type="danger" class="bottom-button"> 按钮 </van-button>
 </van-empty>
 
 <style>
@@ -90,3 +88,18 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
 | default     | 自定义底部内容 |
 | image       | 自定义图标     |
 | description | 自定义描述文字 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                           | 默认值            | 描述 |
+| ------------------------------ | ----------------- | ---- |
+| @empty-padding                 | `@padding-xl 0`   | -    |
+| @empty-image-size              | `160px`           | -    |
+| @empty-description-margin-top  | `@padding-md`     | -    |
+| @empty-description-padding     | `0 60px`          | -    |
+| @empty-description-color       | `@gray-6`         | -    |
+| @empty-description-font-size   | `@font-size-md`   | -    |
+| @empty-description-line-height | `@line-height-md` | -    |
+| @empty-bottom-margin-top       | `24px`            | -    |
diff --git a/src/field/README.md b/src/field/README.md
index bc23ada56..ae29e97c4 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -288,3 +288,28 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Field
 | right-icon     | Custom right icon           |
 | button         | Insert button               |
 | extra `v2.8.2` | Custom content on the right |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value   | Description |
+| -------------------------------- | --------------- | ----------- |
+| @field-label-width               | `6.2em`         | -           |
+| @field-label-color               | `@gray-7`       | -           |
+| @field-label-margin-right        | `@padding-sm`   | -           |
+| @field-input-text-color          | `@text-color`   | -           |
+| @field-input-error-text-color    | `@red`          | -           |
+| @field-input-disabled-text-color | `@gray-5`       | -           |
+| @field-placeholder-text-color    | `@gray-5`       | -           |
+| @field-icon-size                 | `16px`          | -           |
+| @field-clear-icon-size           | `16px`          | -           |
+| @field-clear-icon-color          | `@gray-5`       | -           |
+| @field-right-icon-color          | `@gray-6`       | -           |
+| @field-error-message-color       | `@red`          | -           |
+| @field-error-message-text-color  | `12px`          | -           |
+| @field-text-area-min-height      | `60px`          | -           |
+| @field-word-limit-color          | `@gray-7`       | -           |
+| @field-word-limit-font-size      | `@font-size-sm` | -           |
+| @field-word-limit-line-height    | `16px`          | -           |
+| @field-disabled-text-color       | `@gray-5`       | -           |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index fb0a56be7..07c5c9cec 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -312,6 +312,31 @@ export default {
 | button         | 自定义输入框尾部按钮                                       |
 | extra `v2.8.2` | 自定义输入框最右侧的额外内容                               |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值          | 描述 |
+| -------------------------------- | --------------- | ---- |
+| @field-label-width               | `6.2em`         | -    |
+| @field-label-color               | `@gray-7`       | -    |
+| @field-label-margin-right        | `@padding-sm`   | -    |
+| @field-input-text-color          | `@text-color`   | -    |
+| @field-input-error-text-color    | `@red`          | -    |
+| @field-input-disabled-text-color | `@gray-5`       | -    |
+| @field-placeholder-text-color    | `@gray-5`       | -    |
+| @field-icon-size                 | `16px`          | -    |
+| @field-clear-icon-size           | `16px`          | -    |
+| @field-clear-icon-color          | `@gray-5`       | -    |
+| @field-right-icon-color          | `@gray-6`       | -    |
+| @field-error-message-color       | `@red`          | -    |
+| @field-error-message-text-color  | `12px`          | -    |
+| @field-text-area-min-height      | `60px`          | -    |
+| @field-word-limit-color          | `@gray-7`       | -    |
+| @field-word-limit-font-size      | `@font-size-sm` | -    |
+| @field-word-limit-line-height    | `16px`          | -    |
+| @field-disabled-text-color       | `@gray-5`       | -    |
+
 ## 常见问题
 
 ### 设置 type 为 number 后，为什么 input 标签的类型仍为 text?
diff --git a/src/grid/README.md b/src/grid/README.md
index 24692298c..41e3ef47c 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -133,3 +133,16 @@ app.use(GridItem);
 | default | Custom content |
 | icon    | Custom icon    |
 | text    | Custom text    |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @grid-item-content-padding | `@padding-md @padding-xs` | - |
+| @grid-item-content-background-color | `@white` | - |
+| @grid-item-content-active-color | `@active-color` | - |
+| @grid-item-icon-size | `28px` | - |
+| @grid-item-text-color | `@gray-7` | - |
+| @grid-item-text-font-size | `@font-size-sm` | - |
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index f986b7316..bc554ab2b 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -153,3 +153,16 @@ app.use(GridItem);
 | default | 自定义宫格的所有内容 |
 | icon    | 自定义图标           |
 | text    | 自定义文字           |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                | 默认值                    | 描述 |
+| ----------------------------------- | ------------------------- | ---- |
+| @grid-item-content-padding          | `@padding-md @padding-xs` | -    |
+| @grid-item-content-background-color | `@white`                  | -    |
+| @grid-item-content-active-color     | `@active-color`           | -    |
+| @grid-item-icon-size                | `28px`                    | -    |
+| @grid-item-text-color               | `@gray-7`                 | -    |
+| @grid-item-text-font-size           | `@font-size-sm`           | -    |
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 83ffbb2af..7964cff85 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -189,3 +189,20 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get ImagePreview instance and call i
 | --------- | ---------------------- | -------- |
 | index     | Index of current image | _number_ |
 | scale     | scale of current image | _number_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                    | Default Value        | Description |
+| --------------------------------------- | -------------------- | ----------- |
+| @image-preview-index-text-color         | `@white`             | -           |
+| @image-preview-index-font-size          | `@font-size-md`      | -           |
+| @image-preview-index-line-height        | `@line-height-md`    | -           |
+| @image-preview-index-text-shadow        | `0 1px 1px @gray-8`  | -           |
+| @image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | -           |
+| @image-preview-close-icon-size          | `22px`               | -           |
+| @image-preview-close-icon-color         | `@gray-5`            | -           |
+| @image-preview-close-icon-active-color  | `@gray-6`            | -           |
+| @image-preview-close-icon-margin        | `@padding-md`        | -           |
+| @image-preview-close-icon-z-index       | `1`                  | -           |
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index 4e077cf33..1d2b8bc69 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -233,6 +233,23 @@ export default {
 | index  | 当前图片的索引值 | _number_ |
 | scale  | 当前图片的缩放值 | _number_ |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                    | 默认值               | 描述 |
+| --------------------------------------- | -------------------- | ---- |
+| @image-preview-index-text-color         | `@white`             | -    |
+| @image-preview-index-font-size          | `@font-size-md`      | -    |
+| @image-preview-index-line-height        | `@line-height-md`    | -    |
+| @image-preview-index-text-shadow        | `0 1px 1px @gray-8`  | -    |
+| @image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | -    |
+| @image-preview-close-icon-size          | `22px`               | -    |
+| @image-preview-close-icon-color         | `@gray-5`            | -    |
+| @image-preview-close-icon-active-color  | `@gray-6`            | -    |
+| @image-preview-close-icon-margin        | `@padding-md`        | -    |
+| @image-preview-close-icon-z-index       | `1`                  | -    |
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？
diff --git a/src/image/README.md b/src/image/README.md
index a48450e78..74431a2ca 100644
--- a/src/image/README.md
+++ b/src/image/README.md
@@ -106,3 +106,17 @@ app.use(Lazyload);
 | default `v2.9.0` | Custom the content below the image |
 | loading          | Custom loading placeholder         |
 | error            | Custom error placeholder           |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                | Default Value       | Description |
+| ----------------------------------- | ------------------- | ----------- |
+| @image-placeholder-text-color       | `@gray-6`           | -           |
+| @image-placeholder-font-size        | `@font-size-md`     | -           |
+| @image-placeholder-background-color | `@background-color` | -           |
+| @image-loading-icon-size            | `32px`              | -           |
+| @image-loading-icon-color           | `@gray-4`           | -           |
+| @image-error-icon-size              | `32px`              | -           |
+| @image-error-icon-color             | `@gray-4`           | -           |
diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md
index d1f8c7773..ad4440c71 100644
--- a/src/image/README.zh-CN.md
+++ b/src/image/README.zh-CN.md
@@ -139,6 +139,20 @@ app.use(Lazyload);
 | loading          | 自定义加载中的提示内容     |
 | error            | 自定义加载失败时的提示内容 |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                | 默认值              | 描述 |
+| ----------------------------------- | ------------------- | ---- |
+| @image-placeholder-text-color       | `@gray-6`           | -    |
+| @image-placeholder-font-size        | `@font-size-md`     | -    |
+| @image-placeholder-background-color | `@background-color` | -    |
+| @image-loading-icon-size            | `32px`              | -    |
+| @image-loading-icon-color           | `@gray-4`           | -    |
+| @image-error-icon-size              | `32px`              | -    |
+| @image-error-icon-color             | `@gray-4`           | -    |
+
 ## 常见问题
 
 ### 如何引用本地图片？
diff --git a/src/index-bar/README.md b/src/index-bar/README.md
index 0df38d137..2a32ff531 100644
--- a/src/index-bar/README.md
+++ b/src/index-bar/README.md
@@ -64,7 +64,7 @@ export default {
 ### IndexBar Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | index-list | Index List | _string[] \| number[]_ | `A-Z` |
 | z-index | z-index | _number \| string_ | `1` |
 | sticky | Whether to enable anchor sticky top | _boolean_ | `true` |
@@ -89,3 +89,23 @@ export default {
 | Name    | Description                           |
 | ------- | ------------------------------------- |
 | default | Anchor content, show index by default |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                  | Default Value       | Description |
+| ------------------------------------- | ------------------- | ----------- |
+| @index-bar-sidebar-z-index            | `2`                 | -           |
+| @index-bar-index-font-size            | `@font-size-xs`     | -           |
+| @index-bar-index-line-height          | `@line-height-xs`   | -           |
+| @index-bar-index-active-color         | `@green`            | -           |
+| @index-anchor-z-index                 | `1`                 | -           |
+| @index-anchor-padding                 | `0 @padding-md`     | -           |
+| @index-anchor-text-color              | `@text-color`       | -           |
+| @index-anchor-font-weight             | `@font-weight-bold` | -           |
+| @index-anchor-font-size               | `@font-size-md`     | -           |
+| @index-anchor-line-height             | `32px`              | -           |
+| @index-anchor-background-color        | `transparent`       | -           |
+| @index-anchor-sticky-text-color       | `@green`            | -           |
+| @index-anchor-sticky-background-color | `@white`            | -           |
diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md
index 3558958b5..126b7b3b3 100644
--- a/src/index-bar/README.zh-CN.md
+++ b/src/index-bar/README.zh-CN.md
@@ -93,3 +93,23 @@ export default {
 | 名称    | 说明                             |
 | ------- | -------------------------------- |
 | default | 锚点位置显示内容，默认为索引字符 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                  | 默认值              | 描述 |
+| ------------------------------------- | ------------------- | ---- |
+| @index-bar-sidebar-z-index            | `2`                 | -    |
+| @index-bar-index-font-size            | `@font-size-xs`     | -    |
+| @index-bar-index-line-height          | `@line-height-xs`   | -    |
+| @index-bar-index-active-color         | `@green`            | -    |
+| @index-anchor-z-index                 | `1`                 | -    |
+| @index-anchor-padding                 | `0 @padding-md`     | -    |
+| @index-anchor-text-color              | `@text-color`       | -    |
+| @index-anchor-font-weight             | `@font-weight-bold` | -    |
+| @index-anchor-font-size               | `@font-size-md`     | -    |
+| @index-anchor-line-height             | `32px`              | -    |
+| @index-anchor-background-color        | `transparent`       | -    |
+| @index-anchor-sticky-text-color       | `@green`            | -    |
+| @index-anchor-sticky-background-color | `@white`            | -    |
diff --git a/src/list/README.md b/src/list/README.md
index f43b1f449..365c7a5c3 100644
--- a/src/list/README.md
+++ b/src/list/README.md
@@ -177,3 +177,14 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get List i
 | loading  | Custom loading tips  |
 | finished | Custom finished tips |
 | error    | Custom error tips    |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                    | Default Value   | Description |
+| ----------------------- | --------------- | ----------- |
+| @list-icon-margin-right | `5px`           | -           |
+| @list-text-color        | `@gray-6`       | -           |
+| @list-text-font-size    | `@font-size-md` | -           |
+| @list-text-line-height  | `50px`          | -           |
diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md
index 10596876b..9dfb6e03a 100644
--- a/src/list/README.zh-CN.md
+++ b/src/list/README.zh-CN.md
@@ -193,6 +193,17 @@ export default {
 | finished | 自定义加载完成后的提示文案 |
 | error    | 自定义加载失败后的提示文案 |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                    | 默认值          | 描述 |
+| ----------------------- | --------------- | ---- |
+| @list-icon-margin-right | `5px`           | -    |
+| @list-text-color        | `@gray-6`       | -    |
+| @list-text-font-size    | `@font-size-md` | -    |
+| @list-text-line-height  | `50px`          | -    |
+
 ## 常见问题
 
 ### List 的运行机制是什么？
diff --git a/src/loading/README.md b/src/loading/README.md
index cbc7fbf99..99e8bb918 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -65,3 +65,15 @@ app.use(Loading);
 | Name    | Description  |
 | ------- | ------------ |
 | default | Loading text |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                | Default Value   | Description |
+| ----------------------------------- | --------------- | ----------- |
+| @loading-text-color                 | `@gray-6`       | -           |
+| @loading-text-font-size             | `@font-size-md` | -           |
+| @loading-spinner-color              | `@gray-5`       | -           |
+| @loading-spinner-size               | `30px`          | -           |
+| @loading-spinner-animation-duration | `0.8s`          | -           |
diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md
index e6beea036..c5e26c82d 100644
--- a/src/loading/README.zh-CN.md
+++ b/src/loading/README.zh-CN.md
@@ -79,3 +79,15 @@ app.use(Loading);
 | 名称    | 说明     |
 | ------- | -------- |
 | default | 加载文案 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                | 默认值          | 描述 |
+| ----------------------------------- | --------------- | ---- |
+| @loading-text-color                 | `@gray-6`       | -    |
+| @loading-text-font-size             | `@font-size-md` | -    |
+| @loading-spinner-color              | `@gray-5`       | -    |
+| @loading-spinner-size               | `30px`          | -    |
+| @loading-spinner-animation-duration | `0.8s`          | -    |
diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md
index 9ec493cd1..e43784ba7 100644
--- a/src/nav-bar/README.md
+++ b/src/nav-bar/README.md
@@ -80,3 +80,18 @@ export default {
 | ----------- | ---------------------------------------- | --------- |
 | click-left  | Emitted when the left button is clicked  | -         |
 | click-right | Emitted when the right button is clicked | -         |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                      | Default Value   | Description |
+| ------------------------- | --------------- | ----------- |
+| @nav-bar-height           | `46px`          | -           |
+| @nav-bar-background-color | `@white`        | -           |
+| @nav-bar-arrow-size       | `16px`          | -           |
+| @nav-bar-icon-color       | `@blue`         | -           |
+| @nav-bar-text-color       | `@blue`         | -           |
+| @nav-bar-title-font-size  | `@font-size-lg` | -           |
+| @nav-bar-title-text-color | `@text-color`   | -           |
+| @nav-bar-z-index          | `1`             | -           |
diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md
index 4a6c0c2d7..52df64fd0 100644
--- a/src/nav-bar/README.zh-CN.md
+++ b/src/nav-bar/README.zh-CN.md
@@ -82,3 +82,18 @@ export default {
 | ----------- | ------------------ | -------- |
 | click-left  | 点击左侧按钮时触发 | -        |
 | click-right | 点击右侧按钮时触发 | -        |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                      | 默认值          | 描述 |
+| ------------------------- | --------------- | ---- |
+| @nav-bar-height           | `46px`          | -    |
+| @nav-bar-background-color | `@white`        | -    |
+| @nav-bar-arrow-size       | `16px`          | -    |
+| @nav-bar-icon-color       | `@blue`         | -    |
+| @nav-bar-text-color       | `@blue`         | -    |
+| @nav-bar-title-font-size  | `@font-size-lg` | -    |
+| @nav-bar-title-text-color | `@text-color`   | -    |
+| @nav-bar-z-index          | `1`             | -    |
diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
index 40a31bdcd..c74c5f966 100644
--- a/src/notice-bar/README.md
+++ b/src/notice-bar/README.md
@@ -34,21 +34,15 @@ app.use(NoticeBar);
 ### Wrapable
 
 ```html
-<van-notice-bar wrapable :scrollable="false">
-  Notice Content
-</van-notice-bar>
+<van-notice-bar wrapable :scrollable="false"> Notice Content </van-notice-bar>
 ```
 
 ### Mode
 
 ```html
-<van-notice-bar mode="closeable">
-  Notice Content
-</van-notice-bar>
+<van-notice-bar mode="closeable"> Notice Content </van-notice-bar>
 
-<van-notice-bar mode="link">
-  Notice Content
-</van-notice-bar>
+<van-notice-bar mode="link"> Notice Content </van-notice-bar>
 ```
 
 ### Custom Style
@@ -88,7 +82,7 @@ app.use(NoticeBar);
 ### Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | mode | Mode, can be set to `closeable` `link` | _string_ | `''` |
 | text | Notice text content | _string_ | `''` | - |
 | color | Text color | _string_ | `#f60` |
@@ -114,3 +108,19 @@ app.use(NoticeBar);
 | default    | Notice text content |
 | left-icon  | Custom left icon    |
 | right-icon | Custom right icon   |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                         | Default Value             | Description |
+| ---------------------------- | ------------------------- | ----------- |
+| @notice-bar-height           | `40px`                    | -           |
+| @notice-bar-padding          | `0 @padding-md`           | -           |
+| @notice-bar-wrapable-padding | `@padding-xs @padding-md` | -           |
+| @notice-bar-text-color       | `@orange-dark`            | -           |
+| @notice-bar-font-size        | `@font-size-md`           | -           |
+| @notice-bar-line-height      | `24px`                    | -           |
+| @notice-bar-background-color | `@orange-light`           | -           |
+| @notice-bar-icon-size        | `16px`                    | -           |
+| @notice-bar-icon-min-width   | `24px`                    | -           |
diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md
index a9cd23fa7..b9bc5d0c1 100644
--- a/src/notice-bar/README.zh-CN.md
+++ b/src/notice-bar/README.zh-CN.md
@@ -60,14 +60,10 @@ app.use(NoticeBar);
 
 ```html
 <!-- closeable 模式，在右侧显示关闭按钮 -->
-<van-notice-bar mode="closeable">
-  技术是开发它的人的共同灵魂。
-</van-notice-bar>
+<van-notice-bar mode="closeable"> 技术是开发它的人的共同灵魂。 </van-notice-bar>
 
 <!-- link 模式，在右侧显示链接箭头 -->
-<van-notice-bar mode="link">
-  技术是开发它的人的共同灵魂。
-</van-notice-bar>
+<van-notice-bar mode="link"> 技术是开发它的人的共同灵魂。 </van-notice-bar>
 ```
 
 ### 自定义样式
@@ -137,3 +133,19 @@ app.use(NoticeBar);
 | default    | 通知文本内容   |
 | left-icon  | 自定义左侧图标 |
 | right-icon | 自定义右侧图标 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                         | 默认值                    | 描述 |
+| ---------------------------- | ------------------------- | ---- |
+| @notice-bar-height           | `40px`                    | -    |
+| @notice-bar-padding          | `0 @padding-md`           | -    |
+| @notice-bar-wrapable-padding | `@padding-xs @padding-md` | -    |
+| @notice-bar-text-color       | `@orange-dark`            | -    |
+| @notice-bar-font-size        | `@font-size-md`           | -    |
+| @notice-bar-line-height      | `24px`                    | -    |
+| @notice-bar-background-color | `@orange-light`           | -    |
+| @notice-bar-icon-size        | `16px`                    | -    |
+| @notice-bar-icon-min-width   | `24px`                    | -    |
diff --git a/src/notify/README.md b/src/notify/README.md
index 5407fe444..0bfbb2307 100644
--- a/src/notify/README.md
+++ b/src/notify/README.md
@@ -87,7 +87,7 @@ export default {
 ### Methods
 
 | Methods | Attribute | Return value | Description |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | Notify | `options | message` | notify instance | Show notify |
 | Notify.clear | - | `void` | Close notify |
 | Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies |
@@ -96,7 +96,7 @@ export default {
 ### Options
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | type | Can be set to `primary` `success` `warning` | _string_ | `danger` |
 | message | Message | _string_ | - |
 | duration | Duration(ms), won't disappear if value is 0 | _number \| string_ | `3000` |
@@ -106,3 +106,18 @@ export default {
 | onClick | Callback function after click | _Function_ | - |
 | onOpened | Callback function after opened | _Function_ | - |
 | onClose | Callback function after close | _Function_ | - |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value             | Description |
+| -------------------------------- | ------------------------- | ----------- |
+| @notify-text-color               | `@white`                  | -           |
+| @notify-padding                  | `@padding-xs @padding-md` | -           |
+| @notify-font-size                | `@font-size-md`           | -           |
+| @notify-line-height              | `@line-height-md`         | -           |
+| @notify-primary-background-color | `@blue`                   | -           |
+| @notify-success-background-color | `@green`                  | -           |
+| @notify-danger-background-color  | `@red`                    | -           |
+| @notify-warning-background-color | `@orange`                 | -           |
diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md
index b9262ae4c..417df18ae 100644
--- a/src/notify/README.zh-CN.md
+++ b/src/notify/README.zh-CN.md
@@ -124,7 +124,7 @@ export default {
 ### 方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | Notify | 展示提示 | `options | message` | notify 实例 |
 | Notify.clear | 关闭提示 | - | `void` |
 | Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` |
@@ -143,3 +143,18 @@ export default {
 | onClick | 点击时的回调函数 | _Function_ | - |
 | onOpened | 完全展示后的回调函数 | _Function_ | - |
 | onClose | 关闭时的回调函数 | _Function_ | - |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值                    | 描述 |
+| -------------------------------- | ------------------------- | ---- |
+| @notify-text-color               | `@white`                  | -    |
+| @notify-padding                  | `@padding-xs @padding-md` | -    |
+| @notify-font-size                | `@font-size-md`           | -    |
+| @notify-line-height              | `@line-height-md`         | -    |
+| @notify-primary-background-color | `@blue`                   | -    |
+| @notify-success-background-color | `@green`                  | -    |
+| @notify-danger-background-color  | `@red`                    | -    |
+| @notify-warning-background-color | `@orange`                 | -    |
diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md
index 523720dd8..8dbcfa936 100644
--- a/src/number-keyboard/README.md
+++ b/src/number-keyboard/README.md
@@ -15,9 +15,7 @@ app.use(NumberKeyboard);
 ### Default Keyboard
 
 ```html
-<van-cell @touchstart.stop="show = true">
-  Show Keyboard
-</van-cell>
+<van-cell @touchstart.stop="show = true"> Show Keyboard </van-cell>
 <van-number-keyboard
   :show="show"
   @blur="show = false"
@@ -177,3 +175,28 @@ export default {
 | delete     | Custom delete key content |
 | extra-key  | Custom extra key content  |
 | title-left | Custom title left content |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @number-keyboard-background-color | `@gray-2` | - |
+| @number-keyboard-key-height | `48px` | - |
+| @number-keyboard-key-font-size | `28px` | - |
+| @number-keyboard-key-active-color | `@gray-3` | - |
+| @number-keyboard-delete-font-size | `@font-size-lg` | - |
+| @number-keyboard-title-color | `@gray-7` | - |
+| @number-keyboard-title-height | `34px` | - |
+| @number-keyboard-title-font-size | `@font-size-lg` | - |
+| @number-keyboard-close-padding | `0 @padding-md` | - |
+| @number-keyboard-close-color | `@text-link-color` | - |
+| @number-keyboard-close-font-size | `@font-size-md` | - |
+| @number-keyboard-button-text-color | `@white` | - |
+| @number-keyboard-button-background-color | `@blue` | - |
+| @number-keyboard-cursor-color | `@text-color` | - |
+| @number-keyboard-cursor-width | `1px` | - |
+| @number-keyboard-cursor-height | `40%` | - |
+| @number-keyboard-cursor-animation-duration | `1s` | - |
+| @number-keyboard-z-index | `100` | - |
diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md
index f00da67fc..43d4055b2 100644
--- a/src/number-keyboard/README.zh-CN.md
+++ b/src/number-keyboard/README.zh-CN.md
@@ -21,9 +21,7 @@ app.use(NumberKeyboard);
 数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作。
 
 ```html
-<van-cell @touchstart.stop="show = true">
-  弹出默认键盘
-</van-cell>
+<van-cell @touchstart.stop="show = true"> 弹出默认键盘 </van-cell>
 <van-number-keyboard
   :show="show"
   @blur="show = false"
@@ -191,6 +189,31 @@ export default {
 | extra-key  | 自定义左下角按键内容 |
 | title-left | 自定义标题栏左侧内容 |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                       | 默认值             | 描述 |
+| ------------------------------------------ | ------------------ | ---- |
+| @number-keyboard-background-color          | `@gray-2`          | -    |
+| @number-keyboard-key-height                | `48px`             | -    |
+| @number-keyboard-key-font-size             | `28px`             | -    |
+| @number-keyboard-key-active-color          | `@gray-3`          | -    |
+| @number-keyboard-delete-font-size          | `@font-size-lg`    | -    |
+| @number-keyboard-title-color               | `@gray-7`          | -    |
+| @number-keyboard-title-height              | `34px`             | -    |
+| @number-keyboard-title-font-size           | `@font-size-lg`    | -    |
+| @number-keyboard-close-padding             | `0 @padding-md`    | -    |
+| @number-keyboard-close-color               | `@text-link-color` | -    |
+| @number-keyboard-close-font-size           | `@font-size-md`    | -    |
+| @number-keyboard-button-text-color         | `@white`           | -    |
+| @number-keyboard-button-background-color   | `@blue`            | -    |
+| @number-keyboard-cursor-color              | `@text-color`      | -    |
+| @number-keyboard-cursor-width              | `1px`              | -    |
+| @number-keyboard-cursor-height             | `40%`              | -    |
+| @number-keyboard-cursor-animation-duration | `1s`               | -    |
+| @number-keyboard-z-index                   | `100`              | -    |
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？
diff --git a/src/overlay/README.md b/src/overlay/README.md
index 815dc9254..6b572382d 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -78,3 +78,12 @@ export default {
 | Name    | Description  |
 | ------- | ------------ |
 | default | Default slot |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                      | Default Value        | Description |
+| ------------------------- | -------------------- | ----------- |
+| @overlay-z-index          | `1`                  | -           |
+| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | -           |
diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md
index 41da85523..6ab916558 100644
--- a/src/overlay/README.zh-CN.md
+++ b/src/overlay/README.zh-CN.md
@@ -84,3 +84,12 @@ export default {
 | 名称    | 说明                               |
 | ------- | ---------------------------------- |
 | default | 默认插槽，用于在遮罩层上方嵌入内容 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                      | 默认值               | 描述 |
+| ------------------------- | -------------------- | ---- |
+| @overlay-z-index          | `1`                  | -    |
+| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | -    |
diff --git a/src/pagination/README.md b/src/pagination/README.md
index c3422928a..7e92512b8 100644
--- a/src/pagination/README.md
+++ b/src/pagination/README.md
@@ -88,3 +88,19 @@ export default {
 | page `v2.10.9` | Custom pagination item | _{ number: number, text: string, active: boolean }_ |
 | prev-text `v2.10.9` | Custom prev text | `-` |
 | next-text `v2.10.9` | Custom next text | `-` |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @pagination-height | `40px` | - |
+| @pagination-font-size | `@font-size-md` | - |
+| @pagination-item-width | `36px` | - |
+| @pagination-item-default-color | `@blue` | - |
+| @pagination-item-disabled-color | `@gray-7` | - |
+| @pagination-item-disabled-background-color | `@background-color` | - |
+| @pagination-background-color | `@white` | - |
+| @pagination-desc-color | `@gray-7` | - |
+| @pagination-disabled-opacity | `@disabled-opacity` | - |
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index 86cbc5c39..f054ed8c9 100644
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@@ -96,3 +96,19 @@ export default {
 | page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
 | prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` |
 | next-text `v2.10.9` | 自定义下一页按钮文字 | `-` |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                       | 默认值              | 描述 |
+| ------------------------------------------ | ------------------- | ---- |
+| @pagination-height                         | `40px`              | -    |
+| @pagination-font-size                      | `@font-size-md`     | -    |
+| @pagination-item-width                     | `36px`              | -    |
+| @pagination-item-default-color             | `@blue`             | -    |
+| @pagination-item-disabled-color            | `@gray-7`           | -    |
+| @pagination-item-disabled-background-color | `@background-color` | -    |
+| @pagination-background-color               | `@white`            | -    |
+| @pagination-desc-color                     | `@gray-7`           | -    |
+| @pagination-disabled-opacity               | `@disabled-opacity` | -    |
diff --git a/src/password-input/README.md b/src/password-input/README.md
index 832330d5e..28ed5614a 100644
--- a/src/password-input/README.md
+++ b/src/password-input/README.md
@@ -135,3 +135,20 @@ export default {
 | Event | Description                   | Arguments |
 | ----- | ----------------------------- | --------- |
 | focus | Emitted when input is focused | -         |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value   | Description |
+| -------------------------------- | --------------- | ----------- |
+| @password-input-height           | `50px`          | -           |
+| @password-input-margin           | `0 @padding-md` | -           |
+| @password-input-font-size        | `20px`          | -           |
+| @password-input-border-radius    | `6px`           | -           |
+| @password-input-background-color | `@white`        | -           |
+| @password-input-info-color       | `@gray-6`       | -           |
+| @password-input-info-font-size   | `@font-size-md` | -           |
+| @password-input-error-info-color | `@red`          | -           |
+| @password-input-dot-size         | `10px`          | -           |
+| @password-input-dot-color        | `@black`        | -           |
diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md
index 2d3ceb8ef..d37c019d9 100644
--- a/src/password-input/README.zh-CN.md
+++ b/src/password-input/README.zh-CN.md
@@ -145,3 +145,20 @@ export default {
 | 事件名 | 说明             | 回调参数 |
 | ------ | ---------------- | -------- |
 | focus  | 输入框聚焦时触发 | -        |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值          | 描述 |
+| -------------------------------- | --------------- | ---- |
+| @password-input-height           | `50px`          | -    |
+| @password-input-margin           | `0 @padding-md` | -    |
+| @password-input-font-size        | `20px`          | -    |
+| @password-input-border-radius    | `6px`           | -    |
+| @password-input-background-color | `@white`        | -    |
+| @password-input-info-color       | `@gray-6`       | -    |
+| @password-input-info-font-size   | `@font-size-md` | -    |
+| @password-input-error-info-color | `@red`          | -    |
+| @password-input-dot-size         | `10px`          | -    |
+| @password-input-dot-color        | `@black`        | -    |
diff --git a/src/picker/README.md b/src/picker/README.md
index 864eb9a00..e12f5f756 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -303,3 +303,23 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Picker
 | getColumnValues | Get columns data of the column | columnIndex | values |
 | setColumnValues | Set columns data of the column | columnIndex, values | - |
 | confirm `v2.4.0` | Stop scrolling and emit confirm event | - | - |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                            | Default Value              | Description |
+| ------------------------------- | -------------------------- | ----------- |
+| @picker-background-color        | `@white`                   | -           |
+| @picker-toolbar-height          | `44px`                     | -           |
+| @picker-title-font-size         | `@font-size-lg`            | -           |
+| @picker-title-line-height       | `@line-height-md`          | -           |
+| @picker-action-padding          | `0 @padding-md`            | -           |
+| @picker-action-font-size        | `@font-size-md`            | -           |
+| @picker-confirm-action-color    | `@text-link-color`         | -           |
+| @picker-cancel-action-color     | `@gray-6`                  | -           |
+| @picker-option-font-size        | `@font-size-lg`            | -           |
+| @picker-option-text-color       | `@black`                   | -           |
+| @picker-option-disabled-opacity | `0.3`                      | -           |
+| @picker-loading-icon-color      | `@blue`                    | -           |
+| @picker-loading-mask-color      | `rgba(255, 255, 255, 0.9)` | -           |
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index c63535a21..862511e39 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -329,6 +329,26 @@ export default {
 | setColumnValues | 设置对应列中所有选项 | columnIndex, values | - |
 | confirm `v2.4.0` | 停止惯性滚动并触发 confirm 事件 | - | - |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                            | 默认值                     | 描述 |
+| ------------------------------- | -------------------------- | ---- |
+| @picker-background-color        | `@white`                   | -    |
+| @picker-toolbar-height          | `44px`                     | -    |
+| @picker-title-font-size         | `@font-size-lg`            | -    |
+| @picker-title-line-height       | `@line-height-md`          | -    |
+| @picker-action-padding          | `0 @padding-md`            | -    |
+| @picker-action-font-size        | `@font-size-md`            | -    |
+| @picker-confirm-action-color    | `@text-link-color`         | -    |
+| @picker-cancel-action-color     | `@gray-6`                  | -    |
+| @picker-option-font-size        | `@font-size-lg`            | -    |
+| @picker-option-text-color       | `@black`                   | -    |
+| @picker-option-disabled-opacity | `0.3`                      | -    |
+| @picker-loading-icon-color      | `@blue`                    | -    |
+| @picker-loading-mask-color      | `rgba(255, 255, 255, 0.9)` | -    |
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？
diff --git a/src/popover/README.md b/src/popover/README.md
index 45fe3ae75..059a3aae3 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -195,3 +195,23 @@ export default {
 | --------- | ----------------- |
 | default   | Custom content    |
 | reference | Reference Element |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @popover-arrow-size | `6px` | - |
+| @popover-border-radius | `@border-radius-lg` | - |
+| @popover-action-width | `128px` | - |
+| @popover-action-height | `44px` | - |
+| @popover-action-font-size | `@font-size-md` | - |
+| @popover-action-line-height | `@line-height-md` | - |
+| @popover-action-icon-size | `20px` | - |
+| @popover-light-text-color | `@text-color` | - |
+| @popover-light-background-color | `@white` | - |
+| @popover-light-action-disabled-text-color | `@gray-5` | - |
+| @popover-dark-text-color | `@white` | - |
+| @popover-dark-background-color | `#4a4a4a` | - |
+| @popover-dark-action-disabled-text-color | `@gray-6` | - |
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index dbcc02404..4c04a6f63 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -239,3 +239,23 @@ export default {
 | --------- | --------------------------- |
 | default   | 自定义菜单内容              |
 | reference | 触发 Popover 显示的元素内容 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                      | 默认值              | 描述 |
+| ----------------------------------------- | ------------------- | ---- |
+| @popover-arrow-size                       | `6px`               | -    |
+| @popover-border-radius                    | `@border-radius-lg` | -    |
+| @popover-action-width                     | `128px`             | -    |
+| @popover-action-height                    | `44px`              | -    |
+| @popover-action-font-size                 | `@font-size-md`     | -    |
+| @popover-action-line-height               | `@line-height-md`   | -    |
+| @popover-action-icon-size                 | `20px`              | -    |
+| @popover-light-text-color                 | `@text-color`       | -    |
+| @popover-light-background-color           | `@white`            | -    |
+| @popover-light-action-disabled-text-color | `@gray-5`           | -    |
+| @popover-dark-text-color                  | `@white`            | -    |
+| @popover-dark-background-color            | `#4a4a4a`           | -    |
+| @popover-dark-action-disabled-text-color  | `@gray-6`           | -    |
diff --git a/src/popup/README.md b/src/popup/README.md
index 9c2954c09..c6fed9c75 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -142,3 +142,18 @@ export default {
 | close | Emitted when closing Popup | - |
 | opened | Emitted when Popup is opened | - |
 | closed | Emitted when Popup is closed | - |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @popup-background-color | `@white` | - |
+| @popup-transition | `transform @animation-duration-base` | - |
+| @popup-round-border-radius | `16px` | - |
+| @popup-close-icon-size | `22px` | - |
+| @popup-close-icon-color | `@gray-5` | - |
+| @popup-close-icon-active-color | `@gray-6` | - |
+| @popup-close-icon-margin | `16px` | - |
+| @popup-close-icon-z-index | `1` | - |
diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
index b849eedf9..ac89c2ca5 100644
--- a/src/popup/README.zh-CN.md
+++ b/src/popup/README.zh-CN.md
@@ -152,3 +152,18 @@ export default {
 | close                      | 关闭弹出层时触发           | -              |
 | opened                     | 打开弹出层且动画结束后触发 | -              |
 | closed                     | 关闭弹出层且动画结束后触发 | -              |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                           | 默认值                               | 描述 |
+| ------------------------------ | ------------------------------------ | ---- |
+| @popup-background-color        | `@white`                             | -    |
+| @popup-transition              | `transform @animation-duration-base` | -    |
+| @popup-round-border-radius     | `16px`                               | -    |
+| @popup-close-icon-size         | `22px`                               | -    |
+| @popup-close-icon-color        | `@gray-5`                            | -    |
+| @popup-close-icon-active-color | `@gray-6`                            | -    |
+| @popup-close-icon-margin       | `16px`                               | -    |
+| @popup-close-icon-z-index      | `1`                                  | -    |
diff --git a/src/progress/README.md b/src/progress/README.md
index 628471aba..6ee814ae9 100644
--- a/src/progress/README.md
+++ b/src/progress/README.md
@@ -70,3 +70,18 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call insta
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
 | resize | Resize Progress when container element resized or visibility changed | - | - |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value   | Description |
+| -------------------------------- | --------------- | ----------- |
+| @progress-height                 | `4px`           | -           |
+| @progress-color                  | `@blue`         | -           |
+| @progress-background-color       | `@gray-3`       | -           |
+| @progress-pivot-padding          | `0 5px`         | -           |
+| @progress-pivot-text-color       | `@white`        | -           |
+| @progress-pivot-font-size        | `@font-size-xs` | -           |
+| @progress-pivot-line-height      | `1.6`           | -           |
+| @progress-pivot-background-color | `@blue`         | -           |
diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md
index 25b371969..8f603d73f 100644
--- a/src/progress/README.zh-CN.md
+++ b/src/progress/README.zh-CN.md
@@ -79,6 +79,21 @@ app.use(Progress);
 | ------ | -------------------------------------------- | ---- | ------ |
 | resize | 外层元素大小变化后，可以调用此方法来触发重绘 | -    | -      |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值          | 描述 |
+| -------------------------------- | --------------- | ---- |
+| @progress-height                 | `4px`           | -    |
+| @progress-color                  | `@blue`         | -    |
+| @progress-background-color       | `@gray-3`       | -    |
+| @progress-pivot-padding          | `0 5px`         | -    |
+| @progress-pivot-text-color       | `@white`        | -    |
+| @progress-pivot-font-size        | `@font-size-xs` | -    |
+| @progress-pivot-line-height      | `1.6`           | -    |
+| @progress-pivot-background-color | `@blue`         | -    |
+
 ## 常见问题
 
 ### 组件从隐藏状态切换到显示状态时，渲染不正确？
diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md
index 1d9b3e9c5..8d9baa186 100644
--- a/src/pull-refresh/README.md
+++ b/src/pull-refresh/README.md
@@ -124,3 +124,13 @@ Use slots to custom tips.
 | loosing | Content of head when at loosing       | { distance } |
 | loading | Content of head when at loading       | { distance } |
 | success | Content of head when succeed          | -            |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                          | Default Value   | Description |
+| ----------------------------- | --------------- | ----------- |
+| @pull-refresh-head-height     | `50px`          | -           |
+| @pull-refresh-head-font-size  | `@font-size-md` | -           |
+| @pull-refresh-head-text-color | `@gray-6`       | -           |
diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md
index 0426a4441..35abc5164 100644
--- a/src/pull-refresh/README.zh-CN.md
+++ b/src/pull-refresh/README.zh-CN.md
@@ -132,6 +132,16 @@ export default {
 | loading | 加载过程中顶部内容   | { distance: 当前下拉距离 } |
 | success | 刷新成功提示内容     | -                          |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                          | 默认值          | 描述 |
+| ----------------------------- | --------------- | ---- |
+| @pull-refresh-head-height     | `50px`          | -    |
+| @pull-refresh-head-font-size  | `@font-size-md` | -    |
+| @pull-refresh-head-text-color | `@gray-6`       | -    |
+
 ## 常见问题
 
 ### PullReresh 的内容未填满屏幕时，只有一部分区域可以下拉？
diff --git a/src/radio/README.md b/src/radio/README.md
index fd026f9ed..cb10aebf1 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -151,7 +151,7 @@ export default {
 ### Radio Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | name | Radio name | _any_ | - |
 | shape | Can be set to `square` | _string_ | `round` |
 | disabled | Whether to disable radio | _boolean_ | `false` |
@@ -163,7 +163,7 @@ export default {
 ### RadioGroup Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | v-model (v-model) | Name of checked radio | _any_ | - |
 | disabled | Disable all radios | _boolean_ | `false` |
 | direction `v2.5.0` | Direction, can be set to `horizontal` | _string_ | `vertical` |
@@ -188,3 +188,19 @@ export default {
 | ------- | ------------ | ------------------ |
 | default | Custom label | -                  |
 | icon    | Custom icon  | _checked: boolean_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value              | Description |
+| -------------------------------- | -------------------------- | ----------- |
+| @radio-size                      | `20px`                     | -           |
+| @radio-border-color              | `@gray-5`                  | -           |
+| @radio-transition-duration       | `@animation-duration-fast` | -           |
+| @radio-label-margin              | `@padding-xs`              | -           |
+| @radio-label-color               | `@text-color`              | -           |
+| @radio-checked-icon-color        | `@blue`                    | -           |
+| @radio-disabled-icon-color       | `@gray-5`                  | -           |
+| @radio-disabled-label-color      | `@gray-5`                  | -           |
+| @radio-disabled-background-color | `@border-color`            | -           |
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 84ee0354f..895fc12e1 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -206,3 +206,19 @@ export default {
 | ------- | ---------- | ------------------ |
 | default | 自定义文本 | -                  |
 | icon    | 自定义图标 | _checked: boolean_ |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值                     | 描述 |
+| -------------------------------- | -------------------------- | ---- |
+| @radio-size                      | `20px`                     | -    |
+| @radio-border-color              | `@gray-5`                  | -    |
+| @radio-transition-duration       | `@animation-duration-fast` | -    |
+| @radio-label-margin              | `@padding-xs`              | -    |
+| @radio-label-color               | `@text-color`              | -    |
+| @radio-checked-icon-color        | `@blue`                    | -    |
+| @radio-disabled-icon-color       | `@gray-5`                  | -    |
+| @radio-disabled-label-color      | `@gray-5`                  | -    |
+| @radio-disabled-background-color | `@border-color`            | -    |
diff --git a/src/rate/README.md b/src/rate/README.md
index 8353e572e..7107672e3 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -122,3 +122,15 @@ export default {
 | Event  | Description               | Parameters   |
 | ------ | ------------------------- | ------------ |
 | change | Emitted when rate changed | current rate |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                      | Default Value   | Description |
+| ------------------------- | --------------- | ----------- |
+| @rate-icon-size           | `20px`          | -           |
+| @rate-icon-gutter         | `@padding-base` | -           |
+| @rate-icon-void-color     | `@gray-5`       | -           |
+| @rate-icon-full-color     | `@red`          | -           |
+| @rate-icon-disabled-color | `@gray-5`       | -           |
diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md
index 7a79e605f..9ed73d96d 100644
--- a/src/rate/README.zh-CN.md
+++ b/src/rate/README.zh-CN.md
@@ -126,3 +126,15 @@ export default {
 | 事件名 | 说明                     | 回调参数 |
 | ------ | ------------------------ | -------- |
 | change | 当前分值变化时触发的事件 | 当前分值 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                      | 默认值          | 描述 |
+| ------------------------- | --------------- | ---- |
+| @rate-icon-size           | `20px`          | -    |
+| @rate-icon-gutter         | `@padding-base` | -    |
+| @rate-icon-void-color     | `@gray-5`       | -    |
+| @rate-icon-full-color     | `@red`          | -    |
+| @rate-icon-disabled-color | `@gray-5`       | -    |
diff --git a/src/search/README.md b/src/search/README.md
index 29f916947..69efd2a8d 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -159,3 +159,21 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search
 | label      | Custom Search label                                         |
 | left-icon  | Custom left icon                                            |
 | right-icon | Custom right icon                                           |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value      | Description |
+| -------------------------------- | ------------------ | ----------- |
+| @search-padding                  | `10px @padding-sm` | -           |
+| @search-background-color         | `@white`           | -           |
+| @search-content-background-color | `@gray-1`          | -           |
+| @search-input-height             | `34px`             | -           |
+| @search-label-padding            | `0 5px`            | -           |
+| @search-label-color              | `@text-color`      | -           |
+| @search-label-font-size          | `@font-size-md`    | -           |
+| @search-left-icon-color          | `@gray-6`          | -           |
+| @search-action-padding           | `0 @padding-xs`    | -           |
+| @search-action-text-color        | `@text-color`      | -           |
+| @search-action-font-size         | `@font-size-md`    | -           |
diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md
index 123cf4d84..510578043 100644
--- a/src/search/README.zh-CN.md
+++ b/src/search/README.zh-CN.md
@@ -176,6 +176,24 @@ export default {
 | left-icon  | 自定义左侧图标（搜索框内）                              |
 | right-icon | 自定义右侧图标（搜索框内）                              |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值             | 描述 |
+| -------------------------------- | ------------------ | ---- |
+| @search-padding                  | `10px @padding-sm` | -    |
+| @search-background-color         | `@white`           | -    |
+| @search-content-background-color | `@gray-1`          | -    |
+| @search-input-height             | `34px`             | -    |
+| @search-label-padding            | `0 5px`            | -    |
+| @search-label-color              | `@text-color`      | -    |
+| @search-label-font-size          | `@font-size-md`    | -    |
+| @search-left-icon-color          | `@gray-6`          | -    |
+| @search-action-padding           | `0 @padding-xs`    | -    |
+| @search-action-text-color        | `@text-color`      | -    |
+| @search-action-font-size         | `@font-size-md`    | -    |
+
 ## 常见问题
 
 ### 在桌面端点击清除按钮无效？
diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index 5cbfc017d..5d802972e 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -148,3 +148,25 @@ export default {
 | ----------- | ------------------ |
 | title       | Custom title       |
 | description | Custom description |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - |
+| @share-sheet-title-color | `@text-color` | - |
+| @share-sheet-title-font-size | `@font-size-md` | - |
+| @share-sheet-title-line-height | `@line-height-md` | - |
+| @share-sheet-description-color | `@gray-6` | - |
+| @share-sheet-description-font-size | `@font-size-sm` | - |
+| @share-sheet-description-line-height | `16px` | - |
+| @share-sheet-icon-size | `48px` | - |
+| @share-sheet-option-name-color | `@gray-7` | - |
+| @share-sheet-option-name-font-size | `@font-size-sm` | - |
+| @share-sheet-option-description-color | `@gray-5` | - |
+| @share-sheet-option-description-font-size | `@font-size-sm` | - |
+| @share-sheet-cancel-button-font-size | `@font-size-lg` | - |
+| @share-sheet-cancel-button-height | `48px` | - |
+| @share-sheet-cancel-button-background | `@white` | - |
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index c8c769da6..9b7c2d66d 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -197,6 +197,28 @@ export default {
 | title       | 自定义顶部标题 |
 | description | 自定义描述文字 |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - |
+| @share-sheet-title-color | `@text-color` | - |
+| @share-sheet-title-font-size | `@font-size-md` | - |
+| @share-sheet-title-line-height | `@line-height-md` | - |
+| @share-sheet-description-color | `@gray-6` | - |
+| @share-sheet-description-font-size | `@font-size-sm` | - |
+| @share-sheet-description-line-height | `16px` | - |
+| @share-sheet-icon-size | `48px` | - |
+| @share-sheet-option-name-color | `@gray-7` | - |
+| @share-sheet-option-name-font-size | `@font-size-sm` | - |
+| @share-sheet-option-description-color | `@gray-5` | - |
+| @share-sheet-option-description-font-size | `@font-size-sm` | - |
+| @share-sheet-cancel-button-font-size | `@font-size-lg` | - |
+| @share-sheet-cancel-button-height | `48px` | - |
+| @share-sheet-cancel-button-background | `@white` | - |
+
 ## 常见问题
 
 ### 如何实现分享逻辑？
diff --git a/src/sidebar/README.md b/src/sidebar/README.md
index b7cf26eda..76516bc36 100644
--- a/src/sidebar/README.md
+++ b/src/sidebar/README.md
@@ -117,3 +117,24 @@ export default {
 | Name            | Description       |
 | --------------- | ----------------- |
 | title `v2.10.8` | Custom item title |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                               | Default Value       | Description |
+| ---------------------------------- | ------------------- | ----------- |
+| @sidebar-width                     | `80px`              | -           |
+| @sidebar-font-size                 | `@font-size-md`     | -           |
+| @sidebar-line-height               | `@line-height-md`   | -           |
+| @sidebar-text-color                | `@text-color`       | -           |
+| @sidebar-disabled-text-color       | `@gray-5`           | -           |
+| @sidebar-padding                   | `20px @padding-sm`  | -           |
+| @sidebar-active-color              | `@active-color`     | -           |
+| @sidebar-background-color          | `@background-color` | -           |
+| @sidebar-selected-font-weight      | `@font-weight-bold` | -           |
+| @sidebar-selected-text-color       | `@text-color`       | -           |
+| @sidebar-selected-border-width     | `4px`               | -           |
+| @sidebar-selected-border-height    | `16px`              | -           |
+| @sidebar-selected-border-color     | `@red`              | -           |
+| @sidebar-selected-background-color | `@white`            | -           |
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index e7fac9863..f27e1ea0e 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -125,3 +125,24 @@ export default {
 | Name            | Description |
 | --------------- | ----------- |
 | title `v2.10.8` | 自定义标题  |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                               | 默认值              | 描述 |
+| ---------------------------------- | ------------------- | ---- |
+| @sidebar-width                     | `80px`              | -    |
+| @sidebar-font-size                 | `@font-size-md`     | -    |
+| @sidebar-line-height               | `@line-height-md`   | -    |
+| @sidebar-text-color                | `@text-color`       | -    |
+| @sidebar-disabled-text-color       | `@gray-5`           | -    |
+| @sidebar-padding                   | `20px @padding-sm`  | -    |
+| @sidebar-active-color              | `@active-color`     | -    |
+| @sidebar-background-color          | `@background-color` | -    |
+| @sidebar-selected-font-weight      | `@font-weight-bold` | -    |
+| @sidebar-selected-text-color       | `@text-color`       | -    |
+| @sidebar-selected-border-width     | `4px`               | -    |
+| @sidebar-selected-border-height    | `16px`              | -    |
+| @sidebar-selected-border-color     | `@red`              | -    |
+| @sidebar-selected-background-color | `@white`            | -    |
diff --git a/src/skeleton/README.md b/src/skeleton/README.md
index 171fbb119..4f2b2cc4d 100644
--- a/src/skeleton/README.md
+++ b/src/skeleton/README.md
@@ -61,3 +61,17 @@ export default {
 | title-width | Title width | _number \| string_ | `40%` |
 | avatar-size | Size of avatar placeholder | _number \| string_ | `32px` |
 | avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                              | Default Value   | Description |
+| --------------------------------- | --------------- | ----------- |
+| @skeleton-row-height              | `16px`          | -           |
+| @skeleton-row-background-color    | `@active-color` | -           |
+| @skeleton-row-margin-top          | `@padding-sm`   | -           |
+| @skeleton-title-width             | `40%`           | -           |
+| @skeleton-avatar-size             | `32px`          | -           |
+| @skeleton-avatar-background-color | `@active-color` | -           |
+| @skeleton-animation-duration      | `1.2s`          | -           |
diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md
index d35f02e3a..3547169d3 100644
--- a/src/skeleton/README.zh-CN.md
+++ b/src/skeleton/README.zh-CN.md
@@ -71,3 +71,17 @@ export default {
 | title-width | 标题占位图宽度 | _number \| string_ | `40%` |
 | avatar-size | 头像占位图大小 | _number \| string_ | `32px` |
 | avatar-shape | 头像占位图形状，可选值为 `square` | _string_ | `round` |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                              | 默认值          | 描述 |
+| --------------------------------- | --------------- | ---- |
+| @skeleton-row-height              | `16px`          | -    |
+| @skeleton-row-background-color    | `@active-color` | -    |
+| @skeleton-row-margin-top          | `@padding-sm`   | -    |
+| @skeleton-title-width             | `40%`           | -    |
+| @skeleton-avatar-size             | `32px`          | -    |
+| @skeleton-avatar-background-color | `@active-color` | -    |
+| @skeleton-animation-duration      | `1.2s`          | -    |
diff --git a/src/slider/README.md b/src/slider/README.md
index 66e4cc752..980221c88 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -172,3 +172,19 @@ export default {
 | Name   | Description   |
 | ------ | ------------- |
 | button | Custom button |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @slider-active-background-color | `@blue` | - |
+| @slider-inactive-background-color | `@gray-3` | - |
+| @slider-disabled-opacity | `@disabled-opacity` | - |
+| @slider-bar-height | `2px` | - |
+| @slider-button-width | `24px` | - |
+| @slider-button-height | `24px` | - |
+| @slider-button-border-radius | `50%` | - |
+| @slider-button-background-color | `@white` | - |
+| @slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - |
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index 631b095dc..a725c88a4 100644
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@@ -178,3 +178,19 @@ export default {
 | 名称   | 说明           |
 | ------ | -------------- |
 | button | 自定义滑动按钮 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                              | 默认值                         | 描述 |
+| --------------------------------- | ------------------------------ | ---- |
+| @slider-active-background-color   | `@blue`                        | -    |
+| @slider-inactive-background-color | `@gray-3`                      | -    |
+| @slider-disabled-opacity          | `@disabled-opacity`            | -    |
+| @slider-bar-height                | `2px`                          | -    |
+| @slider-button-width              | `24px`                         | -    |
+| @slider-button-height             | `24px`                         | -    |
+| @slider-button-border-radius      | `50%`                          | -    |
+| @slider-button-background-color   | `@white`                       | -    |
+| @slider-button-box-shadow         | `0 1px 2px rgba(0, 0, 0, 0.5)` | -    |
diff --git a/src/stepper/README.md b/src/stepper/README.md
index 26a22538c..8fa1a106a 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -109,7 +109,7 @@ export default {
 ### Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | v-model | Current value | _number \| string_ | - |
 | min | Min value | _number \| string_ | `1` |
 | max | Max value | _number \| string_ | - |
@@ -142,3 +142,24 @@ export default {
 | minus | Emitted when the minus button is clicked | - |
 | focus | Emitted when the input is focused | _event: Event_ |
 | blur | Emitted when the input is blured | _event: Event_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                     | Default Value       | Description |
+| ---------------------------------------- | ------------------- | ----------- |
+| @stepper-active-color                    | `#e8e8e8`           | -           |
+| @stepper-background-color                | `@active-color`     | -           |
+| @stepper-button-icon-color               | `@text-color`       | -           |
+| @stepper-button-disabled-color           | `@background-color` | -           |
+| @stepper-button-disabled-icon-color      | `@gray-5`           | -           |
+| @stepper-button-round-theme-color        | `@red`              | -           |
+| @stepper-input-width                     | `32px`              | -           |
+| @stepper-input-height                    | `28px`              | -           |
+| @stepper-input-font-size                 | `@font-size-md`     | -           |
+| @stepper-input-line-height               | `normal`            | -           |
+| @stepper-input-text-color                | `@text-color`       | -           |
+| @stepper-input-disabled-text-color       | `@gray-5`           | -           |
+| @stepper-input-disabled-background-color | `@active-color`     | -           |
+| @stepper-border-radius                   | `@border-radius-md` | -           |
diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md
index f3ebe7dee..70db44744 100644
--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@@ -169,6 +169,27 @@ export default {
 | focus | 输入框聚焦时触发 | _event: Event_ |
 | blur | 输入框失焦时触发 | _event: Event_ |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                     | 默认值              | 描述 |
+| ---------------------------------------- | ------------------- | ---- |
+| @stepper-active-color                    | `#e8e8e8`           | -    |
+| @stepper-background-color                | `@active-color`     | -    |
+| @stepper-button-icon-color               | `@text-color`       | -    |
+| @stepper-button-disabled-color           | `@background-color` | -    |
+| @stepper-button-disabled-icon-color      | `@gray-5`           | -    |
+| @stepper-button-round-theme-color        | `@red`              | -    |
+| @stepper-input-width                     | `32px`              | -    |
+| @stepper-input-height                    | `28px`              | -    |
+| @stepper-input-font-size                 | `@font-size-md`     | -    |
+| @stepper-input-line-height               | `normal`            | -    |
+| @stepper-input-text-color                | `@text-color`       | -    |
+| @stepper-input-disabled-text-color       | `@gray-5`           | -    |
+| @stepper-input-disabled-background-color | `@active-color`     | -    |
+| @stepper-border-radius                   | `@border-radius-md` | -    |
+
 ## 常见问题
 
 ### 为什么 value 有时候会变成 string 类型？
diff --git a/src/steps/README.md b/src/steps/README.md
index b1505db12..1fda0fd65 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -89,3 +89,22 @@ export default {
 | Event | Description | Arguments |
 | --- | --- | --- |
 | click-step `v2.5.9` | Emitted when a step's title or icon is clicked | _index: number_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                             | Default Value   | Description |
+| -------------------------------- | --------------- | ----------- |
+| @step-text-color                 | `@gray-6`       | -           |
+| @step-active-color               | `@green`        | -           |
+| @step-process-text-color         | `@text-color`   | -           |
+| @step-font-size                  | `@font-size-md` | -           |
+| @step-line-color                 | `@border-color` | -           |
+| @step-finish-line-color          | `@green`        | -           |
+| @step-finish-text-color          | `@text-color`   | -           |
+| @step-icon-size                  | `12px`          | -           |
+| @step-circle-size                | `5px`           | -           |
+| @step-circle-color               | `@gray-6`       | -           |
+| @step-horizontal-title-font-size | `@font-size-sm` | -           |
+| @steps-background-color          | `@white`        | -           |
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index bd39d61ac..57f09cf3a 100644
--- a/src/steps/README.zh-CN.md
+++ b/src/steps/README.zh-CN.md
@@ -99,3 +99,22 @@ export default {
 | 事件名              | 说明                       | 回调参数        |
 | ------------------- | -------------------------- | --------------- |
 | click-step `v2.5.9` | 点击步骤的标题或图标时触发 | _index: number_ |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                             | 默认值          | 描述 |
+| -------------------------------- | --------------- | ---- |
+| @step-text-color                 | `@gray-6`       | -    |
+| @step-active-color               | `@green`        | -    |
+| @step-process-text-color         | `@text-color`   | -    |
+| @step-font-size                  | `@font-size-md` | -    |
+| @step-line-color                 | `@border-color` | -    |
+| @step-finish-line-color          | `@green`        | -    |
+| @step-finish-text-color          | `@text-color`   | -    |
+| @step-icon-size                  | `12px`          | -    |
+| @step-circle-size                | `5px`           | -    |
+| @step-circle-color               | `@gray-6`       | -    |
+| @step-horizontal-title-font-size | `@font-size-sm` | -    |
+| @steps-background-color          | `@white`        | -    |
diff --git a/src/sticky/README.md b/src/sticky/README.md
index da34cb0f7..8a5d11cf4 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -66,3 +66,11 @@ export default {
 | Event  | Description            | Arguments                      |
 | ------ | ---------------------- | ------------------------------ |
 | scroll | Emitted when scrolling | object: { scrollTop, isFixed } |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name            | Default Value | Description |
+| --------------- | ------------- | ----------- |
+| @sticky-z-index | `99`          | -           |
diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md
index 1e182e22b..c75734da0 100644
--- a/src/sticky/README.zh-CN.md
+++ b/src/sticky/README.zh-CN.md
@@ -76,3 +76,11 @@ export default {
 | 事件名 | 说明       | 回调参数                                       |
 | ------ | ---------- | ---------------------------------------------- |
 | scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称            | 默认值 | 描述 |
+| --------------- | ------ | ---- |
+| @sticky-z-index | `99`   | -    |
diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md
index d98719c4a..6a1c5b419 100644
--- a/src/submit-bar/README.md
+++ b/src/submit-bar/README.md
@@ -89,3 +89,29 @@ Use slot to add custom contents.
 | button `v2.10.12` | Custom button       |
 | top               | Custom top content  |
 | tip               | Custom tips         |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @submit-bar-height | `50px` | - |
+| @submit-bar-z-index | `100` | - |
+| @submit-bar-background-color | `@white` | - |
+| @submit-bar-button-width | `110px` | - |
+| @submit-bar-price-color | `@red` | - |
+| @submit-bar-price-font-size | `@font-size-md` | - |
+| @submit-bar-currency-font-size | `@font-size-md` | - |
+| @submit-bar-text-color | `@text-color` | - |
+| @submit-bar-text-font-size | `@font-size-md` | - |
+| @submit-bar-tip-padding | `@padding-xs @padding-sm` | - |
+| @submit-bar-tip-font-size | `@font-size-sm` | - |
+| @submit-bar-tip-line-height | `1.5` | - |
+| @submit-bar-tip-color | `#f56723` | - |
+| @submit-bar-tip-background-color | `#fff7cc` | - |
+| @submit-bar-tip-icon-size | `12px` | - |
+| @submit-bar-button-height | `40px` | - |
+| @submit-bar-padding | `0 @padding-md` | - |
+| @submit-bar-price-integer-font-size | `20px` | - |
+| @submit-bar-price-font-family | `@price-integer-font-family` | - |
diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md
index 104f7c7cf..3f9022371 100644
--- a/src/submit-bar/README.zh-CN.md
+++ b/src/submit-bar/README.zh-CN.md
@@ -94,3 +94,29 @@ app.use(SubmitBar);
 | button `v2.10.12` | 自定义按钮           |
 | top               | 自定义订单栏上方内容 |
 | tip               | 提示文案中的额外内容 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                | 默认值                       | 描述 |
+| ----------------------------------- | ---------------------------- | ---- |
+| @submit-bar-height                  | `50px`                       | -    |
+| @submit-bar-z-index                 | `100`                        | -    |
+| @submit-bar-background-color        | `@white`                     | -    |
+| @submit-bar-button-width            | `110px`                      | -    |
+| @submit-bar-price-color             | `@red`                       | -    |
+| @submit-bar-price-font-size         | `@font-size-md`              | -    |
+| @submit-bar-currency-font-size      | `@font-size-md`              | -    |
+| @submit-bar-text-color              | `@text-color`                | -    |
+| @submit-bar-text-font-size          | `@font-size-md`              | -    |
+| @submit-bar-tip-padding             | `@padding-xs @padding-sm`    | -    |
+| @submit-bar-tip-font-size           | `@font-size-sm`              | -    |
+| @submit-bar-tip-line-height         | `1.5`                        | -    |
+| @submit-bar-tip-color               | `#f56723`                    | -    |
+| @submit-bar-tip-background-color    | `#fff7cc`                    | -    |
+| @submit-bar-tip-icon-size           | `12px`                       | -    |
+| @submit-bar-button-height           | `40px`                       | -    |
+| @submit-bar-padding                 | `0 @padding-md`              | -    |
+| @submit-bar-price-integer-font-size | `20px`                       | -    |
+| @submit-bar-price-font-family       | `@price-integer-font-family` | -    |
diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
index 22ea8ba5c..a9db6dc79 100644
--- a/src/swipe-cell/README.md
+++ b/src/swipe-cell/README.md
@@ -134,7 +134,18 @@ export default {
 
 Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get SwipeCell instance and call instance methods.
 
-| Name  | Description     | Attribute                | Return value |
-| ----- | --------------- | ------------------------ | ------------ |
-| open  | open SwipeCell  | position: `left | right` | -            |
-| close | close SwipeCell | -                        | -            |
+| Name  | Description     | Attribute       | Return value |
+| ----- | --------------- | --------------- | ------------ | --- |
+| open  | open SwipeCell  | position: `left | right`       | -   |
+| close | close SwipeCell | -               | -            |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @switch-cell-padding-top | `@cell-vertical-padding - 1px` | - |
+| @switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - |
+| @switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - |
+| @switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - |
diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md
index e53b95eb1..f21fc6c99 100644
--- a/src/swipe-cell/README.zh-CN.md
+++ b/src/swipe-cell/README.zh-CN.md
@@ -146,10 +146,21 @@ beforeClose 的第一个参数为对象，对象中包含以下属性：
 
 通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
 
-| 方法名 | 说明             | 参数                     | 返回值 |
-| ------ | ---------------- | ------------------------ | ------ |
-| open   | 打开单元格侧边栏 | position: `left | right` | -      |
-| close  | 收起单元格侧边栏 | -                        | -      |
+| 方法名 | 说明             | 参数            | 返回值 |
+| ------ | ---------------- | --------------- | ------ | --- |
+| open   | 打开单元格侧边栏 | position: `left | right` | -   |
+| close  | 收起单元格侧边栏 | -               | -      |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @switch-cell-padding-top | `@cell-vertical-padding - 1px` | - |
+| @switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - |
+| @switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - |
+| @switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - |
 
 ## 常见问题
 
diff --git a/src/swipe/README.md b/src/swipe/README.md
index c308d5dfe..677a4e072 100644
--- a/src/swipe/README.md
+++ b/src/swipe/README.md
@@ -123,9 +123,7 @@ export default {
   <van-swipe-item>3</van-swipe-item>
   <van-swipe-item>4</van-swipe-item>
   <template #indicator>
-    <div class="custom-indicator">
-      {{ current + 1 }}/4
-    </div>
+    <div class="custom-indicator">{{ current + 1 }}/4</div>
   </template>
 </van-swipe>
 
@@ -210,3 +208,16 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
 | --------- | ---------------- |
 | default   | Content          |
 | indicator | Custom indicator |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                       | Default Value   | Description |
+| ------------------------------------------ | --------------- | ----------- |
+| @swipe-indicator-size                      | `6px`           | -           |
+| @swipe-indicator-margin                    | `@padding-sm`   | -           |
+| @swipe-indicator-active-opacity            | `1`             | -           |
+| @swipe-indicator-inactive-opacity          | `0.3`           | -           |
+| @swipe-indicator-active-background-color   | `@blue`         | -           |
+| @swipe-indicator-inactive-background-color | `@border-color` | -           |
diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
index c945199fe..8f8a0cc12 100644
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@@ -133,9 +133,7 @@ export default {
   <van-swipe-item>3</van-swipe-item>
   <van-swipe-item>4</van-swipe-item>
   <template #indicator>
-    <div class="custom-indicator">
-      {{ current + 1 }}/4
-    </div>
+    <div class="custom-indicator">{{ current + 1 }}/4</div>
   </template>
 </van-swipe>
 
@@ -221,6 +219,19 @@ export default {
 | default   | 轮播内容     |
 | indicator | 自定义指示器 |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                       | 默认值          | 描述 |
+| ------------------------------------------ | --------------- | ---- |
+| @swipe-indicator-size                      | `6px`           | -    |
+| @swipe-indicator-margin                    | `@padding-sm`   | -    |
+| @swipe-indicator-active-opacity            | `1`             | -    |
+| @swipe-indicator-inactive-opacity          | `0.3`           | -    |
+| @swipe-indicator-active-background-color   | `@blue`         | -    |
+| @swipe-indicator-inactive-background-color | `@border-color` | -    |
+
 ## 常见问题
 
 ### 滑动轮播时为什么触发了 click 事件？
diff --git a/src/switch/README.md b/src/switch/README.md
index 2a44eaa03..11e88bb5f 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -109,3 +109,21 @@ export default {
 | ------ | --------------------------------- | -------------- |
 | change | Emitted when check status changed | _value: any_   |
 | click  | Emitted when component is clicked | _event: Event_ |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @switch-size | `30px` | - |
+| @switch-width | `2em` | - |
+| @switch-height | `1em` | - |
+| @switch-node-size | `1em` | - |
+| @switch-node-background-color | `@white` | - |
+| @switch-node-box-shadow | `0 3px 1px 0 rgba(0, 0, 0, 0.05)` | - |
+| @switch-background-color | `@white` | - |
+| @switch-on-background-color | `@blue` | - |
+| @switch-transition-duration | `@animation-duration-base` | - |
+| @switch-disabled-opacity | `@disabled-opacity` | - |
+| @switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - |
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index 18d4b823b..cef9b3f70 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -125,3 +125,21 @@ export default {
 | ------ | ------------------ | -------------- |
 | change | 开关状态切换时触发 | _value: any_   |
 | click  | 点击时触发         | _event: Event_ |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @switch-size | `30px` | - |
+| @switch-width | `2em` | - |
+| @switch-height | `1em` | - |
+| @switch-node-size | `1em` | - |
+| @switch-node-background-color | `@white` | - |
+| @switch-node-box-shadow | `0 3px 1px 0 rgba(0, 0, 0, 0.05)` | - |
+| @switch-background-color | `@white` | - |
+| @switch-on-background-color | `@blue` | - |
+| @switch-transition-duration | `@animation-duration-base` | - |
+| @switch-disabled-opacity | `@disabled-opacity` | - |
+| @switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - |
diff --git a/src/tab/README.md b/src/tab/README.md
index 5fdedbe6f..5417dd81d 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -219,7 +219,7 @@ export default {
 ### Tabs Props
 
 | Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | v-model:active | Index of active tab | _number \| string_ | `0` |
 | type | Can be set to `line` `card` | _string_ | `line` |
 | color | Tab color | _string_ | `#ee0a24` |
@@ -286,3 +286,22 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i
 | ------- | ---------------- |
 | default | Content of tab   |
 | title   | Custom tab title |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                       | Default Value         | Description |
+| -------------------------- | --------------------- | ----------- |
+| @tab-text-color            | `@gray-7`             | -           |
+| @tab-active-text-color     | `@text-color`         | -           |
+| @tab-disabled-text-color   | `@gray-5`             | -           |
+| @tab-font-size             | `@font-size-md`       | -           |
+| @tab-line-height           | `@line-height-md`     | -           |
+| @tabs-default-color        | `@red`                | -           |
+| @tabs-line-height          | `44px`                | -           |
+| @tabs-card-height          | `30px`                | -           |
+| @tabs-nav-background-color | `@white`              | -           |
+| @tabs-bottom-bar-width     | `40px`                | -           |
+| @tabs-bottom-bar-height    | `3px`                 | -           |
+| @tabs-bottom-bar-color     | `@tabs-default-color` | -           |
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index de0641ffb..7f8732712 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -294,6 +294,25 @@ export default {
 | default | 标签页内容 |
 | title   | 自定义标题 |
 
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                       | 默认值                | 描述 |
+| -------------------------- | --------------------- | ---- |
+| @tab-text-color            | `@gray-7`             | -    |
+| @tab-active-text-color     | `@text-color`         | -    |
+| @tab-disabled-text-color   | `@gray-5`             | -    |
+| @tab-font-size             | `@font-size-md`       | -    |
+| @tab-line-height           | `@line-height-md`     | -    |
+| @tabs-default-color        | `@red`                | -    |
+| @tabs-line-height          | `44px`                | -    |
+| @tabs-card-height          | `30px`                | -    |
+| @tabs-nav-background-color | `@white`              | -    |
+| @tabs-bottom-bar-width     | `40px`                | -    |
+| @tabs-bottom-bar-height    | `3px`                 | -    |
+| @tabs-bottom-bar-color     | `@tabs-default-color` | -    |
+
 ## 常见问题
 
 ### 组件从隐藏状态切换到显示状态时，底部条位置错误？
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 3bcc0b969..561af5fd2 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -137,12 +137,8 @@ export default {
 <router-view />
 
 <van-tabbar route>
-  <van-tabbar-item replace to="/home" icon="home-o">
-    Tab
-  </van-tabbar-item>
-  <van-tabbar-item replace to="/search" icon="search">
-    Tab
-  </van-tabbar-item>
+  <van-tabbar-item replace to="/home" icon="home-o"> Tab </van-tabbar-item>
+  <van-tabbar-item replace to="/search" icon="search"> Tab </van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -187,3 +183,20 @@ export default {
 | Name | Description | SlotProps |
 | ---- | ----------- | --------- |
 | icon | Custom icon | active    |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @tabbar-height | `50px` | - |
+| @tabbar-z-index | `1` | - |
+| @tabbar-background-color | `@white` | - |
+| @tabbar-item-font-size | `@font-size-sm` | - |
+| @tabbar-item-text-color | `@gray-7` | - |
+| @tabbar-item-active-color | `@blue` | - |
+| @tabbar-item-active-background-color | `@tabbar-background-color` | - |
+| @tabbar-item-line-height | `1` | - |
+| @tabbar-item-icon-size | `22px` | - |
+| @tabbar-item-margin-bottom | `4px` | - |
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index fa7d0ec8c..feedae624 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -145,12 +145,8 @@ export default {
 <router-view />
 
 <van-tabbar route>
-  <van-tabbar-item replace to="/home" icon="home-o">
-    标签
-  </van-tabbar-item>
-  <van-tabbar-item replace to="/search" icon="search">
-    标签
-  </van-tabbar-item>
+  <van-tabbar-item replace to="/home" icon="home-o"> 标签 </van-tabbar-item>
+  <van-tabbar-item replace to="/search" icon="search"> 标签 </van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -195,3 +191,20 @@ export default {
 | 名称 | 说明       | 参数                   |
 | ---- | ---------- | ---------------------- |
 | icon | 自定义图标 | active: 是否为选中标签 |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                 | 默认值                     | 描述 |
+| ------------------------------------ | -------------------------- | ---- |
+| @tabbar-height                       | `50px`                     | -    |
+| @tabbar-z-index                      | `1`                        | -    |
+| @tabbar-background-color             | `@white`                   | -    |
+| @tabbar-item-font-size               | `@font-size-sm`            | -    |
+| @tabbar-item-text-color              | `@gray-7`                  | -    |
+| @tabbar-item-active-color            | `@blue`                    | -    |
+| @tabbar-item-active-background-color | `@tabbar-background-color` | -    |
+| @tabbar-item-line-height             | `1`                        | -    |
+| @tabbar-item-icon-size               | `22px`                     | -    |
+| @tabbar-item-margin-bottom           | `4px`                      | -    |
diff --git a/src/tag/README.md b/src/tag/README.md
index 10110c86c..a14b85c90 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -106,3 +106,26 @@ export default {
 | ----- | ---------------------------------- | -------------- |
 | click | Emitted when component is clicked  | _event: Event_ |
 | close | Emitted when close icon is clicked | -              |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                        | Default Value               | Description |
+| --------------------------- | --------------------------- | ----------- |
+| @tag-padding                | `0 @padding-base`           | -           |
+| @tag-text-color             | `@white`                    | -           |
+| @tag-font-size              | `@font-size-sm`             | -           |
+| @tag-border-radius          | `2px`                       | -           |
+| @tag-line-height            | `16px`                      | -           |
+| @tag-medium-padding         | `2px 6px`                   | -           |
+| @tag-large-padding          | `@padding-base @padding-xs` | -           |
+| @tag-large-border-radius    | `@border-radius-md`         | -           |
+| @tag-large-font-size        | `@font-size-md`             | -           |
+| @tag-round-border-radius    | `@border-radius-max`        | -           |
+| @tag-danger-color           | `@red`                      | -           |
+| @tag-primary-color          | `@blue`                     | -           |
+| @tag-success-color          | `@green`                    | -           |
+| @tag-warning-color          | `@orange`                   | -           |
+| @tag-default-color          | `@gray-6`                   | -           |
+| @tag-plain-background-color | `@white`                    | -           |
diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md
index 4636b516d..9f63bcf71 100644
--- a/src/tag/README.zh-CN.md
+++ b/src/tag/README.zh-CN.md
@@ -120,3 +120,26 @@ export default {
 | ------ | -------------- | -------------- |
 | click  | 点击时触发     | _event: Event_ |
 | close  | 关闭标签时触发 | -              |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                        | 默认值                      | 描述 |
+| --------------------------- | --------------------------- | ---- |
+| @tag-padding                | `0 @padding-base`           | -    |
+| @tag-text-color             | `@white`                    | -    |
+| @tag-font-size              | `@font-size-sm`             | -    |
+| @tag-border-radius          | `2px`                       | -    |
+| @tag-line-height            | `16px`                      | -    |
+| @tag-medium-padding         | `2px 6px`                   | -    |
+| @tag-large-padding          | `@padding-base @padding-xs` | -    |
+| @tag-large-border-radius    | `@border-radius-md`         | -    |
+| @tag-large-font-size        | `@font-size-md`             | -    |
+| @tag-round-border-radius    | `@border-radius-max`        | -    |
+| @tag-danger-color           | `@red`                      | -    |
+| @tag-primary-color          | `@blue`                     | -    |
+| @tag-success-color          | `@green`                    | -    |
+| @tag-warning-color          | `@orange`                   | -    |
+| @tag-default-color          | `@gray-6`                   | -    |
+| @tag-plain-background-color | `@white`                    | -    |
diff --git a/src/toast/README.md b/src/toast/README.md
index 81fe4976e..863b878ba 100644
--- a/src/toast/README.md
+++ b/src/toast/README.md
@@ -72,7 +72,7 @@ Toast({
 
 ```js
 const toast = Toast.loading({
-  duration: 0, // continuous display toast
+  duration: 0,
   forbidClick: true,
   loadingType: 'spinner',
   message: '3 seconds',
@@ -121,16 +121,12 @@ toast2.clear();
 The Toast default configuration can be globally modified with the `Toast.setDefaultOptions` function.
 
 ```js
-// Set the duration of all Toast to 2000 ms
 Toast.setDefaultOptions({ duration: 2000 });
 
-// Set all loading types Toast to background unclickable
 Toast.setDefaultOptions('loading', { forbidClick: true });
 
-// Reset default options of all Toast
 Toast.resetDefaultOptions();
 
-// Reset default options of all loading Toast
 Toast.resetDefaultOptions('loading');
 ```
 
@@ -169,3 +165,25 @@ Toast.resetDefaultOptions('loading');
 | onClose | Callback function after close | _Function_ | - |
 | transition | Transition, equivalent to `name` prop of [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
 | teleport | Return the mount node for Toast | _string \| Element_ | `body` |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                            | Default Value             | Description |
+| ------------------------------- | ------------------------- | ----------- |
+| @toast-max-width                | `70%`                     | -           |
+| @toast-font-size                | `@font-size-md`           | -           |
+| @toast-text-color               | `@white`                  | -           |
+| @toast-loading-icon-color       | `@white`                  | -           |
+| @toast-line-height              | `@line-height-md`         | -           |
+| @toast-border-radius            | `@border-radius-lg`       | -           |
+| @toast-background-color         | `fade(@black, 70%)`       | -           |
+| @toast-icon-size                | `36px`                    | -           |
+| @toast-text-min-width           | `96px`                    | -           |
+| @toast-text-padding             | `@padding-xs @padding-sm` | -           |
+| @toast-default-padding          | `@padding-md`             | -           |
+| @toast-default-width            | `88px`                    | -           |
+| @toast-default-min-height       | `88px`                    | -           |
+| @toast-position-top-distance    | `20%`                     | -           |
+| @toast-position-bottom-distance | `20%`                     | -           |
diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md
index 2b4356ef6..d41aa1bec 100644
--- a/src/toast/README.zh-CN.md
+++ b/src/toast/README.zh-CN.md
@@ -57,7 +57,6 @@ Toast({
   icon: 'https://img.yzcdn.cn/vant/logo.png',
 });
 
-// 自定义加载图标
 Toast.loading({
   message: '加载中...',
   forbidClick: true,
@@ -87,7 +86,7 @@ Toast({
 
 ```js
 const toast = Toast.loading({
-  duration: 0, // 持续展示 toast
+  duration: 0,
   forbidClick: true,
   message: '倒计时 3 秒',
 });
@@ -99,7 +98,6 @@ const timer = setInterval(() => {
     toast.message = `倒计时 ${second} 秒`;
   } else {
     clearInterval(timer);
-    // 手动清除 Toast
     Toast.clear();
   }
 }, 1000);
@@ -136,16 +134,12 @@ toast2.clear();
 通过 `Toast.setDefaultOptions` 函数可以全局修改 Toast 的默认配置。
 
 ```js
-// 将所有 Toast 的展示时长设置为 2000 毫秒
 Toast.setDefaultOptions({ duration: 2000 });
 
-// 将所有 loading Toast 设置为背景不可点击
 Toast.setDefaultOptions('loading', { forbidClick: true });
 
-// 重置所有 Toast 的默认配置
 Toast.resetDefaultOptions();
 
-// 重置 loading Toast 的默认配置
 Toast.resetDefaultOptions('loading');
 ```
 
@@ -167,7 +161,7 @@ Toast.resetDefaultOptions('loading');
 ### Options
 
 | 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | type | 提示类型，可选值为 `loading` `success`<br>`fail` `html` | _string_ | `text` |
 | position | 位置，可选值为 `top` `bottom` | _string_ | `middle` |
 | message | 文本内容，支持通过`\n`换行 | _string_ | `''` | - |
@@ -184,3 +178,25 @@ Toast.resetDefaultOptions('loading');
 | onClose | 关闭时的回调函数 | _Function_ | - |
 | transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的`name`属性 | _string_ | `van-fade` |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                            | 默认值                    | 描述 |
+| ------------------------------- | ------------------------- | ---- |
+| @toast-max-width                | `70%`                     | -    |
+| @toast-font-size                | `@font-size-md`           | -    |
+| @toast-text-color               | `@white`                  | -    |
+| @toast-loading-icon-color       | `@white`                  | -    |
+| @toast-line-height              | `@line-height-md`         | -    |
+| @toast-border-radius            | `@border-radius-lg`       | -    |
+| @toast-background-color         | `fade(@black, 70%)`       | -    |
+| @toast-icon-size                | `36px`                    | -    |
+| @toast-text-min-width           | `96px`                    | -    |
+| @toast-text-padding             | `@padding-xs @padding-sm` | -    |
+| @toast-default-padding          | `@padding-md`             | -    |
+| @toast-default-width            | `88px`                    | -    |
+| @toast-default-min-height       | `88px`                    | -    |
+| @toast-position-top-distance    | `20%`                     | -    |
+| @toast-position-bottom-distance | `20%`                     | -    |
diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index 2688936de..861e2bc87 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -173,3 +173,18 @@ In every tree object, `text` property defines `id` stands for the unique key whi
   },
 ];
 ```
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                                  | Default Value       | Description |
+| ------------------------------------- | ------------------- | ----------- |
+| @tree-select-font-size                | `@font-size-md`     | -           |
+| @tree-select-nav-background-color     | `@background-color` | -           |
+| @tree-select-content-background-color | `@white`            | -           |
+| @tree-select-nav-item-padding         | `14px @padding-sm`  | -           |
+| @tree-select-item-height              | `48px`              | -           |
+| @tree-select-item-active-color        | `@red`              | -           |
+| @tree-select-item-disabled-color      | `@gray-5`           | -           |
+| @tree-select-item-selected-size       | `16px`              | -           |
diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md
index 98457593b..3fe1d5598 100644
--- a/src/tree-select/README.zh-CN.md
+++ b/src/tree-select/README.zh-CN.md
@@ -179,3 +179,18 @@ export default {
   },
 ];
 ```
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                                  | 默认值              | 描述 |
+| ------------------------------------- | ------------------- | ---- |
+| @tree-select-font-size                | `@font-size-md`     | -    |
+| @tree-select-nav-background-color     | `@background-color` | -    |
+| @tree-select-content-background-color | `@white`            | -    |
+| @tree-select-nav-item-padding         | `14px @padding-sm`  | -    |
+| @tree-select-item-height              | `48px`              | -    |
+| @tree-select-item-active-color        | `@red`              | -    |
+| @tree-select-item-disabled-color      | `@gray-5`           | -    |
+| @tree-select-item-selected-size       | `16px`              | -    |
diff --git a/src/uploader/README.md b/src/uploader/README.md
index d67fe013d..984976286 100644
--- a/src/uploader/README.md
+++ b/src/uploader/README.md
@@ -260,3 +260,34 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Upload
 | --- | --- | --- | --- |
 | closeImagePreview | Close full screen image preview | - | - |
 | chooseFile `v2.5.6` | Trigger choosing files, works with the user action context only because of browser security | - | - |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name                               | Default Value        | Description |
+| ---------------------------------- | -------------------- | ----------- |
+| @uploader-size                     | `80px`               | -           |
+| @uploader-icon-size                | `24px`               | -           |
+| @uploader-icon-color               | `@gray-4`            | -           |
+| @uploader-text-color               | `@gray-6`            | -           |
+| @uploader-text-font-size           | `@font-size-sm`      | -           |
+| @uploader-upload-background-color  | `@gray-1`            | -           |
+| @uploader-upload-active-color      | `@active-color`      | -           |
+| @uploader-delete-color             | `@white`             | -           |
+| @uploader-delete-icon-size         | `14px`               | -           |
+| @uploader-delete-background-color  | `rgba(0, 0, 0, 0.7)` | -           |
+| @uploader-file-background-color    | `@background-color`  | -           |
+| @uploader-file-icon-size           | `20px`               | -           |
+| @uploader-file-icon-color          | `@gray-7`            | -           |
+| @uploader-file-name-padding        | `0 @padding-base`    | -           |
+| @uploader-file-name-margin-top     | `@padding-xs`        | -           |
+| @uploader-file-name-font-size      | `@font-size-sm`      | -           |
+| @uploader-file-name-text-color     | `@gray-7`            | -           |
+| @uploader-mask-background-color    | `fade(@gray-8, 88%)` | -           |
+| @uploader-mask-icon-size           | `22px`               | -           |
+| @uploader-mask-message-font-size   | `@font-size-sm`      | -           |
+| @uploader-mask-message-line-height | `@line-height-xs`    | -           |
+| @uploader-loading-icon-size        | `22px`               | -           |
+| @uploader-loading-icon-color       | `@white`             | -           |
+| @uploader-disabled-opacity         | `@disabled-opacity`  | -           |
diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
index bfcaecbfd..60896da9f 100644
--- a/src/uploader/README.zh-CN.md
+++ b/src/uploader/README.zh-CN.md
@@ -292,3 +292,34 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
 | --- | --- | --- | --- |
 | closeImagePreview | 关闭全屏的图片预览 | - | - |
 | chooseFile `v2.5.6` | 主动调起文件选择，由于浏览器安全限制，只有在用户触发操作的上下文中调用才有效 | - | - |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称                               | 默认值               | 描述 |
+| ---------------------------------- | -------------------- | ---- |
+| @uploader-size                     | `80px`               | -    |
+| @uploader-icon-size                | `24px`               | -    |
+| @uploader-icon-color               | `@gray-4`            | -    |
+| @uploader-text-color               | `@gray-6`            | -    |
+| @uploader-text-font-size           | `@font-size-sm`      | -    |
+| @uploader-upload-background-color  | `@gray-1`            | -    |
+| @uploader-upload-active-color      | `@active-color`      | -    |
+| @uploader-delete-color             | `@white`             | -    |
+| @uploader-delete-icon-size         | `14px`               | -    |
+| @uploader-delete-background-color  | `rgba(0, 0, 0, 0.7)` | -    |
+| @uploader-file-background-color    | `@background-color`  | -    |
+| @uploader-file-icon-size           | `20px`               | -    |
+| @uploader-file-icon-color          | `@gray-7`            | -    |
+| @uploader-file-name-padding        | `0 @padding-base`    | -    |
+| @uploader-file-name-margin-top     | `@padding-xs`        | -    |
+| @uploader-file-name-font-size      | `@font-size-sm`      | -    |
+| @uploader-file-name-text-color     | `@gray-7`            | -    |
+| @uploader-mask-background-color    | `fade(@gray-8, 88%)` | -    |
+| @uploader-mask-icon-size           | `22px`               | -    |
+| @uploader-mask-message-font-size   | `@font-size-sm`      | -    |
+| @uploader-mask-message-line-height | `@line-height-xs`    | -    |
+| @uploader-loading-icon-size        | `22px`               | -    |
+| @uploader-loading-icon-color       | `@white`             | -    |
+| @uploader-disabled-opacity         | `@disabled-opacity`  | -    |