feat(ConfigProvider): dark theme class

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -1,4 +1,5 @@
 import {
+  watch,
   provide,
   computed,
   defineComponent,
@@ -7,7 +8,12 @@ import {
   type CSSProperties,
   type ExtractPropTypes,
 } from 'vue';
-import { kebabCase, makeStringProp, createNamespace } from '../utils';
+import {
+  inBrowser,
+  kebabCase,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 
 const [name, bem] = createNamespace('config-provider');
 
@@ -49,13 +55,20 @@ export default defineComponent({
       }
     });
 
+    if (inBrowser) {
+      watch(
+        () => props.theme,
+        (newVal, oldVal) => {
+          document.body.classList.remove(`van-theme-${oldVal}`);
+          document.body.classList.add(`van-theme-${newVal}`);
+        }
+      );
+    }
+
     provide(CONFIG_PROVIDER_KEY, props);
 
     return () => (
-      <props.tag
+      <props.tag class={bem()} style={style.value}>
-        class={[bem(), `van-theme-${props.theme}`]}
-        style={style.value}
-      >
         {slots.default?.()}
       </props.tag>
     );

packages/vant/src/config-provider/README.zh-CN.md

@@ -213,7 +213,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| theme | 主题风格，设置为 `dark` 来开启暗色模式，局部生效 | _ConfigProviderTheme_ | `light` |
+| theme | 主题风格，设置为 `dark` 来开启暗色模式，全局生效 | _ConfigProviderTheme_ | `light` |
 | theme-vars | 自定义主题变量，局部生效 | _object_ | - |
 | tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div` |
 | icon-prefix `v3.1.3` | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |