feat(ConfigProvider): add theme prop

packages/vant/docs/markdown/changelog-v4.zh-CN.md

@@ -6,6 +6,11 @@
 
 `2022-01-17`
 
+**Feature**
+
+- ConfigProvider: 新增 `theme` 属性，用于开启暗色模式
+- ConfigProvider: 新增 `ConfigProviderTheme` 类型
+
 **Style**
 
 以下组件的默认色值调整为 `--van-primary-color`：
@@ -23,4 +28,4 @@
 
 - Button: 默认圆角大小从 `2px` 调整为 `4px`
 - Button: 默认按钮的边框颜色调整为 `--van-gray-4`
-- Button: 调整 font-smoothing，默认使用粗体文字
+- Button: 调整 `font-smoothing`，默认使用粗体文字

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

@@ -11,6 +11,8 @@ import { kebabCase, makeStringProp, createNamespace } from '../utils';
 
 const [name, bem] = createNamespace('config-provider');
 
+export type ConfigProviderTheme = 'light' | 'dark';
+
 export type ConfigProviderProvide = {
   iconPrefix?: string;
 };
@@ -20,6 +22,7 @@ export const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide> =
 
 const configProviderProps = {
   tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
+  theme: makeStringProp<ConfigProviderTheme>('light'),
   themeVars: Object as PropType<Record<string, string | number>>,
   iconPrefix: String,
 };
@@ -49,7 +52,10 @@ export default defineComponent({
     provide(CONFIG_PROVIDER_KEY, props);
 
     return () => (
-      <props.tag class={bem()} style={style.value}>
+      <props.tag
+        class={[bem(), `van-theme-${props.theme}`]}
+        style={style.value}
+      >
         {slots.default?.()}
       </props.tag>
     );

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

@@ -207,16 +207,17 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 
 ### Props
 
-| Attribute            | Description              | Type     | Default    |
-| -------------------- | ------------------------ | -------- | ---------- |
-| theme-vars           | Theme variables          | _object_ | -          |
-| tag `v3.1.2`         | HTML Tag of root element | _string_ | `div`      |
-| icon-prefix `v3.1.3` | Icon className prefix    | _string_ | `van-icon` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| theme | Theme mode, can be set to `dark` | _ConfigProviderTheme_ | `light` |
+| theme-vars | Theme variables | _object_ | - |
+| tag `v3.1.2` | HTML Tag of root element | _string_ | `div` |
+| icon-prefix `v3.1.3` | Icon className prefix | _string_ | `van-icon` |
 
 ### Types
 
 The component exports the following type definitions:
 
 ```ts
-import type { ConfigProviderProps } from 'vant';
+import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
 ```

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

@@ -213,7 +213,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| theme-vars | 自定义主题变量 | _object_ | - |
+| 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` |
 
@@ -222,5 +223,5 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 组件导出以下类型定义：
 
 ```ts
-import type { ConfigProviderProps } from 'vant';
+import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
 ```

packages/vant/src/config-provider/index.ts

@@ -3,7 +3,10 @@ import _ConfigProvider from './ConfigProvider';
 
 export const ConfigProvider = withInstall(_ConfigProvider);
 export default ConfigProvider;
-export type { ConfigProviderProps } from './ConfigProvider';
+export type {
+  ConfigProviderProps,
+  ConfigProviderTheme,
+} from './ConfigProvider';
 
 declare module 'vue' {
   export interface GlobalComponents {