diff --git a/src/pages/demo/element/basic-color/components/info.vue b/src/pages/demo/element/basic-color/components/info.vue
index d22c7e27..c0e7cfbc 100644
--- a/src/pages/demo/element/basic-color/components/info.vue
+++ b/src/pages/demo/element/basic-color/components/info.vue
@@ -1,5 +1,27 @@
 <template>
-  <div>
-    <p>颜色</p>
+  <div class="info" :class="theme">
+    <p>颜色名称</p>
+    <p>scss名称</p>
+    <p>颜色值</p>
   </div>
 </template>
+
+<script>
+export default {
+  props: {
+    theme: {
+      type: String,
+      required: false,
+      default: 'light' // dark
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info {
+  &.light {
+    color: #FFF;
+  }
+}
+</style>