diff --git a/packages/vant/src/config-provider/ConfigProvider.tsx b/packages/vant/src/config-provider/ConfigProvider.tsx index f27a95cfb..53cda1374 100644 --- a/packages/vant/src/config-provider/ConfigProvider.tsx +++ b/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 () => ( - + {slots.default?.()} ); diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index 5b2d35622..0c1b73baf 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/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` |