feat(ConfigProvider): add theme-vars-dark and theme-vars-light props (#10939)

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<ConfigProviderProvide> =
   Symbol(name);
 
+export type ThemeVars = PropType<Record<string, Numeric>>;
+
 const configProviderProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
   theme: makeStringProp<ConfigProviderTheme>('light'),
   zIndex: Number,
-  themeVars: Object as PropType<Record<string, Numeric>>,
+  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<CSSProperties | undefined>(() => {
-      if (props.themeVars) {
-        return mapThemeVarsToCSSVars(props.themeVars);
-      }
-    });
+    const style = computed<CSSProperties | undefined>(() =>
+      mapThemeVarsToCSSVars(
+        extend(
+          {},
+          props.themeVars,
+          props.theme === 'dark' ? props.themeVarsDark : props.themeVarsLight
+        )
+      )
+    );
 
     if (inBrowser) {
       const addTheme = () => {

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
+<van-config-provider
+  :theme-vars="themeVars"
+  :theme-vars-dark="themeVarsDark"
+  :theme-vars-light="themeVarsLight"
+>
+  ...
+</van-config-provider>
+```
+
+```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` |

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
+<van-config-provider
+  :theme-vars="themeVars"
+  :theme-vars-dark="themeVarsDark"
+  :theme-vars-light="themeVarsLight"
+>
+  ...
+</van-config-provider>
+```
+
+```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` |

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 (
+        <ConfigProvider
+          themeVars={{ rateIconFullColor: 'red' }}
+          themeVarsDark={{ rateIconFullColor: 'green' }}
+          themeVarsLight={{ rateIconFullColor: 'blue' }}
+        />
+      );
+    },
+  });
+
+  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 (
+        <ConfigProvider
+          theme="dark"
+          themeVars={{ rateIconFullColor: 'red' }}
+          themeVarsDark={{ rateIconFullColor: 'green' }}
+          themeVarsLight={{ rateIconFullColor: 'blue' }}
+        />
+      );
+    },
+  });
+
+  expect(wrapper.element.getAttribute('style')).toEqual(
+    '--van-rate-icon-full-color: green;'
+  );
+});