docs: dark mode

README.md

@@ -38,6 +38,7 @@
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
 - 🍭 Support i18n
+- 🍭 Support Dark Mode
 - 🌍 Support SSR
 
 ## Install

README.zh-CN.md

@@ -42,6 +42,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
 - 🍭 支持服务器端渲染
+- 🍭 支持深色模式
 - 🌍 支持国际化和语言包定制
 
 ## 安装

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

@@ -8,7 +8,7 @@
 
 **Feature**
 
-- ConfigProvider: 新增 `theme` 属性，用于开启暗色模式
+- ConfigProvider: 新增 `theme` 属性，用于开启深色模式
 - ConfigProvider: 新增 `ConfigProviderTheme` 类型
 
 **Style**

packages/vant/docs/markdown/home.en-US.md

@@ -19,6 +19,7 @@
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
 - 🍭 Support i18n
+- 🍭 Support Dark Mode
 - 🌍 Support SSR
 
 ### Quickstart

packages/vant/docs/markdown/home.zh-CN.md

@@ -29,6 +29,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
 - 🍭 支持按需引入和 Tree Shaking
 - 🍭 支持无障碍访问（持续改进中）
 - 🍭 支持服务器端渲染
+- 🍭 支持深色模式
 - 🌍 支持国际化和语言包定制
 
 ### 快速上手

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

@@ -2,7 +2,7 @@
 
 ### Intro
 
-Used to config the theme of Vant components.
+Used to configure Vant components globally, providing dark mode, theme customization and other capabilities.
 
 ### Install
 
@@ -16,6 +16,42 @@ const app = createApp();
 app.use(ConfigProvider);
 ```
 
+## Dark Mode
+
+### Enable Dark Mode
+
+Enabling dark mode by setting the `theme` prop of the ConfigProvider component to `dark`.
+
+In takes effect globally, making all Vant components on the page dark.
+
+```html
+<van-config-provider theme="dark">...</van-config-provider>
+```
+
+> Tips: The theme prop will not change the background color of the page, you need to set it manually.
+
+### Switch Theme
+
+Switching between light and dark theme by dynamically setting the `theme` property.
+
+```html
+<van-config-provider :theme="theme">...</van-config-provider>
+```
+
+```js
+export default {
+  setup() {
+    const theme = ref('light');
+
+    setTimeout(() => {
+      theme.value = 'dark';
+    }, 1000);
+
+    return { theme };
+  },
+};
+```
+
 ## Custom Theme
 
 ### Intro
@@ -114,6 +150,8 @@ export default {
 
 > Tips：ConfigProvider only affects its child components.
 
+## Variables
+
 ### Basic Variables
 
 CSS variables in Vant are divided into **basic variables** and **component variables**. Component variables will inherit the basic variables. After modifying the basic variables, all related components will be affected.
@@ -123,7 +161,7 @@ CSS variables in Vant are divided into **basic variables** and **component varia
 - The basic variables can only be modified through the `body` selector.
 - The component variables can be modified through the `body` selector and `ConfigProvider` component.
 
-#### Variable List
+#### Variables List
 
 There are all **Basic Variables** below, for component CSS Variables, please refer to the documentation of each component.
 

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

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-用于配置 Vant 组件的主题样式，从 3.1.0 版本开始支持。
+用于全局配置 Vant 组件，提供深色模式、主题定制等能力。
 
 ### 引入
 
@@ -16,6 +16,42 @@ const app = createApp();
 app.use(ConfigProvider);
 ```
 
+## 深色模式
+
+### 开启深色模式
+
+将 ConfigProvider 组件的 `theme` 属性设置为 `dark`，可以开启深色模式。
+
+深色模式会全局生效，使页面上的所有 Vant 组件变为深色风格。
+
+```html
+<van-config-provider theme="dark">...</van-config-provider>
+```
+
+> Tips: 开启深色模式不会改变页面的背景色，需要手动进行设置。
+
+### 动态切换
+
+通过动态设置 `theme` 属性，可以在浅色风格和深色风格之间进行切换。
+
+```html
+<van-config-provider :theme="theme">...</van-config-provider>
+```
+
+```js
+export default {
+  setup() {
+    const theme = ref('light');
+
+    setTimeout(() => {
+      theme.value = 'dark';
+    }, 1000);
+
+    return { theme };
+  },
+};
+```
+
 ## 定制主题
 
 ### 介绍
@@ -114,6 +150,8 @@ export default {
 
 > 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 body 节点。
 
+## 主题变量
+
 ### 基础变量
 
 Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
@@ -213,7 +251,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` |

packages/vant/src/config-provider/demo/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue';
+import VanCell from '../../cell';
 import VanForm from '../../form';
 import VanField from '../../field';
 import VanRate from '../../rate';
+import VanSwitch from '../../switch';
 import VanSlider from '../../slider';
 import VanButton from '../../button';
 import VanConfigProvider from '..';
-import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site/use-translate';
 
 const t = useTranslate({
@@ -16,6 +18,8 @@ const t = useTranslate({
     submit: '提交',
     customTheme: '定制主题',
     defaultTheme: '默认主题',
+    darkMode: '深色模式',
+    switchDarkMode: '切换深色模式',
   },
   'en-US': {
     rate: 'Rate',
@@ -24,9 +28,13 @@ const t = useTranslate({
     submit: 'Submit',
     customTheme: 'Custom Theme',
     defaultTheme: 'DefaultTheme',
+    darkMode: 'Dark Mode',
+    switchDarkMode: 'Switch Dark Mode',
   },
 });
 
+const darkMode = ref(false);
+const theme = computed(() => (darkMode.value ? 'dark' : 'light'));
 const rate = ref(4);
 const slider = ref(50);
 const themeVars = {
@@ -41,51 +49,63 @@ const themeVars = {
 </script>
 
 <template>
-  <demo-block :title="t('defaultTheme')">
+  <div :style="{ background: darkMode ? 'black' : '', minHeight: '100vh' }">
-    <van-form>
+    <demo-block :title="t('darkMode')">
-      <van-field name="rate" :label="t('rate')">
+      <van-cell center :title="t('switchDarkMode')">
-        <template #input>
+        <template #right-icon>
-          <van-rate v-model="rate" />
+          <van-switch v-model="darkMode" size="24" />
         </template>
-      </van-field>
+      </van-cell>
+    </demo-block>
 
-      <van-field name="slider" :label="t('slider')">
+    <demo-block :title="t('defaultTheme')">
-        <template #input>
+      <van-config-provider :theme="theme">
-          <van-slider v-model="slider" />
+        <van-form>
-        </template>
+          <van-field name="rate" :label="t('rate')">
-      </van-field>
+            <template #input>
+              <van-rate v-model="rate" />
+            </template>
+          </van-field>
 
-      <div style="margin: 16px">
+          <van-field name="slider" :label="t('slider')">
-        <van-button round block type="primary" native-type="submit">
+            <template #input>
-          {{ t('submit') }}
+              <van-slider v-model="slider" />
-        </van-button>
+            </template>
-      </div>
+          </van-field>
-    </van-form>
-  </demo-block>
 
-  <demo-block :title="t('customTheme')">
+          <div style="margin: 16px">
-    <van-config-provider :theme-vars="themeVars">
+            <van-button round block type="primary" native-type="submit">
-      <van-form>
+              {{ t('submit') }}
-        <van-field name="rate" :label="t('rate')">
+            </van-button>
-          <template #input>
+          </div>
-            <van-rate v-model="rate" />
+        </van-form>
-          </template>
+      </van-config-provider>
-        </van-field>
+    </demo-block>
 
-        <van-field name="slider" :label="t('slider')">
+    <demo-block :title="t('customTheme')">
-          <template #input>
+      <van-config-provider :theme="theme" :theme-vars="themeVars">
-            <van-slider v-model="slider" />
+        <van-form>
-          </template>
+          <van-field name="rate" :label="t('rate')">
-        </van-field>
+            <template #input>
+              <van-rate v-model="rate" />
+            </template>
+          </van-field>
 
-        <div style="margin: 16px">
+          <van-field name="slider" :label="t('slider')">
-          <van-button round block type="primary" native-type="submit">
+            <template #input>
-            {{ t('submit') }}
+              <van-slider v-model="slider" />
-          </van-button>
+            </template>
-        </div>
+          </van-field>
-      </van-form>
+
-    </van-config-provider>
+          <div style="margin: 16px">
-  </demo-block>
+            <van-button round block type="primary" native-type="submit">
+              {{ t('submit') }}
+            </van-button>
+          </div>
+        </van-form>
+      </van-config-provider>
+    </demo-block>
+  </div>
 </template>
 
 <style lang="less">