docs: improve dark theme guide (#11040)

This commit is contained in:
neverland 2022-09-12 11:16:11 +08:00 committed by GitHub
parent cbbdad909a
commit 1d2e983a0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 1 deletions

View File

@ -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.

View File

@ -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` 这两个类名选择器来单独修改浅色或深色模式下的基础变量和组件变量。
#### 变量列表
下面是所有的基础变量: