From 1d2e983a0fc224e9dee5b96f702c8a4e3266d132 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Mon, 12 Sep 2022 11:16:11 +0800
Subject: [PATCH] docs: improve dark theme guide (#11040)

---
 packages/vant/src/config-provider/README.md       | 11 +++++++++++
 packages/vant/src/config-provider/README.zh-CN.md | 11 ++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md
index 965b52899..5b397894e 100644
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@@ -28,6 +28,15 @@ In takes effect globally, making all Vant components on the page dark.
 <van-config-provider theme="dark">...</van-config-provider>
 ```
 
+The theme prop will not change the text-color or background-color of the page, you can set it manually like this:
+
+```css
+.van-theme-dark body {
+  text-color: #f5f5f5;
+  background-color: black;
+}
+```
+
 > Tips: The theme prop will not change the background color of the page, you need to set it manually.
 
 ### Switch Theme
@@ -212,6 +221,8 @@ CSS variables in Vant are divided into **basic variables** and **component varia
 - The basic variables can only be modified through the `:root` selector.
 - The component variables can be modified through the `:root` selector and `ConfigProvider` component.
 
+You can also use the `.van-theme-light` and `.van-theme-dark` class selector to modify basic or component variables in light or dark mode individually.
+
 #### Variables List
 
 There are all **Basic Variables** below, for component CSS Variables, please refer to the documentation of each component.
diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md
index 550b252e6..b90e1b71f 100644
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@@ -28,7 +28,14 @@ app.use(ConfigProvider);
 <van-config-provider theme="dark">...</van-config-provider>
 ```
 
-> Tips: 开启深色模式不会改变页面的背景色，需要手动进行设置。
+值得注意的是，开启 Vant 的深色模式只会影响 Vant 组件的 UI，并不会影响全局的文字颜色或背景颜色，你可以参考以下 CSS 来设置一些全局样式：
+
+```css
+.van-theme-dark body {
+  text-color: #f5f5f5;
+  background-color: black;
+}
+```
 
 ### 动态切换
 
@@ -214,6 +221,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 - 基础变量只能通过 `:root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
 - 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
 
+你也可以使用 `.van-theme-light` 和 `.van-theme-dark` 这两个类名选择器来单独修改浅色或深色模式下的基础变量和组件变量。
+
 #### 变量列表
 
 下面是所有的基础变量：