diff --git a/packages/vant/src/config-provider/ConfigProvider.tsx b/packages/vant/src/config-provider/ConfigProvider.tsx index da80ebb34..3f69bb8f9 100644 --- a/packages/vant/src/config-provider/ConfigProvider.tsx +++ b/packages/vant/src/config-provider/ConfigProvider.tsx @@ -2,6 +2,7 @@ import { watch, provide, computed, + watchEffect, onActivated, onDeactivated, onBeforeUnmount, @@ -12,6 +13,7 @@ import { type ExtractPropTypes, } from 'vue'; import { + extend, inBrowser, kebabCase, makeStringProp, @@ -31,11 +33,15 @@ export type ConfigProviderProvide = { export const CONFIG_PROVIDER_KEY: InjectionKey = Symbol(name); +export type ThemeVars = PropType>; + const configProviderProps = { tag: makeStringProp('div'), theme: makeStringProp('light'), zIndex: Number, - themeVars: Object as PropType>, + themeVars: Object as ThemeVars, + themeVarsDark: Object as ThemeVars, + themeVarsLight: Object as ThemeVars, iconPrefix: String, }; @@ -55,11 +61,15 @@ export default defineComponent({ props: configProviderProps, setup(props, { slots }) { - const style = computed(() => { - if (props.themeVars) { - return mapThemeVarsToCSSVars(props.themeVars); - } - }); + const style = computed(() => + mapThemeVarsToCSSVars( + extend( + {}, + props.themeVars, + props.theme === 'dark' ? props.themeVarsDark : props.themeVarsLight + ) + ) + ); if (inBrowser) { const addTheme = () => { diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index 1d43e6aeb..14d561c9e 100644 --- a/packages/vant/src/config-provider/README.md +++ b/packages/vant/src/config-provider/README.md @@ -150,6 +150,45 @@ export default { > Tips: ConfigProvider only affects its child components. +### Combining dark mode with CSS variables + +If you need to define CSS variables for dark mode or light mode separately, you can use the `theme-vars-dark` and `theme-vars-light` props. + +- `theme-vars-dark`: define CSS variables that only take effect in dark mode, will override the variables defined in `theme-vars`. +- `theme-vars-light`: define CSS variables that only take effect in light mode, will override the variables defined in `theme-vars`. + +#### Example + +Take the `buttonPrimaryBackground` variable below as an example, the value will be `blue` in dark mode, and `green` in light mode. + +```html + + ... + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const themeVars = { buttonPrimaryBackground: 'red' }; + const themeVarsDark = { buttonPrimaryBackground: 'blue' }; + const themeVarsLight = { buttonPrimaryBackground: 'green' }; + + return { + themeVars, + themeVarsDark, + themeVarsLight, + }; + }, +}; +``` + ## Variables ### Basic Variables @@ -249,6 +288,8 @@ There are all **Basic Variables** below, for component CSS Variables, please ref | --- | --- | --- | --- | | theme | Theme mode, can be set to `dark` | _ConfigProviderTheme_ | `light` | | 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_ | - | | z-index `v3.6.0` | Set the z-index of all popup components, this property takes effect globally | _number_ | `2000` | | tag `v3.1.2` | HTML Tag of root element | _string_ | `div` | | icon-prefix `v3.1.3` | Icon className prefix | _string_ | `van-icon` | diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index ce6a72fc3..2932a0116 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/packages/vant/src/config-provider/README.zh-CN.md @@ -150,6 +150,45 @@ export default { > 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 body 节点。 +### 结合深色模式与 CSS 变量 + +如果需要单独定义深色模式或浅色模式下的 CSS 变量，可以使用 `theme-vars-dark` 和 `theme-vars-light` 属性。 + +- `theme-vars-dark`: 仅在深色模式下生效的 CSS 变量，优先级高于 `theme-vars` 中定义的变量。 +- `theme-vars-light`: 仅在浅色模式下生效的 CSS 变量，优先级高于 `theme-vars` 中定义的变量。 + +#### 示例 + +以下方的 `buttonPrimaryBackground` 变量为例, 在深色模式下的值为 `blue`，在浅色模式下的值为 `green`。 + +```html + + ... + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const themeVars = { buttonPrimaryBackground: 'red' }; + const themeVarsDark = { buttonPrimaryBackground: 'blue' }; + const themeVarsLight = { buttonPrimaryBackground: 'green' }; + + return { + themeVars, + themeVarsDark, + themeVarsLight, + }; + }, +}; +``` + ## 主题变量 ### 基础变量 @@ -253,6 +292,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变 | --- | --- | --- | --- | | theme | 主题风格，设置为 `dark` 来开启深色模式，全局生效 | _ConfigProviderTheme_ | `light` | | theme-vars | 自定义主题变量，局部生效 | _object_ | - | +| theme-vars-dark | 仅在深色模式下生效的主题变量，优先级高于 `theme-vars` | _object_ | - | +| theme-vars-light | 仅在浅色模式下生效的主题变量，优先级高于 `theme-vars` | _object_ | - | | tag `v3.1.2` | 根节点对应的 HTML 标签名 | _string_ | `div` | | z-index `v3.6.0` | 设置所有弹窗类组件的 z-index，该属性对全局生效 | _number_ | `2000` | | icon-prefix `v3.1.3` | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | diff --git a/packages/vant/src/config-provider/test/index.spec.tsx b/packages/vant/src/config-provider/test/index.spec.tsx index 7ae439d3f..1779c541a 100644 --- a/packages/vant/src/config-provider/test/index.spec.tsx +++ b/packages/vant/src/config-provider/test/index.spec.tsx @@ -41,3 +41,40 @@ test('should change global z-index when using z-index prop', async () => { await later(); expect(wrapper.find('.van-popup').style.zIndex).toEqual('1'); }); + +test('should apply theme-vars-light in light mode', () => { + const wrapper = mount({ + render() { + return ( + + ); + }, + }); + + expect(wrapper.element.getAttribute('style')).toEqual( + '--van-rate-icon-full-color: blue;' + ); +}); + +test('should apply theme-vars-dark in dark mode', () => { + const wrapper = mount({ + render() { + return ( + + ); + }, + }); + + expect(wrapper.element.getAttribute('style')).toEqual( + '--van-rate-icon-full-color: green;' + ); +});