From 53260297bddd1a3b1cb7a23e789fa33083efdc28 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 1 Apr 2023 20:40:29 +0800
Subject: [PATCH] docs(ConfigProvider): optimize theme demo (#11725)

---
 .../vant/src/config-provider/demo/index.vue   |  56 ++---
 .../test/__snapshots__/demo.spec.ts.snap      | 218 +++++++++---------
 2 files changed, 128 insertions(+), 146 deletions(-)

diff --git a/packages/vant/src/config-provider/demo/index.vue b/packages/vant/src/config-provider/demo/index.vue
index b44fd0b66..6e5c21eda 100644
--- a/packages/vant/src/config-provider/demo/index.vue
+++ b/packages/vant/src/config-provider/demo/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import VanCell from '../../cell';
 import VanForm from '../../form';
 import VanField from '../../field';
 import VanRate from '../../rate';
-import VanSwitch from '../../switch';
 import VanSlider from '../../slider';
 import VanButton from '../../button';
 import VanConfigProvider from '..';
@@ -19,7 +18,7 @@ const t = useTranslate({
     customTheme: '定制主题',
     defaultTheme: '默认主题',
     darkMode: '深色模式',
-    switchDarkMode: '切换深色模式',
+    switchDarkMode: '请点击文档右上角的按钮，切换深浅模式。',
   },
   'en-US': {
     rate: 'Rate',
@@ -29,12 +28,11 @@ const t = useTranslate({
     customTheme: 'Custom Theme',
     defaultTheme: 'DefaultTheme',
     darkMode: 'Dark Mode',
-    switchDarkMode: 'Switch Dark Mode',
+    switchDarkMode:
+      'Please click the button in the upper right corner to switch between dark and light modes.',
   },
 });
 
-const darkMode = ref(false);
-const theme = computed(() => (darkMode.value ? 'dark' : 'light'));
 const rate = ref(4);
 const slider = ref(50);
 const themeVars = {
@@ -49,41 +47,35 @@ const themeVars = {
 </script>
 
 <template>
-  <div :style="{ background: darkMode ? 'black' : '', minHeight: '100vh' }">
+  <div :style="{ minHeight: '100vh' }">
     <demo-block :title="t('darkMode')">
-      <van-cell center :title="t('switchDarkMode')">
-        <template #right-icon>
-          <van-switch v-model="darkMode" />
-        </template>
-      </van-cell>
+      <van-cell :title="t('switchDarkMode')" />
     </demo-block>
 
     <demo-block :title="t('defaultTheme')">
-      <van-config-provider :theme="theme">
-        <van-form>
-          <van-field name="rate" :label="t('rate')">
-            <template #input>
-              <van-rate v-model="rate" />
-            </template>
-          </van-field>
+      <van-form>
+        <van-field name="rate" :label="t('rate')">
+          <template #input>
+            <van-rate v-model="rate" />
+          </template>
+        </van-field>
 
-          <van-field name="slider" :label="t('slider')">
-            <template #input>
-              <van-slider v-model="slider" />
-            </template>
-          </van-field>
+        <van-field name="slider" :label="t('slider')">
+          <template #input>
+            <van-slider v-model="slider" />
+          </template>
+        </van-field>
 
-          <div style="margin: 16px">
-            <van-button round block type="primary" native-type="submit">
-              {{ t('submit') }}
-            </van-button>
-          </div>
-        </van-form>
-      </van-config-provider>
+        <div style="margin: 16px">
+          <van-button round block type="primary" native-type="submit">
+            {{ t('submit') }}
+          </van-button>
+        </div>
+      </van-form>
     </demo-block>
 
     <demo-block :title="t('customTheme')">
-      <van-config-provider :theme="theme" :theme-vars="themeVars">
+      <van-config-provider :theme-vars="themeVars">
         <van-form>
           <van-field name="rate" :label="t('rate')">
             <template #input>
diff --git a/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
index 8d176546d..7ce760862 100644
--- a/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
@@ -3,122 +3,112 @@
 exports[`should render demo and match snapshot 1`] = `
 <div style="min-height: 100vh;">
   <div>
-    <div class="van-cell van-cell--center">
+    <div class="van-cell">
       <div class="van-cell__title">
         <span>
-          Switch Dark Mode
+          Please click the button in the upper right corner to switch between dark and light modes.
         </span>
       </div>
-      <div role="switch"
-           class="van-switch"
-           tabindex="0"
-           aria-checked="false"
-      >
-        <div class="van-switch__node">
-        </div>
-      </div>
     </div>
   </div>
   <div>
-    <div class="van-config-provider">
-      <form class="van-form">
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label">
-            <label id="van-field-label"
-                   for="van-field-input"
-            >
-              Rate
-            </label>
-          </div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body">
-              <div class="van-field__control van-field__control--custom">
-                <div role="radiogroup"
-                     class="van-rate"
+    <form class="van-form">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
+            Rate
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <div class="van-field__control van-field__control--custom">
+              <div role="radiogroup"
+                   class="van-rate"
+                   tabindex="0"
+                   aria-disabled="false"
+                   aria-readonly="false"
+              >
+                <div role="radio"
+                     class="van-rate__item"
                      tabindex="0"
-                     aria-disabled="false"
-                     aria-readonly="false"
+                     aria-setsize="5"
+                     aria-posinset="1"
+                     aria-checked="true"
                 >
-                  <div role="radio"
-                       class="van-rate__item"
-                       tabindex="0"
-                       aria-setsize="5"
-                       aria-posinset="1"
-                       aria-checked="true"
-                  >
-                    <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    </i>
-                  </div>
-                  <div role="radio"
-                       class="van-rate__item"
-                       tabindex="0"
-                       aria-setsize="5"
-                       aria-posinset="2"
-                       aria-checked="true"
-                  >
-                    <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    </i>
-                  </div>
-                  <div role="radio"
-                       class="van-rate__item"
-                       tabindex="0"
-                       aria-setsize="5"
-                       aria-posinset="3"
-                       aria-checked="true"
-                  >
-                    <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    </i>
-                  </div>
-                  <div role="radio"
-                       class="van-rate__item"
-                       tabindex="0"
-                       aria-setsize="5"
-                       aria-posinset="4"
-                       aria-checked="true"
-                  >
-                    <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
-                    </i>
-                  </div>
-                  <div role="radio"
-                       class="van-rate__item"
-                       tabindex="0"
-                       aria-setsize="5"
-                       aria-posinset="5"
-                       aria-checked="false"
-                  >
-                    <i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
-                    </i>
-                  </div>
+                  <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                  </i>
+                </div>
+                <div role="radio"
+                     class="van-rate__item"
+                     tabindex="0"
+                     aria-setsize="5"
+                     aria-posinset="2"
+                     aria-checked="true"
+                >
+                  <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                  </i>
+                </div>
+                <div role="radio"
+                     class="van-rate__item"
+                     tabindex="0"
+                     aria-setsize="5"
+                     aria-posinset="3"
+                     aria-checked="true"
+                >
+                  <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                  </i>
+                </div>
+                <div role="radio"
+                     class="van-rate__item"
+                     tabindex="0"
+                     aria-setsize="5"
+                     aria-posinset="4"
+                     aria-checked="true"
+                >
+                  <i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
+                  </i>
+                </div>
+                <div role="radio"
+                     class="van-rate__item"
+                     tabindex="0"
+                     aria-setsize="5"
+                     aria-posinset="5"
+                     aria-checked="false"
+                >
+                  <i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
+                  </i>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="van-cell van-field">
-          <div class="van-cell__title van-field__label">
-            <label id="van-field-label"
-                   for="van-field-input"
-            >
-              Slider
-            </label>
-          </div>
-          <div class="van-cell__value van-field__value">
-            <div class="van-field__body">
-              <div class="van-field__control van-field__control--custom">
-                <div class="van-slider">
-                  <div class="van-slider__bar"
-                       style="width: 50%; left: 0%;"
+      </div>
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
+          >
+            Slider
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <div class="van-field__control van-field__control--custom">
+              <div class="van-slider">
+                <div class="van-slider__bar"
+                     style="width: 50%; left: 0%;"
+                >
+                  <div role="slider"
+                       class="van-slider__button-wrapper van-slider__button-wrapper--right"
+                       tabindex="0"
+                       aria-valuemin="0"
+                       aria-valuenow="50"
+                       aria-valuemax="100"
+                       aria-orientation="horizontal"
                   >
-                    <div role="slider"
-                         class="van-slider__button-wrapper van-slider__button-wrapper--right"
-                         tabindex="0"
-                         aria-valuemin="0"
-                         aria-valuenow="50"
-                         aria-valuemax="100"
-                         aria-orientation="horizontal"
-                    >
-                      <div class="van-slider__button">
-                      </div>
+                    <div class="van-slider__button">
                     </div>
                   </div>
                 </div>
@@ -126,19 +116,19 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
           </div>
         </div>
-        <div style="margin: 16px;">
-          <button type="submit"
-                  class="van-button van-button--primary van-button--normal van-button--block van-button--round"
-          >
-            <div class="van-button__content">
-              <span class="van-button__text">
-                Submit
-              </span>
-            </div>
-          </button>
-        </div>
-      </form>
-    </div>
+      </div>
+      <div style="margin: 16px;">
+        <button type="submit"
+                class="van-button van-button--primary van-button--normal van-button--block van-button--round"
+        >
+          <div class="van-button__content">
+            <span class="van-button__text">
+              Submit
+            </span>
+          </div>
+        </button>
+      </div>
+    </form>
   </div>
   <div>
     <div class="van-config-provider"