From ec58d7fcfa00010c8b5692626afd293717d62bd2 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 1 Mar 2020 19:17:53 +0800
Subject: [PATCH] doc: make theme related demos looks more clear

---
 .../configConsumer/enUS/themeEnvironment.md   |  4 +++-
 .../configConsumer/zhCN/themeEnvironment.md   |  4 +++-
 .../components/configProvider/enUS/theme.md   |  6 ++++--
 .../configProvider/enUS/themeEnvironment.md   |  4 +++-
 .../configProvider/enUS/transparent.md        |  4 +++-
 .../components/configProvider/zhCN/theme.md   |  6 ++++--
 .../configProvider/zhCN/themeEnvironment.md   |  4 +++-
 .../configProvider/zhCN/transparent.md        |  4 +++-
 demo/documentation/theme/enUS/element.md      | 12 ++++++-----
 demo/documentation/theme/enUS/environment.md  | 16 ++++++++-------
 demo/documentation/theme/enUS/provideTheme.md |  6 ++++--
 demo/documentation/theme/enUS/readTheme.md    | 20 ++++++++++---------
 demo/documentation/theme/enUS/styleScheme.md  |  2 +-
 demo/documentation/theme/zhCN/element.md      | 12 ++++++-----
 demo/documentation/theme/zhCN/environment.md  | 16 ++++++++-------
 demo/documentation/theme/zhCN/provideTheme.md |  6 ++++--
 demo/documentation/theme/zhCN/readTheme.md    | 20 ++++++++++---------
 demo/documentation/theme/zhCN/styleScheme.md  |  2 +-
 18 files changed, 90 insertions(+), 58 deletions(-)

diff --git a/demo/documentation/components/configConsumer/enUS/themeEnvironment.md b/demo/documentation/components/configConsumer/enUS/themeEnvironment.md
index 87ce5b23f..3fbc8e8c8 100644
--- a/demo/documentation/components/configConsumer/enUS/themeEnvironment.md
+++ b/demo/documentation/components/configConsumer/enUS/themeEnvironment.md
@@ -7,7 +7,9 @@ Get current theme environment.
   <n-config-provider :theme="theme" :theme-environment="env">
     <n-config-consumer>
       <template v-slot="{ themeEnvironment }">
-        <n-tag>{{ themeEnvironment }}</n-tag>
+        <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+          <n-tag>{{ themeEnvironment }}</n-tag>
+        </div>
       </template>
     </n-config-consumer>
   </n-config-provider>
diff --git a/demo/documentation/components/configConsumer/zhCN/themeEnvironment.md b/demo/documentation/components/configConsumer/zhCN/themeEnvironment.md
index f693560d3..9d6438b2b 100644
--- a/demo/documentation/components/configConsumer/zhCN/themeEnvironment.md
+++ b/demo/documentation/components/configConsumer/zhCN/themeEnvironment.md
@@ -6,7 +6,9 @@
 <n-config-provider :theme="theme" :theme-environment="env">
   <n-config-consumer>
     <template v-slot="{ themeEnvironment }">
-      <n-tag>{{ themeEnvironment }}</n-tag>
+      <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+        <n-tag>{{ themeEnvironment }}</n-tag>
+      </div>
     </template>
   </n-config-consumer>
 </n-config-provider>
diff --git a/demo/documentation/components/configProvider/enUS/theme.md b/demo/documentation/components/configProvider/enUS/theme.md
index 643ed7af1..ab0b65644 100644
--- a/demo/documentation/components/configProvider/enUS/theme.md
+++ b/demo/documentation/components/configProvider/enUS/theme.md
@@ -2,8 +2,10 @@
 Set theme of inner components of config provider.
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">Dark</n-button>
-  <n-button @click="theme = 'light'">Light</n-button>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">Dark</n-button>
+    <n-button @click="theme = 'light'">Light</n-button>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/components/configProvider/enUS/themeEnvironment.md b/demo/documentation/components/configProvider/enUS/themeEnvironment.md
index 8d44372d2..148d40e13 100644
--- a/demo/documentation/components/configProvider/enUS/themeEnvironment.md
+++ b/demo/documentation/components/configProvider/enUS/themeEnvironment.md
@@ -8,7 +8,9 @@ Sometimes you may need some component to access some values at specific theme. Y
 <n-config-provider :theme="theme" :theme-environment="env">
   <n-config-consumer>
     <template v-slot="{ themeEnvironment }">
-      <n-tag>{{ themeEnvironment }}</n-tag>
+      <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+        <n-tag>{{ themeEnvironment }}</n-tag>
+      </div>
     </template>
   </n-config-consumer>
 </n-config-provider>
diff --git a/demo/documentation/components/configProvider/enUS/transparent.md b/demo/documentation/components/configProvider/enUS/transparent.md
index de678beab..81b923609 100644
--- a/demo/documentation/components/configProvider/enUS/transparent.md
+++ b/demo/documentation/components/configProvider/enUS/transparent.md
@@ -8,7 +8,9 @@ If you don't need wrapper DOM, set `abstract` on it. (Note, in this case it can
 <n-config-provider :theme="theme" :theme-environment="env" abstract>
   <n-config-consumer>
     <template v-slot="{ themeEnvironment }">
-      <n-tag>No Wrapper DOM: {{ themeEnvironment }}</n-tag>
+      <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+        <n-tag>No Wrapper DOM: {{ themeEnvironment }}</n-tag>
+      </div>
     </template>
   </n-config-consumer>
 </n-config-provider>
diff --git a/demo/documentation/components/configProvider/zhCN/theme.md b/demo/documentation/components/configProvider/zhCN/theme.md
index cf5c5a1d7..f100a4aea 100644
--- a/demo/documentation/components/configProvider/zhCN/theme.md
+++ b/demo/documentation/components/configProvider/zhCN/theme.md
@@ -2,8 +2,10 @@
 设置 Config Provider 内部组件的主题。
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">深色</n-button>
-  <n-button @click="theme = 'light'">浅色</n-button>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">深色</n-button>
+    <n-button @click="theme = 'light'">浅色</n-button>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/components/configProvider/zhCN/themeEnvironment.md b/demo/documentation/components/configProvider/zhCN/themeEnvironment.md
index 4e05ec655..67e7fde11 100644
--- a/demo/documentation/components/configProvider/zhCN/themeEnvironment.md
+++ b/demo/documentation/components/configProvider/zhCN/themeEnvironment.md
@@ -8,7 +8,9 @@
 <n-config-provider :theme="theme" :theme-environment="env">
   <n-config-consumer>
     <template v-slot="{ themeEnvironment }">
-      <n-tag>{{ themeEnvironment }}</n-tag>
+      <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+        <n-tag>{{ themeEnvironment }}</n-tag>
+      </div>
     </template>
   </n-config-consumer>
 </n-config-provider>
diff --git a/demo/documentation/components/configProvider/zhCN/transparent.md b/demo/documentation/components/configProvider/zhCN/transparent.md
index cd9bba581..ef0c8093b 100644
--- a/demo/documentation/components/configProvider/zhCN/transparent.md
+++ b/demo/documentation/components/configProvider/zhCN/transparent.md
@@ -8,7 +8,9 @@
 <n-config-provider :theme="theme" :theme-environment="env" abstract>
   <n-config-consumer>
     <template v-slot="{ themeEnvironment }">
-      <n-tag>无包裹 DOM：{{ themeEnvironment }}</n-tag>
+      <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+        <n-tag>无包裹 DOM：{{ themeEnvironment }}</n-tag>
+      </div>
     </template>
   </n-config-consumer>
 </n-config-provider>
diff --git a/demo/documentation/theme/enUS/element.md b/demo/documentation/theme/enUS/element.md
index 5124e6bac..8f51275d2 100644
--- a/demo/documentation/theme/enUS/element.md
+++ b/demo/documentation/theme/enUS/element.md
@@ -2,11 +2,13 @@
 Naive UI has n-element component. See [Element](n-element).
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">Dark</n-button>
-  <n-button @click="theme = 'light'">Light</n-button>
-  <n-el as="span" class="oops">
-    I am a span
-  </n-el>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">Dark</n-button>
+    <n-button @click="theme = 'light'">Light</n-button>
+    <n-el as="span" class="oops">
+      I am a span
+    </n-el>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/theme/enUS/environment.md b/demo/documentation/theme/enUS/environment.md
index cc90ba9b8..9ada89981 100644
--- a/demo/documentation/theme/enUS/environment.md
+++ b/demo/documentation/theme/enUS/environment.md
@@ -5,13 +5,15 @@ Sometimes you may need some component to access some values at specific theme. Y
   <n-button @click="theme = 'dark'">Dark Theme</n-button>
   <n-button @click="theme = 'light'">Light Theme</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env">
-  <n-config-consumer>
-    <template v-slot="{ themeEnvironment }">
-      <n-tag>{{ themeEnvironment }}</n-tag>
-    </template>
-  </n-config-consumer>
-</n-config-provider>
+<div style="background-color: rgba(128, 128, 128); padding: 8px;">
+  <n-config-provider :theme="theme" :theme-environment="env">
+    <n-config-consumer>
+      <template v-slot="{ themeEnvironment }">
+        <n-tag>{{ themeEnvironment }}</n-tag>
+      </template>
+    </n-config-consumer>
+  </n-config-provider>
+</div>
 ```
 ```js
 export default {
diff --git a/demo/documentation/theme/enUS/provideTheme.md b/demo/documentation/theme/enUS/provideTheme.md
index ec69dd4dd..bf691ccf8 100644
--- a/demo/documentation/theme/enUS/provideTheme.md
+++ b/demo/documentation/theme/enUS/provideTheme.md
@@ -3,8 +3,10 @@ Use Config Provider to set the theme of all its descedant components.
 
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">Dark</n-button>
-  <n-button @click="theme = 'light'">Light</n-button>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">Dark</n-button>
+    <n-button @click="theme = 'light'">Light</n-button>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/theme/enUS/readTheme.md b/demo/documentation/theme/enUS/readTheme.md
index be6a57a7c..24f0e2a01 100644
--- a/demo/documentation/theme/enUS/readTheme.md
+++ b/demo/documentation/theme/enUS/readTheme.md
@@ -3,15 +3,17 @@ Use Config Consumer to get theme at current position.
 
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">Dark</n-button>
-  <n-button @click="theme = 'light'">Light</n-button>
-  <n-config-consumer
-    @theme-change="handleThemeChange"
-  >
-    <template v-slot="{ theme }">
-      <div>theme: {{ theme }}</div>
-    </template>
-  </n-config-consumer>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">Dark</n-button>
+    <n-button @click="theme = 'light'">Light</n-button>
+    <n-config-consumer
+      @theme-change="handleThemeChange"
+    >
+      <template v-slot="{ theme }">
+        <div>theme: {{ theme }}</div>
+      </template>
+    </n-config-consumer>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/theme/enUS/styleScheme.md b/demo/documentation/theme/enUS/styleScheme.md
index b1dfea56e..16adce1d1 100644
--- a/demo/documentation/theme/enUS/styleScheme.md
+++ b/demo/documentation/theme/enUS/styleScheme.md
@@ -9,7 +9,7 @@ Naive UI has a built-in style scheme. It's powerful for you to create naive-ui s
         padding: '8px',
         borderColor: styleScheme.primaryColor,
         backgroundColor: 'transparent',
-        color: styleScheme.primaryColor,
+        color: styleScheme.warningColor,
         transition: `all .3s ${styleScheme.easeInOutCubicBezier}`
       }"
     >Cool!</button>
diff --git a/demo/documentation/theme/zhCN/element.md b/demo/documentation/theme/zhCN/element.md
index ab292a9b3..3ffbe89e1 100644
--- a/demo/documentation/theme/zhCN/element.md
+++ b/demo/documentation/theme/zhCN/element.md
@@ -2,11 +2,13 @@
 Naive UI 提供元素组件，参考 [Element](n-element)。
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">深色</n-button>
-  <n-button @click="theme = 'light'">浅色</n-button>
-  <n-el as="span" class="oops">
-    我是个 span 标签
-  </n-el>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">深色</n-button>
+    <n-button @click="theme = 'light'">浅色</n-button>
+    <n-el as="span" class="oops">
+      我是个 span 标签
+    </n-el>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/theme/zhCN/environment.md b/demo/documentation/theme/zhCN/environment.md
index 4e05ec655..a89da6344 100644
--- a/demo/documentation/theme/zhCN/environment.md
+++ b/demo/documentation/theme/zhCN/environment.md
@@ -5,13 +5,15 @@
   <n-button @click="theme = 'dark'">深色主题</n-button>
   <n-button @click="theme = 'light'">浅色主题</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env">
-  <n-config-consumer>
-    <template v-slot="{ themeEnvironment }">
-      <n-tag>{{ themeEnvironment }}</n-tag>
-    </template>
-  </n-config-consumer>
-</n-config-provider>
+<div style="background-color: rgba(128, 128, 128); padding: 8px;">
+  <n-config-provider :theme="theme" :theme-environment="env">
+    <n-config-consumer>
+      <template v-slot="{ themeEnvironment }">
+        <n-tag>{{ themeEnvironment }}</n-tag>
+      </template>
+    </n-config-consumer>
+  </n-config-provider>
+</div>
 ```
 ```js
 export default {
diff --git a/demo/documentation/theme/zhCN/provideTheme.md b/demo/documentation/theme/zhCN/provideTheme.md
index 6a9f0739c..8f42d1a19 100644
--- a/demo/documentation/theme/zhCN/provideTheme.md
+++ b/demo/documentation/theme/zhCN/provideTheme.md
@@ -3,8 +3,10 @@
 
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">深色</n-button>
-  <n-button @click="theme = 'light'">浅色</n-button>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">深色</n-button>
+    <n-button @click="theme = 'light'">浅色</n-button>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/theme/zhCN/readTheme.md b/demo/documentation/theme/zhCN/readTheme.md
index a621c69e5..66cb2bb88 100644
--- a/demo/documentation/theme/zhCN/readTheme.md
+++ b/demo/documentation/theme/zhCN/readTheme.md
@@ -3,15 +3,17 @@
 
 ```html
 <n-config-provider :theme="theme">
-  <n-button @click="theme = 'dark'">深色</n-button>
-  <n-button @click="theme = 'light'">浅色</n-button>
-  <n-config-consumer
-    @theme-change="handleThemeChange"
-  >
-    <template v-slot="{ theme }">
-      <div>主题：{{ theme }}</div>
-    </template>
-  </n-config-consumer>
+  <div style="background-color: rgba(128, 128, 128); padding: 8px;">
+    <n-button @click="theme = 'dark'">深色</n-button>
+    <n-button @click="theme = 'light'">浅色</n-button>
+    <n-config-consumer
+      @theme-change="handleThemeChange"
+    >
+      <template v-slot="{ theme }">
+        <div>主题：{{ theme }}</div>
+      </template>
+    </n-config-consumer>
+  </div>
 </n-config-provider>
 ```
 ```js
diff --git a/demo/documentation/theme/zhCN/styleScheme.md b/demo/documentation/theme/zhCN/styleScheme.md
index 08ed6c072..d44f10f09 100644
--- a/demo/documentation/theme/zhCN/styleScheme.md
+++ b/demo/documentation/theme/zhCN/styleScheme.md
@@ -9,7 +9,7 @@ Naive UI 有一组内置的样式方案。在创建一个 Naive UI 相同风格
         padding: '8px',
         borderColor: styleScheme.primaryColor,
         backgroundColor: 'transparent',
-        color: styleScheme.primaryColor,
+        color: styleScheme.warningColor,
         transition: `all .3s ${styleScheme.easeInOutCubicBezier}`
       }"
     >Cool!</button>