diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index aa00ee45d..610a38b9c 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -28,13 +28,13 @@
     </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 content="10" :color="BLUE">
+      <van-badge content="10" color="#1989fa">
         <div class="child" />
       </van-badge>
-      <van-badge dot :color="BLUE">
+      <van-badge dot color="#1989fa">
         <div class="child" />
       </van-badge>
     </demo-block>
@@ -68,8 +68,6 @@
 </template>
 
 <script>
-import { BLUE } from '../../utils/constant';
-
 export default {
   i18n: {
     'zh-CN': {
@@ -85,12 +83,6 @@ export default {
       customContent: 'Custom Content',
     },
   },
-
-  data() {
-    return {
-      BLUE,
-    };
-  },
 };
 </script>
 
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index c075efb88..5190d6ab7 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -121,8 +121,6 @@
 </template>
 
 <script>
-import { BLUE } from '../../utils/constant';
-
 export default {
   i18n: {
     'zh-CN': {
@@ -235,7 +233,7 @@ export default {
           this.showConfirm = false;
           break;
         case 'customColor':
-          this.color = BLUE;
+          this.color = '#1989fa';
           break;
         case 'customConfirm':
           this.confirmText = this.t('confirmText');
diff --git a/src/circle/README.md b/src/circle/README.md
index b18c05021..c84a8590c 100644
--- a/src/circle/README.md
+++ b/src/circle/README.md
@@ -131,6 +131,7 @@ How to use: [Custom Theme](#/en-US/theme).
 
 | Name                     | Default Value       | Description |
 | ------------------------ | ------------------- | ----------- |
+| @circle-color            | `@blue`             | -           |
 | @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 f6ec957fd..d2247be9a 100644
--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@@ -142,6 +142,7 @@ export default {
 
 | 名称                     | 默认值              | 描述 |
 | ------------------------ | ------------------- | ---- |
+| @circle-color            | `@blue`             | -    |
 | @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.js b/src/circle/index.js
index 9e9ca50eb..81a842909 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -1,6 +1,6 @@
 import { createNamespace, isObject, addUnit } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
-import { BLUE, WHITE } from '../utils/constant';
+import { WHITE } from '../utils/constant';
 
 const [createComponent, bem] = createNamespace('circle');
 
@@ -22,6 +22,7 @@ function getPath(clockwise, viewBoxSize) {
 export default createComponent({
   props: {
     text: String,
+    color: [String, Object],
     strokeLinecap: String,
     value: {
       type: Number,
@@ -47,10 +48,6 @@ export default createComponent({
       type: String,
       default: WHITE,
     },
-    color: {
-      type: [String, Object],
-      default: BLUE,
-    },
     strokeWidth: {
       type: [Number, String],
       default: 40,
diff --git a/src/circle/index.less b/src/circle/index.less
index 46edec25c..978ac220b 100644
--- a/src/circle/index.less
+++ b/src/circle/index.less
@@ -15,6 +15,7 @@
 
   &__layer {
     fill: none;
+    stroke: @circle-color;
     stroke-linecap: round;
   }
 
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 6e0db1b94..46643df77 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></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" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">70%</div>
     </div>
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></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" class="van-circle__layer" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">宽度定制</div>
     </div>
diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap
index 8749d4958..f9d78db40 100644
--- a/src/circle/test/__snapshots__/index.spec.js.snap
+++ b/src/circle/test/__snapshots__/index.spec.js.snap
@@ -3,20 +3,20 @@
 exports[`size prop 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></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" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
   </svg></div>
 `;
 
 exports[`speed is 0 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></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" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
   </svg></div>
 `;
 
 exports[`stroke-linecap prop 1`] = `
 <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></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" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></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" class="van-circle__layer" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
   </svg></div>
 `;
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index c1ab46bc8..05cef0407 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -28,7 +28,7 @@
 
     <demo-block :title="t('customStyle')">
       <van-divider
-        :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
+        :style="{ borderColor: '#1989fa', color: '#1989fa', padding: '0 16px' }"
       >
         {{ t('text') }}
       </van-divider>
@@ -37,8 +37,6 @@
 </template>
 
 <script>
-import { BLUE } from '../../utils/constant';
-
 export default {
   i18n: {
     'zh-CN': {
@@ -56,12 +54,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 b3685b29d..4260615dd 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -37,7 +37,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>
@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import { RED, BLUE } from '../../utils/constant';
+import { RED } from '../../utils/constant';
 
 export default {
   i18n: {
@@ -107,7 +107,6 @@ export default {
   data() {
     return {
       RED,
-      BLUE,
       switch1: true,
       switch2: false,
       value1: 0,
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 64363eef2..bc836a00e 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -24,8 +24,8 @@
         </demo-block>
 
         <demo-block :title="t('color')">
-          <van-col span="6" @click="copy(demoIcon, { color: BLUE })">
-            <van-icon name="cart-o" :color="BLUE" />
+          <van-col span="6" @click="copy(demoIcon, { color: '#1989fa' })">
+            <van-icon name="cart-o" color="#1989fa" />
           </van-col>
           <van-col span="6" @click="copy(demoIcon, { color: RED })">
             <van-icon name="fire-o" :color="RED" />
@@ -83,7 +83,7 @@
 
 <script>
 import icons from '@vant/icons';
-import { RED, BLUE } from '../../utils/constant';
+import { RED } from '../../utils/constant';
 
 // from https://30secondsofcode.org
 function copyToClipboard(str) {
@@ -137,7 +137,6 @@ export default {
 
   data() {
     this.RED = RED;
-    this.BLUE = BLUE;
     this.icons = icons;
     return {
       tab: 0,
diff --git a/src/radio/test/__snapshots__/demo.spec.js.snap b/src/radio/test/__snapshots__/demo.spec.js.snap
index 3feb1b06c..6a9f19b66 100644
--- a/src/radio/test/__snapshots__/demo.spec.js.snap
+++ b/src/radio/test/__snapshots__/demo.spec.js.snap
@@ -70,15 +70,11 @@ exports[`renders demo correctly 1`] = `
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 24px;"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">
-        单选框 1
-      </span>
+            <!----></i></div><span class="van-radio__label"> 单选框 1 </span>
       </div>
       <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round" style="font-size: 24px;"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">
-        单选框 2
-      </span>
+            <!----></i></div><span class="van-radio__label"> 单选框 2 </span>
       </div>
     </div>
   </div>
diff --git a/src/style/var.less b/src/style/var.less
index 47170e94b..647862b8b 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -241,6 +241,7 @@
 @checkbox-disabled-background-color: @border-color;
 
 // Circle
+@circle-color: @blue;
 @circle-text-color: @text-color;
 @circle-text-font-weight: @font-weight-bold;
 @circle-text-font-size: @font-size-md;
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 25628c550..d9c41d913 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -1,6 +1,5 @@
 // color
 export const RED = '#ee0a24';
-export const BLUE = '#1989fa';
 export const WHITE = '#fff';
 
 // border