diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md
index 9a963a53d..45f62cd22 100644
--- a/docs/markdown/changelog.en-US.md
+++ b/docs/markdown/changelog.en-US.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### Tips
+
+The current document is the changelog of Vant 2.x. If you want to view the changelog of Vant 3.x, please visit [Vant 3.x Changelog](https://youzan.github.io/vant/next/#/en-US/changelog).
+
 ### Intro
 
 Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
@@ -10,6 +14,8 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 - Minor version：released every one to two months, including backwards compatible features.
 - Major version：including breaking changes and new features.
 
+## Details
+
 ### [v2.11.1](https://github.com/youzan/vant/compare/v2.11.0...v2.11.1)
 
 `2020-11-26`
diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 551294810..849565c6d 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -1,5 +1,9 @@
 # 更新日志
 
+### 提示
+
+当前文档为 Vant 2.x 版本的更新日志，如需查询 Vant 3.x 的更新内容，请访问 [Vant 3.x 更新日志](https://youzan.github.io/vant/next/#/zh-CN/changelog)。
+
 ### 介绍
 
 Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
@@ -10,6 +14,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
 
+## 更新内容
+
 ### [v2.11.1](https://github.com/youzan/vant/compare/v2.11.0...v2.11.1)
 
 `2020-11-26`
@@ -29,7 +35,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 **Bug Fixes**
 
-- Button: 修复图标按钮和图标按钮无法垂直对齐的问题 [#7636](https://github.com/youzan/vant/issues/7636)
+- Button: 修复图标按钮和非图标按钮无法垂直对齐的问题 [#7636](https://github.com/youzan/vant/issues/7636)
 - Popover: 修复在 nuxt.js 上编译报错的问题 [f3ad7e](https://github.com/youzan/vant/commit/f3ad7ed1a77cd2f19001489ea64df0d61429ce33)
 
 ### [v2.11.0](https://github.com/youzan/vant/compare/v2.10.14...v2.11.0)
diff --git a/src/action-bar/README.md b/src/action-bar/README.md
index 2d4392847..facf20cbf 100644
--- a/src/action-bar/README.md
+++ b/src/action-bar/README.md
@@ -58,7 +58,7 @@ Use `badge` prop to show badge in icon.
 
 ```html
 <van-action-bar>
-  <van-action-bar-icon icon="chat-o" text="Icon1" color="#07c160" />
+  <van-action-bar-icon icon="chat-o" text="Icon1" color="#ee0a24" />
   <van-action-bar-icon icon="cart-o" text="Icon2" />
   <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
   <van-action-bar-button type="warning" text="Button" />
diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md
index f81365cfe..caf84c64c 100644
--- a/src/action-bar/README.zh-CN.md
+++ b/src/action-bar/README.zh-CN.md
@@ -60,7 +60,7 @@ export default {
 
 ```html
 <van-action-bar>
-  <van-action-bar-icon icon="chat-o" text="客服" color="#07c160" />
+  <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
   <van-action-bar-icon icon="cart-o" text="购物车" />
   <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
   <van-action-bar-button type="warning" text="加入购物车" />
diff --git a/src/action-bar/demo/index.vue b/src/action-bar/demo/index.vue
index b09aa0b00..e041ab55f 100644
--- a/src/action-bar/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@@ -36,7 +36,7 @@
 
   <demo-block v-if="!isWeapp" :title="t('customIconColor')">
     <van-action-bar>
-      <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#07c160" />
+      <van-action-bar-icon icon="chat-o" :text="t('icon1')" color="#ee0a24" />
       <van-action-bar-icon icon="cart-o" :text="t('icon2')" />
       <van-action-bar-icon icon="star" :text="t('collected')" color="#ff5000" />
       <van-action-bar-button type="warning" :text="t('button1')" />
diff --git a/src/action-bar/test/__snapshots__/demo.spec.js.snap b/src/action-bar/test/__snapshots__/demo.spec.js.snap
index b285e9dca..1cbd0d40b 100644
--- a/src/action-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/action-bar/test/__snapshots__/demo.spec.js.snap
@@ -99,7 +99,7 @@ exports[`should render demo and match snapshot 1`] = `
          tabindex="0"
     >
       <div class="van-badge__wrapper van-icon van-icon-chat-o van-action-bar-icon__icon"
-           style="color: rgb(7, 193, 96);"
+           style="color: rgb(238, 10, 36);"
       >
       </div>
       Icon1
@@ -162,7 +162,7 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <button type="button"
             class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--warning van-action-bar-button--first"
-            style="color: rgb(255, 255, 255); border-color: #be99ff; background: rgb(190, 153, 255);"
+            style="color: white; border-color: #be99ff; background: rgb(190, 153, 255);"
     >
       <div class="van-button__content">
         <span class="van-button__text">
@@ -172,7 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
     </button>
     <button type="button"
             class="van-button van-button--danger van-button--large van-action-bar-button van-action-bar-button--danger van-action-bar-button--last"
-            style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"
+            style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;"
     >
       <div class="van-button__content">
         <span class="van-button__text">
diff --git a/src/badge/README.md b/src/badge/README.md
index afe329436..fc72752f5 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -15,7 +15,13 @@ app.use(Badge);
 ### Basic Usage
 
 ```html
-<van-badge content="5">
+<van-badge :content="5">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10">
+  <div class="child" />
+</van-badge>
+<van-badge content="Hot">
   <div class="child" />
 </van-badge>
 <van-badge dot>
@@ -24,8 +30,8 @@ app.use(Badge);
 
 <style>
   .child {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: #f2f3f5;
     border-radius: 4px;
   }
@@ -35,10 +41,13 @@ app.use(Badge);
 ### Max
 
 ```html
-<van-badge content="20" max="9">
+<van-badge :content="20" max="9">
   <div class="child" />
 </van-badge>
-<van-badge content="200" max="99">
+<van-badge :content="50" max="20">
+  <div class="child" />
+</van-badge>
+<van-badge :content="200" max="99">
   <div class="child" />
 </van-badge>
 ```
@@ -46,7 +55,10 @@ app.use(Badge);
 ### Custom Color
 
 ```html
-<van-badge content="5" color="#1989fa">
+<van-badge :content="5" color="#1989fa">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10" color="#1989fa">
   <div class="child" />
 </van-badge>
 <van-badge dot color="#1989fa">
@@ -54,10 +66,45 @@ app.use(Badge);
 </van-badge>
 ```
 
-### Standaline
+### Custom Content
+
+Use `content` slot to custom :content of badge.
 
 ```html
-<van-badge content="200" max="99" />
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="success" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="cross" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="down" class="badge-icon" />
+  </template>
+</van-badge>
+```
+
+```css
+.badge-icon {
+  display: block;
+  font-size: 10px;
+  line-height: 16px;
+}
+```
+
+### Standalone
+
+```html
+<van-badge :content="20" />
+
+<van-badge :content="200" max="99" />
 ```
 
 ## API
@@ -73,9 +120,10 @@ app.use(Badge);
 
 ### Slots
 
-| Name    | Description  |
-| ------- | ------------ |
-| default | Default slot |
+| Name    | Description          |
+| ------- | -------------------- |
+| default | Default slot         |
+| content | Custom badge content |
 
 ### Less Variables
 
diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md
index fee1ce4e3..454bf8247 100644
--- a/src/badge/README.zh-CN.md
+++ b/src/badge/README.zh-CN.md
@@ -24,14 +24,20 @@ app.use(Badge);
 <van-badge :content="5">
   <div class="child" />
 </van-badge>
+<van-badge :content="10">
+  <div class="child" />
+</van-badge>
+<van-badge content="Hot">
+  <div class="child" />
+</van-badge>
 <van-badge dot>
   <div class="child" />
 </van-badge>
 
 <style>
   .child {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: #f2f3f5;
     border-radius: 4px;
   }
@@ -46,6 +52,9 @@ app.use(Badge);
 <van-badge :content="20" max="9">
   <div class="child" />
 </van-badge>
+<van-badge :content="50" max="20">
+  <div class="child" />
+</van-badge>
 <van-badge :content="200" max="99">
   <div class="child" />
 </van-badge>
@@ -59,16 +68,54 @@ app.use(Badge);
 <van-badge :content="5" color="#1989fa">
   <div class="child" />
 </van-badge>
+<van-badge :content="10" color="#1989fa">
+  <div class="child" />
+</van-badge>
 <van-badge dot color="#1989fa">
   <div class="child" />
 </van-badge>
 ```
 
+### 自定义徽标内容
+
+通过 `content` 插槽可以自定义徽标的内容，比如插入一个图标。
+
+```html
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="success" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="cross" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="down" class="badge-icon" />
+  </template>
+</van-badge>
+```
+
+```css
+.badge-icon {
+  display: block;
+  font-size: 10px;
+  line-height: 16px;
+}
+```
+
 ### 独立展示
 
 当 Badge 没有子元素时，会作为一个独立的元素进行展示。
 
 ```html
+<van-badge :content="20" />
+
 <van-badge :content="200" max="99" />
 ```
 
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index 235008996..c5e8be9b1 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -18,41 +18,35 @@
   </demo-block>
 
   <demo-block :title="t('customColor')">
-    <van-badge content="5" :color="BLUE">
+    <van-badge content="5" color="#1989fa">
       <div class="child" />
     </van-badge>
-    <van-badge dot :color="BLUE">
+    <van-badge dot color="#1989fa">
       <div class="child" />
     </van-badge>
   </demo-block>
 
   <demo-block :title="t('standalone')">
-    <van-badge content="200" max="99" style="margin-left: 16px;" />
+    <van-badge content="200" max="99" style="margin-left: 16px" />
   </demo-block>
 </template>
 
 <script>
-import { BLUE } from '../../utils/constant';
-
 export default {
   i18n: {
     'zh-CN': {
       max: '最大值',
       standalone: '独立展示',
       customColor: '自定义颜色',
+      customContent: '自定义徽标内容',
     },
     'en-US': {
       max: 'Max',
       standalone: 'Standalone',
       customColor: 'Custom Color',
+      customContent: 'Custom Content',
     },
   },
-
-  data() {
-    return {
-      BLUE,
-    };
-  },
 };
 </script>
 
@@ -67,10 +61,16 @@ export default {
   }
 
   .child {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: @gray-2;
     border-radius: 4px;
   }
+
+  .badge-icon {
+    display: block;
+    font-size: 10px;
+    line-height: 16px;
+  }
 }
 </style>
diff --git a/src/button/index.tsx b/src/button/index.tsx
index f697f2824..b6bf00da9 100644
--- a/src/button/index.tsx
+++ b/src/button/index.tsx
@@ -2,7 +2,7 @@ import { PropType, CSSProperties } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
-import { BORDER_SURROUND, WHITE } from '../utils/constant';
+import { BORDER_SURROUND } from '../utils/constant';
 import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
@@ -116,7 +116,7 @@ export default createComponent({
       if (color) {
         const style: CSSProperties = {};
 
-        style.color = plain ? color : WHITE;
+        style.color = plain ? color : 'white';
 
         if (!plain) {
           // Use background instead of backgroundColor to make linear-gradient work
diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
index 9230b666b..936299c4a 100644
--- a/src/button/test/__snapshots__/demo.spec.js.snap
+++ b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -324,7 +324,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <button type="button"
           class="van-button van-button--default van-button--normal"
-          style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"
+          style="color: white; background: rgb(114, 50, 221); border-color: #7232dd;"
   >
     <div class="van-button__content">
       <span class="van-button__text">
@@ -344,7 +344,7 @@ exports[`should render demo and match snapshot 1`] = `
   </button>
   <button type="button"
           class="van-button van-button--default van-button--normal"
-          style="color: rgb(255, 255, 255); border: 0px;"
+          style="color: white; border: 0px;"
   >
     <div class="van-button__content">
       <span class="van-button__text">
diff --git a/src/calendar/README.md b/src/calendar/README.md
index 9a8ad000c..c810afd55 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -112,7 +112,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
 Use `color` prop to custom calendar color.
 
 ```html
-<van-calendar v-model:show="show" color="#07c160" />
+<van-calendar v-model:show="show" color="#1989fa" />
 ```
 
 ### Custom Date Range
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 1de8333b6..30eeafeab 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -114,7 +114,7 @@ export default {
 通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
 
 ```html
-<van-calendar v-model:show="show" color="#07c160" />
+<van-calendar v-model:show="show" color="#1989fa" />
 ```
 
 ### 自定义日期范围
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 752478427..39df70210 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -119,8 +119,6 @@
 </template>
 
 <script>
-import { GREEN } from '../../utils/constant';
-
 export default {
   i18n: {
     'zh-CN': {
@@ -233,7 +231,7 @@ export default {
           this.showConfirm = false;
           break;
         case 'customColor':
-          this.color = GREEN;
+          this.color = '#1989fa';
           break;
         case 'customConfirm':
           this.confirmText = this.t('confirmText');
diff --git a/src/calendar/test/__snapshots__/index.legacy.js.snap b/src/calendar/test/__snapshots__/index.legacy.js.snap
index a45e76732..36899eec8 100644
--- a/src/calendar/test/__snapshots__/index.legacy.js.snap
+++ b/src/calendar/test/__snapshots__/index.legacy.js.snap
@@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: white; background: blue; border-color: blue;">
       <div class="van-button__content"><span class="van-button__text">确定</span></div>
     </button></div>
 </div>
@@ -100,7 +100,7 @@ exports[`color prop when type is single 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: white; background: blue; border-color: blue;">
       <div class="van-button__content"><span class="van-button__text">确定</span></div>
     </button></div>
 </div>
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index efceef585..72edb853c 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -44,7 +44,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
+<van-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</van-checkbox>
 ```
 
 ### Custom Icon Size
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index 49ca97187..d84d83ae1 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -56,7 +56,7 @@ export default {
 通过 `checked-color` 属性设置选中状态的图标颜色。
 
 ```html
-<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
+<van-checkbox v-model="checked" checked-color="#ee0a24">复选框</van-checkbox>
 ```
 
 ### 自定义大小
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index ad14e74d5..61951f3b5 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -19,7 +19,7 @@
   </demo-block>
 
   <demo-block :title="t('customColor')">
-    <van-checkbox v-model="checkbox2" checked-color="#07c160">
+    <van-checkbox v-model="checkbox2" checked-color="#ee0a24">
       {{ t('customColor') }}
     </van-checkbox>
   </demo-block>
diff --git a/src/checkbox/test/__snapshots__/demo.spec.js.snap b/src/checkbox/test/__snapshots__/demo.spec.js.snap
index bd4a4bdac..f326be6df 100644
--- a/src/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/src/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -67,7 +67,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
       <i class="van-badge__wrapper van-icon van-icon-success"
-         style="border-color: #07c160; background-color: rgb(7, 193, 96);"
+         style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
       >
       </i>
     </div>
diff --git a/src/circle/README.md b/src/circle/README.md
index 6dd482abe..65b33bf8f 100644
--- a/src/circle/README.md
+++ b/src/circle/README.md
@@ -137,6 +137,9 @@ How to use: [Custom Theme](#/en-US/theme).
 
 | Name                     | Default Value       | Description |
 | ------------------------ | ------------------- | ----------- |
+| @circle-size             | `100px`             | -           |
+| @circle-color            | `@blue`             | -           |
+| @circle-layer-color      | `@white`            | -           |
 | @circle-text-color       | `@text-color`       | -           |
 | @circle-text-font-weight | `@font-weight-bold` | -           |
 | @circle-text-font-size   | `@font-size-md`     | -           |
diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md
index bda928294..bb26537b5 100644
--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@@ -153,6 +153,9 @@ export default {
 
 | 名称                     | 默认值              | 描述 |
 | ------------------------ | ------------------- | ---- |
+| @circle-size             | `100px`             | -    |
+| @circle-color            | `@blue`             | -    |
+| @circle-layer-color      | `@white`            | -    |
 | @circle-text-color       | `@text-color`       | -    |
 | @circle-text-font-weight | `@font-weight-bold` | -    |
 | @circle-text-font-size   | `@font-size-md`     | -    |
diff --git a/src/circle/index.less b/src/circle/index.less
index 46edec25c..0613d8159 100644
--- a/src/circle/index.less
+++ b/src/circle/index.less
@@ -3,6 +3,8 @@
 .van-circle {
   position: relative;
   display: inline-block;
+  width: @circle-size;
+  height: @circle-size;
   text-align: center;
 
   svg {
@@ -14,7 +16,12 @@
   }
 
   &__layer {
+    stroke: @circle-layer-color;
+  }
+
+  &__hover {
     fill: none;
+    stroke: @circle-color;
     stroke-linecap: round;
   }
 
diff --git a/src/circle/index.tsx b/src/circle/index.tsx
index 95270542d..2f3e029a5 100644
--- a/src/circle/index.tsx
+++ b/src/circle/index.tsx
@@ -1,7 +1,6 @@
 import { watch, computed, PropType } from 'vue';
 import { raf, cancelRaf } from '@vant/use';
 import { isObject, getSizeStyle, createNamespace } from '../utils';
-import { BLUE, WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('circle');
 
@@ -21,6 +20,9 @@ function getPath(clockwise: boolean, viewBoxSize: number) {
 export default createComponent({
   props: {
     text: String,
+    size: [Number, String],
+    color: [String, Object] as PropType<string | Record<string, string>>,
+    layerColor: String,
     strokeLinecap: String as PropType<CanvasLineCap>,
     currentRate: {
       type: Number,
@@ -30,10 +32,6 @@ export default createComponent({
       type: [Number, String],
       default: 0,
     },
-    size: {
-      type: [Number, String],
-      default: 100,
-    },
     fill: {
       type: String,
       default: 'none',
@@ -42,14 +40,6 @@ export default createComponent({
       type: [Number, String],
       default: 100,
     },
-    layerColor: {
-      type: String,
-      default: WHITE,
-    },
-    color: {
-      type: [String, Object],
-      default: BLUE,
-    },
     strokeWidth: {
       type: [Number, String],
       default: 40,
@@ -105,16 +95,6 @@ export default createComponent({
     );
 
     const renderHover = () => {
-      const style = {
-        fill: props.fill,
-        stroke: props.layerColor,
-        strokeWidth: `${props.strokeWidth}px`,
-      };
-
-      return <path class={bem('hover')} style={style} d={path.value} />;
-    };
-
-    const renderLayer = () => {
       const PERIMETER = 3140;
       const { color, strokeWidth, currentRate, strokeLinecap } = props;
       const offset = (PERIMETER * currentRate) / 100;
@@ -129,12 +109,22 @@ export default createComponent({
         <path
           d={path.value}
           style={style}
-          class={bem('layer')}
+          class={bem('hover')}
           stroke={isObject(color) ? `url(#${id})` : color}
         />
       );
     };
 
+    const renderLayer = () => {
+      const style = {
+        fill: props.fill,
+        stroke: props.layerColor,
+        strokeWidth: `${props.strokeWidth}px`,
+      };
+
+      return <path class={bem('layer')} style={style} d={path.value} />;
+    };
+
     const renderGradient = () => {
       const { color } = props;
 
@@ -170,8 +160,8 @@ export default createComponent({
       <div class={bem()} style={getSizeStyle(props.size)}>
         <svg viewBox={`0 0 ${viewBoxSize.value} ${viewBoxSize.value}`}>
           {renderGradient()}
-          {renderHover()}
           {renderLayer()}
+          {renderHover()}
         </svg>
         {renderText()}
       </div>
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 951714faa..57b9c1726 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -2,19 +2,16 @@
 
 exports[`should render demo and match snapshot 1`] = `
 <div>
-  <div class="van-circle"
-       style="width: 100px; height: 100px;"
-  >
+  <div class="van-circle">
     <svg viewbox="0 0 1040 1040">
-      <path class="van-circle__hover"
-            style="fill: none; stroke: #fff; stroke-width: 40px;"
+      <path class="van-circle__layer"
+            style="fill: none; stroke-width: 40px;"
             d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
       >
       </path>
       <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-            style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
-            class="van-circle__layer"
-            stroke="#1989fa"
+            style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
+            class="van-circle__hover"
       >
       </path>
     </svg>
@@ -24,19 +21,16 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-circle"
-       style="width: 100px; height: 100px;"
-  >
+  <div class="van-circle">
     <svg viewbox="0 0 1060 1060">
-      <path class="van-circle__hover"
-            style="fill: none; stroke: #fff; stroke-width: 60px;"
+      <path class="van-circle__layer"
+            style="fill: none; stroke-width: 60px;"
             d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
       >
       </path>
       <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-            style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
-            class="van-circle__layer"
-            stroke="#1989fa"
+            style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"
+            class="van-circle__hover"
       >
       </path>
     </svg>
@@ -44,18 +38,16 @@ exports[`should render demo and match snapshot 1`] = `
       Custom Width
     </div>
   </div>
-  <div class="van-circle"
-       style="width: 100px; height: 100px;"
-  >
+  <div class="van-circle">
     <svg viewbox="0 0 1040 1040">
-      <path class="van-circle__hover"
+      <path class="van-circle__layer"
             style="fill: none; stroke: #ebedf0; stroke-width: 40px;"
             d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
       >
       </path>
       <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
             style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
-            class="van-circle__layer"
+            class="van-circle__hover"
             stroke="#ee0a24"
       >
       </path>
@@ -64,9 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
       Custom Color
     </div>
   </div>
-  <div class="van-circle"
-       style="width: 100px; height: 100px;"
-  >
+  <div class="van-circle">
     <svg viewbox="0 0 1040 1040">
       <defs>
         <linearGradient id="van-circle-3"
@@ -85,14 +75,14 @@ exports[`should render demo and match snapshot 1`] = `
           </stop>
         </linearGradient>
       </defs>
-      <path class="van-circle__hover"
-            style="fill: none; stroke: #fff; stroke-width: 40px;"
+      <path class="van-circle__layer"
+            style="fill: none; stroke-width: 40px;"
             d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
       >
       </path>
       <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
             style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
-            class="van-circle__layer"
+            class="van-circle__hover"
             stroke="url(#van-circle-3)"
       >
       </path>
@@ -102,17 +92,17 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-circle"
-       style="width: 100px; height: 100px; margin-top: 15px;"
+       style="margin-top: 15px;"
   >
     <svg viewbox="0 0 1040 1040">
-      <path class="van-circle__hover"
-            style="fill: none; stroke: #fff; stroke-width: 40px;"
+      <path class="van-circle__layer"
+            style="fill: none; stroke-width: 40px;"
             d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
       >
       </path>
       <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
             style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
-            class="van-circle__layer"
+            class="van-circle__hover"
             stroke="#07c160"
       >
       </path>
@@ -125,14 +115,14 @@ exports[`should render demo and match snapshot 1`] = `
        style="width: 120px; height: 120px; margin-top: 15px;"
   >
     <svg viewbox="0 0 1040 1040">
-      <path class="van-circle__hover"
-            style="fill: none; stroke: #fff; stroke-width: 40px;"
+      <path class="van-circle__layer"
+            style="fill: none; stroke-width: 40px;"
             d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
       >
       </path>
       <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000"
             style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
-            class="van-circle__layer"
+            class="van-circle__hover"
             stroke="#7232dd"
       >
       </path>
diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap
index 44985300f..58a42660c 100644
--- a/src/circle/test/__snapshots__/index.spec.js.snap
+++ b/src/circle/test/__snapshots__/index.spec.js.snap
@@ -1,19 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should change stroke linecap when using stroke-linecap prop 1`] = `
-<div class="van-circle"
-     style="width: 100px; height: 100px;"
->
+<div class="van-circle">
   <svg viewbox="0 0 1040 1040">
-    <path class="van-circle__hover"
-          style="fill: none; stroke: #fff; stroke-width: 40px;"
+    <path class="van-circle__layer"
+          style="fill: none; stroke-width: 40px;"
           d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
     >
     </path>
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
-          style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
-          class="van-circle__layer"
-          stroke="#1989fa"
+          style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
+          class="van-circle__hover"
     >
     </path>
   </svg>
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index 98ea8b586..841dc1a1c 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -26,15 +26,15 @@
   </demo-block>
 
   <demo-block :title="t('customStyle')">
-    <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
+    <van-divider
+      :style="{ borderColor: '#1989fa', color: '#1989fa', padding: '0 16px' }"
+    >
       {{ t('text') }}
     </van-divider>
   </demo-block>
 </template>
 
 <script>
-import { BLUE } from '../../utils/constant';
-
 export default {
   i18n: {
     'zh-CN': {
@@ -52,12 +52,6 @@ export default {
       customStyle: 'Custom Style',
     },
   },
-
-  data() {
-    return {
-      BLUE,
-    };
-  },
 };
 </script>
 
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 8a7e0d9e5..6affb42f8 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -20,12 +20,12 @@
             <van-switch v-model="switch2" size="24" :active-color="RED" />
           </template>
         </van-cell>
-        <div style="padding: 5px 16px;">
+        <div style="padding: 5px 16px">
           <van-button
             type="danger"
             block
             round
-            style="height: 40px;"
+            style="height: 40px"
             @click="onConfirm"
           >
             {{ t('confirm') }}
@@ -36,7 +36,7 @@
   </demo-block>
 
   <demo-block :title="t('customActiveColor')">
-    <van-dropdown-menu :active-color="BLUE">
+    <van-dropdown-menu active-color="#1989fa">
       <van-dropdown-item v-model="value1" :options="option1" />
       <van-dropdown-item v-model="value2" :options="option2" />
     </van-dropdown-menu>
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { RED, BLUE } from '../../utils/constant';
+import { RED } from '../../utils/constant';
 
 export default {
   i18n: {
@@ -105,7 +105,6 @@ export default {
   data() {
     return {
       RED,
-      BLUE,
       switch1: true,
       switch2: false,
       value1: 0,
diff --git a/src/icon/README.md b/src/icon/README.md
index ba03c727b..e0ef930d7 100644
--- a/src/icon/README.md
+++ b/src/icon/README.md
@@ -38,8 +38,8 @@ Use `badge` prop, the badge will be displayed in the upper right corner of the i
 Use `color` prop to set icon color.
 
 ```html
-<van-icon name="chat-o" color="#1989fa" />
-<van-icon name="chat-o" color="#07c160" />
+<van-icon name="cart-o" color="#1989fa" />
+<van-icon name="fire-o" color="#ee0a24" />
 ```
 
 ### Icon Size
diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md
index 32e0eb538..6c89bc013 100644
--- a/src/icon/README.zh-CN.md
+++ b/src/icon/README.zh-CN.md
@@ -40,8 +40,8 @@ app.use(Icon);
 `Icon` 的 `color` 属性用来设置图标的颜色。
 
 ```html
-<van-icon name="chat-o" color="#1989fa" />
-<van-icon name="chat-o" color="#07c160" />
+<van-icon name="cart-o" color="#1989fa" />
+<van-icon name="fire-o" color="#ee0a24" />
 ```
 
 ### 图标大小
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 31a03337f..5d0002f3a 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -28,11 +28,11 @@
 
       <demo-block :title="t('color')">
         <van-row>
-          <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
-            <van-icon :name="demoIcon" :color="BLUE" />
+          <van-col span="6" @click="copy(demoIcon, { color: '#1989fa' })">
+            <van-icon name="cart-o" :color="BLUE" />
           </van-col>
-          <van-col span="6" @click="copy(demoIcon, { color: GREEN })">
-            <van-icon :name="demoIcon" :color="GREEN" />
+          <van-col span="6" @click="copy(demoIcon, { color: RED })">
+            <van-icon name="fire-o" :color="RED" />
           </van-col>
         </van-row>
       </demo-block>
@@ -95,7 +95,7 @@
 
 <script>
 import icons from '@vant/icons';
-import { BLUE, GREEN } from '../../utils/constant';
+import { RED } from '../../utils/constant';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str) {
@@ -148,8 +148,7 @@ export default {
   },
 
   data() {
-    this.BLUE = BLUE;
-    this.GREEN = GREEN;
+    this.RED = RED;
     this.icons = icons;
     return {
       tab: 0,
diff --git a/src/index-bar/README.md b/src/index-bar/README.md
index 2a32ff531..1e4398f74 100644
--- a/src/index-bar/README.md
+++ b/src/index-bar/README.md
@@ -69,7 +69,7 @@ export default {
 | z-index | z-index | _number \| string_ | `1` |
 | sticky | Whether to enable anchor sticky top | _boolean_ | `true` |
 | sticky-offset-top | Anchor offset top when sticky | _number_ | `0` |
-| highlight-color | Index character highlight color | _string_ | `#07c160` | - |
+| highlight-color | Index character highlight color | _string_ | `#ee0a24` | - |
 
 ### IndexAnchor Props
 
@@ -99,7 +99,7 @@ How to use: [Custom Theme](#/en-US/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-bar-index-active-color         | `@red`              | -           |
 | @index-anchor-z-index                 | `1`                 | -           |
 | @index-anchor-padding                 | `0 @padding-md`     | -           |
 | @index-anchor-text-color              | `@text-color`       | -           |
@@ -107,5 +107,5 @@ How to use: [Custom Theme](#/en-US/theme).
 | @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-text-color       | `@red`              | -           |
 | @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 126b7b3b3..0a2ffe214 100644
--- a/src/index-bar/README.zh-CN.md
+++ b/src/index-bar/README.zh-CN.md
@@ -73,7 +73,7 @@ export default {
 | z-index | z-index 层级 | _number \| string_ | `1` |
 | sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` |
 | sticky-offset-top | 锚点自动吸顶时与顶部的距离 | _number_ | `0` |
-| highlight-color | 索引字符高亮颜色 | _string_ | `#07c160` |
+| highlight-color | 索引字符高亮颜色 | _string_ | `#ee0a24` |
 
 ### IndexAnchor Props
 
@@ -103,7 +103,7 @@ export default {
 | @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-bar-index-active-color         | `@red`              | -    |
 | @index-anchor-z-index                 | `1`                 | -    |
 | @index-anchor-padding                 | `0 @padding-md`     | -    |
 | @index-anchor-text-color              | `@text-color`       | -    |
@@ -111,5 +111,5 @@ export default {
 | @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-text-color       | `@red`              | -    |
 | @index-anchor-sticky-background-color | `@white`            | -    |
diff --git a/src/index-bar/index.less b/src/index-bar/index.less
index 1ee621e60..30677b219 100644
--- a/src/index-bar/index.less
+++ b/src/index-bar/index.less
@@ -15,7 +15,7 @@
   }
 
   &__index {
-    padding: 0 @padding-base 0 @padding-md;
+    padding: 0 @padding-xs 0 @padding-md;
     font-weight: @font-weight-bold;
     font-size: @index-bar-index-font-size;
     line-height: @index-bar-index-line-height;
diff --git a/src/radio/README.md b/src/radio/README.md
index 1f3f0f738..82b620541 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -65,8 +65,8 @@ export default {
 
 ```html
 <van-radio-group v-model="radio">
-  <van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
-  <van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
+  <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>
+  <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>
 </van-radio-group>
 ```
 
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 7ef13d44e..9b2e6f7a6 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -77,8 +77,8 @@ export default {
 
 ```html
 <van-radio-group v-model="radio">
-  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
-  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
+  <van-radio name="1" checked-color="#ee0a24">单选框 1</van-radio>
+  <van-radio name="2" checked-color="#ee0a24">单选框 2</van-radio>
 </van-radio-group>
 ```
 
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index 5b9a9dc00..6d01a4884 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -33,10 +33,10 @@
 
   <demo-block :title="t('customColor')">
     <van-radio-group v-model="radio3" class="demo-radio-group">
-      <van-radio name="1" checked-color="#07c160">
+      <van-radio name="1" checked-color="#ee0a24">
         {{ t('radio') }} 1
       </van-radio>
-      <van-radio name="2" checked-color="#07c160">
+      <van-radio name="2" checked-color="#ee0a24">
         {{ t('radio') }} 2
       </van-radio>
     </van-radio-group>
@@ -44,12 +44,8 @@
 
   <demo-block :title="t('customIconSize')">
     <van-radio-group v-model="radioIconSize" class="demo-radio-group">
-      <van-radio name="1" checked-color="#07c160" icon-size="24px">
-        {{ t('radio') }} 1
-      </van-radio>
-      <van-radio name="2" checked-color="#07c160" icon-size="24px">
-        {{ t('radio') }} 2
-      </van-radio>
+      <van-radio name="1" icon-size="24px"> {{ t('radio') }} 1 </van-radio>
+      <van-radio name="2" icon-size="24px"> {{ t('radio') }} 2 </van-radio>
     </van-radio-group>
   </demo-block>
 
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
index e1e92ad19..e23eafda2 100644
--- a/src/radio/test/__snapshots__/demo.spec.js.snap
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -140,7 +140,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
         <i class="van-badge__wrapper van-icon van-icon-success"
-           style="border-color: #07c160; background-color: rgb(7, 193, 96);"
+           style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
         >
         </i>
       </div>
@@ -175,9 +175,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
            style="font-size: 24px;"
       >
-        <i class="van-badge__wrapper van-icon van-icon-success"
-           style="border-color: #07c160; background-color: rgb(7, 193, 96);"
-        >
+        <i class="van-badge__wrapper van-icon van-icon-success">
         </i>
       </div>
       <span class="van-radio__label">
diff --git a/src/style/var.less b/src/style/var.less
index f881793f4..e3b56f13e 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -241,6 +241,9 @@
 @checkbox-disabled-background-color: @border-color;
 
 // Circle
+@circle-size: 100px;
+@circle-color: @blue;
+@circle-layer-color: @white;
 @circle-text-color: @text-color;
 @circle-text-font-weight: @font-weight-bold;
 @circle-text-font-size: @font-size-md;
@@ -414,14 +417,14 @@
 @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-text-color: @red;
 @index-anchor-sticky-background-color: @white;
 
 // IndexBar
 @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-bar-index-active-color: @red;
 
 // Image
 @image-placeholder-text-color: @gray-6;
diff --git a/src/submit-bar/test/__snapshots__/index.spec.js.snap b/src/submit-bar/test/__snapshots__/index.spec.js.snap
index e1b51a5ab..d5adb5074 100644
--- a/src/submit-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/submit-bar/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`should change the color of submit button when using button-color prop 1`] = `
 <button type="button"
         class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"
-        style="color: rgb(255, 255, 255); background: red; border-color: red;"
+        style="color: white; background: red; border-color: red;"
 >
   <div class="van-button__content">
   </div>
diff --git a/src/switch/README.md b/src/switch/README.md
index 11e88bb5f..082a42c84 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -49,7 +49,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
+<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
 ```
 
 ### Async Control
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index cef9b3f70..c51cb0aa1 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -63,7 +63,7 @@ export default {
 `active-color` 属性表示打开时的背景色，`inactive-color` 表示关闭时的背景色。
 
 ```html
-<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
+<van-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
 ```
 
 ### 异步控制
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 508e3f1be..744a1903a 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -18,8 +18,8 @@
   <demo-block :title="t('customColor')">
     <van-switch
       v-model="checked3"
-      active-color="#07c160"
-      inactive-color="#ee0a24"
+      active-color="#ee0a24"
+      inactive-color="#dcdee0"
     />
   </demo-block>
 
diff --git a/src/switch/test/__snapshots__/demo.spec.js.snap b/src/switch/test/__snapshots__/demo.spec.js.snap
index d75933790..ad9cecd0e 100644
--- a/src/switch/test/__snapshots__/demo.spec.js.snap
+++ b/src/switch/test/__snapshots__/demo.spec.js.snap
@@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="switch"
        class="van-switch van-switch--on"
-       style="background-color: rgb(7, 193, 96);"
+       style="background-color: rgb(238, 10, 36);"
        aria-checked="true"
   >
     <div class="van-switch__node">
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index 561af5fd2..6ce505134 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -100,7 +100,7 @@ export default {
 ### Custom Color
 
 ```html
-<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
+<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
   <van-tabbar-item icon="home-o">Tab</van-tabbar-item>
   <van-tabbar-item icon="search">Tab</van-tabbar-item>
   <van-tabbar-item icon="friends-o">Tab</van-tabbar-item>
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index feedae624..bbb0dc04f 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -106,7 +106,7 @@ export default {
 ### 自定义颜色
 
 ```html
-<van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
+<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
   <van-tabbar-item icon="search">标签</van-tabbar-item>
   <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 2ecef602b..a808525b6 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -52,7 +52,7 @@
   </demo-block>
 
   <demo-block :title="t('customColor')">
-    <van-tabbar v-model="active4" active-color="#07c160" inactive-color="#000">
+    <van-tabbar v-model="active4" active-color="#ee0a24" inactive-color="#000">
       <van-tabbar-item icon="home-o">{{ t('tab') }}</van-tabbar-item>
       <van-tabbar-item icon="search">{{ t('tab') }}</van-tabbar-item>
       <van-tabbar-item icon="friends-o">{{ t('tab') }}</van-tabbar-item>
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index 51d5247b2..5907f7f1c 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -167,7 +167,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom">
     <div class="van-tabbar-item van-tabbar-item--active"
-         style="color: rgb(7, 193, 96);"
+         style="color: rgb(238, 10, 36);"
     >
       <div class="van-badge__wrapper van-tabbar-item__icon">
         <i class="van-badge__wrapper van-icon van-icon-home-o">
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index eb6563daf..c8ec11e4f 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,8 +1,5 @@
 // color
 export const RED = '#ee0a24';
-export const BLUE = '#1989fa';
-export const GREEN = '#07c160';
-export const WHITE = '#fff';
 
 // border
 export const BORDER = 'van-hairline';