diff --git a/src/config-provider/README.md b/src/config-provider/README.md
index a22e9f07b..9c770cbb9 100644
--- a/src/config-provider/README.md
+++ b/src/config-provider/README.md
@@ -140,11 +140,11 @@ There are some **Basic Variables** below, for component CSS Variables, please re
 --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
 
 // Component Colors
---van-text-color: #323233;
---van-active-color: #f2f3f5;
+--van-text-color: var(--van-gray-8);
+--van-active-color: var(--van-gray-2);
 --van-active-opacity: 0.7;
 --van-disabled-opacity: 0.5;
---van-background-color: #f7f8fa;
+--van-background-color: var(--van-gray-1);
 --van-background-color-light: #fafafa;
 --van-text-link-color: #576b95;
 
@@ -179,7 +179,7 @@ There are some **Basic Variables** below, for component CSS Variables, please re
 --van-animation-timing-function-leave: ease-in;
 
 // Border
---van-border-color: #ebedf0;
+--van-border-color: var(--van-gray-3);
 --van-border-width-base: 1px;
 --van-border-radius-sm: 2px;
 --van-border-radius-md: 4px;
diff --git a/src/config-provider/README.zh-CN.md b/src/config-provider/README.zh-CN.md
index 5234495b6..c85c6beb1 100644
--- a/src/config-provider/README.zh-CN.md
+++ b/src/config-provider/README.zh-CN.md
@@ -140,11 +140,11 @@ export default {
 --van-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
 
 // Component Colors
---van-text-color: #323233;
---van-active-color: #f2f3f5;
+--van-text-color: var(--van-gray-8);
+--van-active-color: var(--van-gray-2);
 --van-active-opacity: 0.7;
 --van-disabled-opacity: 0.5;
---van-background-color: #f7f8fa;
+--van-background-color: var(--van-gray-1);
 --van-background-color-light: #fafafa;
 --van-text-link-color: #576b95;
 
@@ -179,7 +179,7 @@ export default {
 --van-animation-timing-function-leave: ease-in;
 
 // Border
---van-border-color: #ebedf0;
+--van-border-color: var(--van-gray-3);
 --van-border-width-base: 1px;
 --van-border-radius-sm: 2px;
 --van-border-radius-md: 4px;
diff --git a/src/style/var.less b/src/style/var.less
index d39f3dfbb..0b694398a 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -21,11 +21,11 @@
 @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
 
 // Component Colors
-@text-color: @gray-8;
-@active-color: @gray-2;
+@text-color: var(--van-gray-8);
+@active-color: var(--van-gray-2);
 @active-opacity: 0.7;
 @disabled-opacity: 0.5;
-@background-color: @gray-1;
+@background-color: var(--van-gray-1);
 @background-color-light: #fafafa;
 @text-link-color: #576b95;
 
@@ -60,7 +60,7 @@
 @animation-timing-function-leave: ease-in;
 
 // Border
-@border-color: @gray-3;
+@border-color: var(--van-gray-3);
 @border-width-base: 1px;
 @border-radius-sm: 2px;
 @border-radius-md: 4px;