diff --git a/src/pages/demo/element/basic-color/components/info.vue b/src/pages/demo/element/basic-color/components/info.vue
index 1f33a070..ae1bc219 100644
--- a/src/pages/demo/element/basic-color/components/info.vue
+++ b/src/pages/demo/element/basic-color/components/info.vue
@@ -35,6 +35,9 @@ export default {
 
 <style lang="scss" scoped>
 .info {
+  &.dark {
+    color: #333;
+  }
   &.light {
     color: #FFF;
   }
diff --git a/src/pages/demo/element/basic-color/index.vue b/src/pages/demo/element/basic-color/index.vue
index 03d40bbf..ae6316c1 100644
--- a/src/pages/demo/element/basic-color/index.vue
+++ b/src/pages/demo/element/basic-color/index.vue
@@ -14,16 +14,24 @@
       <template slot="header">辅助色</template>
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="color color-info"></div>
+          <div class="color color-info">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-success"></div>
+          <div class="color color-success">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-warning"></div>
+          <div class="color color-warning">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-danger"></div>
+          <div class="color color-danger">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
       </el-row>
     </el-card>
@@ -31,30 +39,46 @@
       <template slot="header">中性色</template>
       <el-row :gutter="20" class="d2-mb">
         <el-col :span="6">
-          <div class="color color-text-main"></div>
+          <div class="color color-text-main">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-text-normal"></div>
+          <div class="color color-text-normal">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-text-sub"></div>
+          <div class="color color-text-sub">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-text-placehoder"></div>
+          <div class="color color-text-placehoder">
+            <d2-element-basic-color-info name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="6">
-          <div class="color color-border-1"></div>
+          <div class="color color-border-1">
+            <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-border-2"></div>
+          <div class="color color-border-2">
+            <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-border-3"></div>
+          <div class="color color-border-3">
+            <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
         <el-col :span="6">
-          <div class="color color-border-4"></div>
+          <div class="color color-border-4">
+            <d2-element-basic-color-info theme="dark" name="Blue" sass="$color-primary" color="#409EFF"/>
+          </div>
         </el-col>
       </el-row>
     </el-card>