diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md
index 4641b82b0..5423fc242 100644
--- a/docs/markdown/theme.en-US.md
+++ b/docs/markdown/theme.en-US.md
@@ -20,12 +20,12 @@ There are some basic variables below, all available variables could be found in
 @green: #4b0;
 @gray: #c9c9c9;
 @gray-light: #e5e5e5;
-@gray-darker: #666;
-@gray-dark: #999;
+@gray-darker: #7d7e80;
+@gray-dark: #969799;
 
 // default colors
-@text-color: #333;
-@border-color: #eee;
+@text-color: #323233;
+@border-color: #ebedf0;
 @active-color: #e8e8e8;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
index 148796a3c..8d33923ac 100644
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -24,12 +24,12 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
 @green: #4b0;
 @gray: #c9c9c9;
 @gray-light: #e5e5e5;
-@gray-darker: #666;
-@gray-dark: #999;
+@gray-darker: #7d7e80;
+@gray-dark: #969799;
 
 // default colors
-@text-color: #333;
-@border-color: #eee;
+@text-color: #323233;
+@border-color: #ebedf0;
 @active-color: #e8e8e8;
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
diff --git a/docs/src/WapApp.vue b/docs/src/WapApp.vue
index 6134bbf6b..2321bdb75 100644
--- a/docs/src/WapApp.vue
+++ b/docs/src/WapApp.vue
@@ -43,9 +43,11 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../packages/style/var';
+
 body {
-  color: #333;
   line-height: 1;
+  color: @text-color;
   background-color: #fafafa;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/docs/src/components/DemoList.vue b/docs/src/components/DemoList.vue
index c7d3c45ad..5878dc7b4 100644
--- a/docs/src/components/DemoList.vue
+++ b/docs/src/components/DemoList.vue
@@ -128,7 +128,7 @@ export default {
     display: inline-block;
 
     &.active {
-      color: #fff;
+      color: @white;
       background-color: @blue;
     }
   }
diff --git a/packages/badge/demo/index.vue b/packages/badge/demo/index.vue
index cfa9d9cf8..15337fc2c 100644
--- a/packages/badge/demo/index.vue
+++ b/packages/badge/demo/index.vue
@@ -46,12 +46,14 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-badge {
   .van-badge-group {
     width: auto;
     margin: 0 15px;
     padding: 20px 0;
-    background-color: #fff;
+    background-color: @white;
 
     &::after {
       display: none;
diff --git a/packages/circle/demo/index.vue b/packages/circle/demo/index.vue
index 5ef278113..08eb769ee 100644
--- a/packages/circle/demo/index.vue
+++ b/packages/circle/demo/index.vue
@@ -14,7 +14,7 @@
         fill="#fff"
         :rate="rate"
         size="120px"
-        layer-color="#eee"
+        layer-color="#ebedf0"
         :speed="100"
         :stroke-width="60"
         :clockwise="false"
diff --git a/packages/circle/en-US.md b/packages/circle/en-US.md
index c9ff43d8a..585f16045 100644
--- a/packages/circle/en-US.md
+++ b/packages/circle/en-US.md
@@ -43,7 +43,7 @@ export default {
   color="#13ce66"
   fill="#fff"
   size="120px"
-  layer-color="#eee"
+  layer-color="#ebedf0"
   :text="text"
   :rate="rate"
   :speed="100"
diff --git a/packages/circle/test/__snapshots__/demo.spec.js.snap b/packages/circle/test/__snapshots__/demo.spec.js.snap
index 306bf474a..b255b3293 100644
--- a/packages/circle/test/__snapshots__/demo.spec.js.snap
+++ b/packages/circle/test/__snapshots__/demo.spec.js.snap
@@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-circle" style="width:120px;height:120px;">
       <svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:#fff;stroke:#eee;stroke-width:60px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill:#fff;stroke:#ebedf0;stroke-width:60px;"></path>
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke:#13ce66;stroke-dashoffset:3140px;stroke-width:61px;"></path>
       </svg>
       <div class="van-circle__text">0%</div>
diff --git a/packages/circle/zh-CN.md b/packages/circle/zh-CN.md
index 9ff30aee7..a3ff7d347 100644
--- a/packages/circle/zh-CN.md
+++ b/packages/circle/zh-CN.md
@@ -44,7 +44,7 @@ export default {
   color="#13ce66"
   fill="#fff"
   size="120px"
-  layer-color="#eee"
+  layer-color="#ebedf0"
   :text="text"
   :rate="rate"
   :speed="100"
diff --git a/packages/col/demo/index.vue b/packages/col/demo/index.vue
index 2e7e7ceca..fb89db5c9 100644
--- a/packages/col/demo/index.vue
+++ b/packages/col/demo/index.vue
@@ -97,6 +97,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-col {
   .van-doc-demo-block {
     padding: 0 15px;
@@ -107,7 +109,7 @@ export default {
   }
 
   .van-col {
-    color: #fff;
+    color: @white;
     font-size: 13px;
     line-height: 30px;
     text-align: center;
diff --git a/packages/collapse/demo/index.vue b/packages/collapse/demo/index.vue
index e5feb8906..b10316297 100644
--- a/packages/collapse/demo/index.vue
+++ b/packages/collapse/demo/index.vue
@@ -78,7 +78,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../../packages/style/var";
+@import '../../style/var';
 
 .demo-collapse {
   .van-collapse-item__content {
diff --git a/packages/list/demo/index.vue b/packages/list/demo/index.vue
index cead2d0b4..32d77233a 100644
--- a/packages/list/demo/index.vue
+++ b/packages/list/demo/index.vue
@@ -70,6 +70,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-list {
   .van-cell {
     text-align: center;
@@ -80,7 +82,7 @@ export default {
     line-height: 1.4;
     font-size: 14px;
     text-align: center;
-    color: #666;
+    color: @gray-darker;
   }
 }
 </style>
diff --git a/packages/popup/demo/index.vue b/packages/popup/demo/index.vue
index 4a432d758..d6f5fec9a 100644
--- a/packages/popup/demo/index.vue
+++ b/packages/popup/demo/index.vue
@@ -104,6 +104,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-popup {
   .van-button {
     margin: 10px 0 10px 15px;
@@ -129,11 +131,11 @@ export default {
     .van-tab__pane:not(:first-child) {
       padding: 10px;
       line-height: 1.4;
-      color: #666;
+      color: @gray-darker;
     }
 
     &--top {
-      color: #fff;
+      color: @white;
       width: 100%;
       border-radius: 0;
       line-height: 20px;
diff --git a/packages/style/demo/index.vue b/packages/style/demo/index.vue
index 4224898d3..c3453727c 100644
--- a/packages/style/demo/index.vue
+++ b/packages/style/demo/index.vue
@@ -65,6 +65,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-style {
   .van-ellipsis {
     font-size: 13px;
@@ -74,7 +76,7 @@ export default {
 
   .van-hairline--top {
     height: 30px;
-    background-color: #fff;
+    background-color: @white;
 
     &::after {
       top: 5px;
@@ -83,7 +85,7 @@ export default {
 
   .van-col {
     height: 50px;
-    color: #fff;
+    color: @white;
     font-size: 14px;
     border-radius: 3px;
     text-align: center;
diff --git a/packages/style/mixins/hairline.less b/packages/style/mixins/hairline.less
index c30a2ff3d..7975be75a 100644
--- a/packages/style/mixins/hairline.less
+++ b/packages/style/mixins/hairline.less
@@ -5,7 +5,7 @@
   box-sizing: border-box;
 }
 
-.hairline(@border-color: #eee) {
+.hairline(@border-color: #ebedf0) {
   .hairline-common();
 
   top: -50%;
@@ -16,7 +16,7 @@
   border: 0 solid @border-color;
 }
 
-.hairline-bottom(@border-color: #eee, @left: 0) {
+.hairline-bottom(@border-color: #ebedf0, @left: 0) {
   .hairline-common();
 
   left: @left;
diff --git a/packages/swipe/demo/index.vue b/packages/swipe/demo/index.vue
index da7149a9b..9d5cfd0e9 100644
--- a/packages/swipe/demo/index.vue
+++ b/packages/swipe/demo/index.vue
@@ -124,6 +124,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-swipe {
   padding-bottom: 30px;
 
@@ -131,7 +133,7 @@ export default {
     cursor: pointer;
 
     &-item {
-      color: #fff;
+      color: @white;
       font-size: 20px;
       text-align: center;
       line-height: 150px;
@@ -151,7 +153,7 @@ export default {
       display: block;
       padding: 30px 60px;
       box-sizing: border-box;
-      background-color: #fff;
+      background-color: @white;
       pointer-events: none;
     }
   }
@@ -170,7 +172,7 @@ export default {
     bottom: 5px;
     padding: 2px 5px;
     font-size: 12px;
-    color: #fff;
+    color: @white;
     background: rgba(0, 0, 0, .1);
   }
 }
diff --git a/packages/tab/demo/index.vue b/packages/tab/demo/index.vue
index bfe744796..648478d96 100644
--- a/packages/tab/demo/index.vue
+++ b/packages/tab/demo/index.vue
@@ -176,6 +176,8 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-tab {
   margin-bottom: 300px;
 
@@ -185,7 +187,7 @@ export default {
   }
 
   .van-tab__pane {
-    background-color: #fff;
+    background-color: @white;
     padding: 20px;
   }
 
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 51ba2f71f..3d4a76418 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -16,9 +16,8 @@
 
 <script>
 import create from '../utils/create';
-import { RED, BLUE, GREEN } from '../utils/color';
+import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
-const DEFAULT_COLOR = '#999';
 const COLOR_MAP = {
   danger: RED,
   primary: BLUE,
@@ -39,7 +38,7 @@ export default create({
 
   computed: {
     style() {
-      const color = this.color || COLOR_MAP[this.type] || DEFAULT_COLOR;
+      const color = this.color || COLOR_MAP[this.type] || GRAY_DARK;
       const key = this.plain ? 'color' : 'backgroundColor';
       return { [key]: color };
     }
diff --git a/packages/tag/test/__snapshots__/demo.spec.js.snap b/packages/tag/test/__snapshots__/demo.spec.js.snap
index 35c9a97ca..bb078d582 100644
--- a/packages/tag/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tag/test/__snapshots__/demo.spec.js.snap
@@ -2,22 +2,22 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><span class="van-tag" style="background-color:#999;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#4b0;">标签</span></div>
-  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#999;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">
+  <div><span class="van-tag" style="background-color:#969799;">标签</span> <span class="van-tag" style="background-color:#f44;">标签</span> <span class="van-tag" style="background-color:#1989fa;">标签</span> <span class="van-tag" style="background-color:#4b0;">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-hairline--surround" style="color:#969799;">标签</span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#f44;">
       标签
     </span> <span class="van-tag van-tag--plain van-tag--round van-hairline--surround" style="color:#1989fa;">
       标签
     </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#4b0;">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--round" style="background-color:#999;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">
+  <div><span class="van-tag van-tag--round" style="background-color:#969799;">标签</span> <span class="van-tag van-tag--round" style="background-color:#f44;">
       标签
     </span> <span class="van-tag van-tag--round" style="background-color:#1989fa;">
       标签
     </span> <span class="van-tag van-tag--round" style="background-color:#4b0;">
       标签
     </span></div>
-  <div><span class="van-tag van-tag--mark" style="background-color:#999;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">
+  <div><span class="van-tag van-tag--mark" style="background-color:#969799;">标签</span> <span class="van-tag van-tag--mark" style="background-color:#f44;">
       标签
     </span> <span class="van-tag van-tag--mark" style="background-color:#1989fa;">
       标签
diff --git a/packages/utils/color.js b/packages/utils/color.js
index 0b03b2753..3dbbfa1ff 100644
--- a/packages/utils/color.js
+++ b/packages/utils/color.js
@@ -1,3 +1,4 @@
 export const RED = '#f44';
 export const BLUE = '#1989fa';
 export const GREEN = '#4b0';
+export const GRAY_DARK = '#969799';
diff --git a/packages/waterfall/demo/index.vue b/packages/waterfall/demo/index.vue
index 6dc44dc66..993e46b7a 100644
--- a/packages/waterfall/demo/index.vue
+++ b/packages/waterfall/demo/index.vue
@@ -55,17 +55,19 @@ export default {
 </script>
 
 <style lang="less">
+@import '../../style/var';
+
 .demo-waterfall {
   ul {
     max-height: 360px;
     overflow: scroll;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid @gray-light;
   }
 
   li {
     line-height: 50px;
-    border-bottom: 1px solid #e5e5e5;
-    background: #fff;
+    border-bottom: 1px solid @gray-light;
+    background: @white;
     text-align: center;
   }
 
@@ -74,7 +76,7 @@ export default {
     line-height: 1.4;
     font-size: 14px;
     text-align: center;
-    color: #666;
+    color: @gray-darker;
   }
 }
 </style>