docs(ConfigProvider): optimize theme demo (#11725)

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,17 +47,12 @@ 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')">
+      <van-cell :title="t('switchDarkMode')" />
-        <template #right-icon>
-          <van-switch v-model="darkMode" />
-        </template>
-      </van-cell>
     </demo-block>
 
     <demo-block :title="t('defaultTheme')">
-      <van-config-provider :theme="theme">
       <van-form>
         <van-field name="rate" :label="t('rate')">
           <template #input>
@@ -79,11 +72,10 @@ const themeVars = {
           </van-button>
         </div>
       </van-form>
-      </van-config-provider>
     </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>

packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap

@@ -3,24 +3,15 @@
 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">
@@ -139,7 +130,6 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </form>
   </div>
-  </div>
   <div>
     <div class="van-config-provider"
          style="--van-rate-icon-full-color: #07c160; --van-slider-bar-height: 4px; --van-slider-button-width: 20px; --van-slider-button-height: 20px; --van-slider-active-background: #07c160; --van-button-primary-background: #07c160; --van-button-primary-border-color: #07c160;"