doc: make theme related demos looks more clear

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>

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>

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

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>

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>

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

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>

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>

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

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 {

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

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

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>

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

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 {

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

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

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>