diff --git a/packages/vant/src/config-provider/ConfigProvider.tsx b/packages/vant/src/config-provider/ConfigProvider.tsx index 57185ed43..7ff2105d5 100644 --- a/packages/vant/src/config-provider/ConfigProvider.tsx +++ b/packages/vant/src/config-provider/ConfigProvider.tsx @@ -26,6 +26,8 @@ const [name, bem] = createNamespace('config-provider'); export type ConfigProviderTheme = 'light' | 'dark'; +export type ConfigProviderThemeVarsScope = 'local' | 'global'; + export type ConfigProviderProvide = { iconPrefix?: string; }; @@ -42,6 +44,7 @@ export const configProviderProps = { themeVars: Object as ThemeVars, themeVarsDark: Object as ThemeVars, themeVarsLight: Object as ThemeVars, + themeVarsScope: makeStringProp('local'), iconPrefix: String, }; @@ -55,6 +58,22 @@ function mapThemeVarsToCSSVars(themeVars: Record) { return cssVars; } +function syncThemeVarsOnRoot( + newStyle: Record = {}, + oldStyle: Record = {}, +) { + Object.keys(newStyle).forEach((key) => { + if (newStyle[key] !== oldStyle[key]) { + document.documentElement.style.setProperty(key, newStyle[key] as string); + } + }); + Object.keys(oldStyle).forEach((key) => { + if (!newStyle[key]) { + document.documentElement.style.removeProperty(key); + } + }); +} + export default defineComponent({ name, @@ -93,6 +112,38 @@ export default defineComponent({ onActivated(addTheme); onDeactivated(removeTheme); onBeforeUnmount(removeTheme); + + watch( + style, + (newStyle, oldStyle) => { + if (props.themeVarsScope === 'global') { + syncThemeVarsOnRoot( + newStyle as Record, + oldStyle as Record, + ); + } + }, + { + immediate: true, + }, + ); + + watch( + () => props.themeVarsScope, + (newScope, oldStyle) => { + if (oldStyle === 'global') { + // remove on Root + syncThemeVarsOnRoot({}, style.value as Record); + } + if (newScope === 'global') { + // add on root + syncThemeVarsOnRoot(style.value as Record, {}); + } + }, + { + immediate: true, + }, + ); } provide(CONFIG_PROVIDER_KEY, props); @@ -104,7 +155,10 @@ export default defineComponent({ }); return () => ( - + {slots.default?.()} ); diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index 47992a554..f6805f1aa 100644 --- a/packages/vant/src/config-provider/README.md +++ b/packages/vant/src/config-provider/README.md @@ -161,7 +161,7 @@ export default { }; ``` -> Tips: ConfigProvider only affects its child components. +> Tips: ConfigProvider by default only affects its child components. set to `global` for the entire page to take effect. #### Use In TypeScript @@ -316,6 +316,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref | theme-vars | Theme variables | _object_ | - | | theme-vars-dark | Theme variables that work in dark mode，will override `theme-vars` | _object_ | - | | theme-vars-light | Theme variables that work in light mode, will override `theme-vars` | _object_ | - | +| theme-vars-scope | by default only affects its child components，set to `global` for the entire page to take effect | _ConfigProviderThemeVarsScope_ | `local` | | z-index | Set the z-index of all popup components, this property takes effect globally | _number_ | `2000` | | tag | HTML Tag of root element | _string_ | `div` | | icon-prefix | Icon className prefix | _string_ | `van-icon` | @@ -329,5 +330,6 @@ import type { ConfigProviderProps, ConfigProviderTheme, ConfigProviderThemeVars, + ConfigProviderThemeVarsScope, } from 'vant'; ``` diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index 2e3f309bf..e345372f7 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/packages/vant/src/config-provider/README.zh-CN.md @@ -159,7 +159,7 @@ export default { }; ``` -> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。 +> 注意：ConfigProvider 默认仅影响它的子组件的样式，不影响全局 root 节点。设置为 `global` 整个页面生效。 #### 在 TypeScript 中使用 @@ -318,6 +318,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变 | theme-vars | 自定义主题变量，局部生效 | _object_ | - | | theme-vars-dark | 仅在深色模式下生效的主题变量，优先级高于 `theme-vars` | _object_ | - | | theme-vars-light | 仅在浅色模式下生效的主题变量，优先级高于 `theme-vars` | _object_ | - | +| theme-vars-scope | 默认仅影响子组件的样式，设置为 `global` 整个页面生效 | _ConfigProviderThemeVarsScope_ | `local` | | tag | 根节点对应的 HTML 标签名 | _string_ | `div` | | z-index | 设置所有弹窗类组件的 z-index，该属性对全局生效 | _number_ | `2000` | | icon-prefix | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | @@ -331,5 +332,6 @@ import type { ConfigProviderProps, ConfigProviderTheme, ConfigProviderThemeVars, + ConfigProviderThemeVarsScope, } from 'vant'; ``` diff --git a/packages/vant/src/config-provider/index.ts b/packages/vant/src/config-provider/index.ts index 2d6258793..44e377213 100644 --- a/packages/vant/src/config-provider/index.ts +++ b/packages/vant/src/config-provider/index.ts @@ -7,6 +7,7 @@ export { configProviderProps } from './ConfigProvider'; export type { ConfigProviderProps, ConfigProviderTheme, + ConfigProviderThemeVarsScope, } from './ConfigProvider'; export type { ConfigProviderThemeVars } from './types'; diff --git a/packages/vant/src/config-provider/test/index.spec.tsx b/packages/vant/src/config-provider/test/index.spec.tsx index c4f4a0985..b9ea7c93e 100644 --- a/packages/vant/src/config-provider/test/index.spec.tsx +++ b/packages/vant/src/config-provider/test/index.spec.tsx @@ -78,3 +78,78 @@ test('should apply theme-vars-dark in dark mode', () => { '--van-rate-icon-full-color: green;', ); }); + +test('should apply theme-vars-scope enable root affects', async () => { + const wrapper = mount({ + render() { + return ( + + ); + }, + }); + + expect(document.documentElement.getAttribute('style')).toEqual( + '--van-rate-icon-full-color: green;', + ); + expect( + wrapper.element.getAttribute('style') === + '--van-rate-icon-full-color: green;', + ).toBeFalsy(); + + await wrapper.setProps({ + themeVarsScope: 'local', + }); + + expect(wrapper.element.getAttribute('style')).toEqual( + '--van-rate-icon-full-color: green;', + ); + expect( + document.documentElement.getAttribute('style') === + '--van-rate-icon-full-color: green;', + ).toBeFalsy(); +}); + +test('should apply theme-vars-scope enable root affects and sync theme vars', async () => { + const wrapper = mount({ + render() { + return ( + + ); + }, + }); + + expect(document.documentElement.getAttribute('style')).toEqual( + '--van-rate-icon-full-color: red;', + ); + + await wrapper.setProps({ + themeVars: { + rateIconFullColor: 'red', + buttonPrimaryColor: 'red', + }, + }); + + expect(document.documentElement.getAttribute('style')).toEqual( + '--van-rate-icon-full-color: red; --van-button-primary-color: red;', + ); + + await wrapper.setProps({ + themeVars: { + buttonPrimaryColor: 'red', + }, + }); + + expect(document.documentElement.getAttribute('style')).toEqual( + '--van-button-primary-color: red;', + ); +});