mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 10:56:35 +08:00
docs: improve dark theme guide (#11040)
This commit is contained in:
parent
cbbdad909a
commit
1d2e983a0f
@ -28,6 +28,15 @@ In takes effect globally, making all Vant components on the page dark.
|
|||||||
<van-config-provider theme="dark">...</van-config-provider>
|
<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.
|
> Tips: The theme prop will not change the background color of the page, you need to set it manually.
|
||||||
|
|
||||||
### Switch Theme
|
### 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 basic variables can only be modified through the `:root` selector.
|
||||||
- The component variables can be modified through the `:root` selector and `ConfigProvider` component.
|
- 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
|
#### Variables List
|
||||||
|
|
||||||
There are all **Basic Variables** below, for component CSS Variables, please refer to the documentation of each component.
|
There are all **Basic Variables** below, for component CSS Variables, please refer to the documentation of each component.
|
||||||
|
@ -28,7 +28,14 @@ app.use(ConfigProvider);
|
|||||||
<van-config-provider theme="dark">...</van-config-provider>
|
<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 组件` 修改。
|
||||||
- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
|
- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
|
||||||
|
|
||||||
|
你也可以使用 `.van-theme-light` 和 `.van-theme-dark` 这两个类名选择器来单独修改浅色或深色模式下的基础变量和组件变量。
|
||||||
|
|
||||||
#### 变量列表
|
#### 变量列表
|
||||||
|
|
||||||
下面是所有的基础变量:
|
下面是所有的基础变量:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user