mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: dark mode
This commit is contained in:
chenjiahan
parent
5b3c4f1546
commit
d4584aafda
@ -38,6 +38,7 @@
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support i18n
|
||||
- 🍭 Support Dark Mode
|
||||
- 🌍 Support SSR
|
||||
|
||||
## Install
|
||||
|
||||
@ -42,6 +42,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问（持续改进中）
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🍭 支持深色模式
|
||||
- 🌍 支持国际化和语言包定制
|
||||
|
||||
## 安装
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
**Feature**
|
||||
|
||||
- ConfigProvider: 新增 `theme` 属性，用于开启暗色模式
|
||||
- ConfigProvider: 新增 `theme` 属性，用于开启深色模式
|
||||
- ConfigProvider: 新增 `ConfigProviderTheme` 类型
|
||||
|
||||
**Style**
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support i18n
|
||||
- 🍭 Support Dark Mode
|
||||
- 🌍 Support SSR
|
||||
|
||||
### Quickstart
|
||||
|
||||
@ -29,6 +29,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问（持续改进中）
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🍭 支持深色模式
|
||||
- 🌍 支持国际化和语言包定制
|
||||
|
||||
### 快速上手
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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')">
|
||||
<van-form>
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
<div :style="{ background: darkMode ? 'black' : '', minHeight: '100vh' }">
|
||||
<demo-block :title="t('darkMode')">
|
||||
<van-cell center :title="t('switchDarkMode')">
|
||||
<template #right-icon>
|
||||
<van-switch v-model="darkMode" size="24" />
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
<demo-block :title="t('defaultTheme')">
|
||||
<van-config-provider :theme="theme">
|
||||
<van-form>
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<demo-block :title="t('customTheme')">
|
||||
<van-config-provider :theme-vars="themeVars">
|
||||
<van-form>
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</van-config-provider>
|
||||
</demo-block>
|
||||
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
<demo-block :title="t('customTheme')">
|
||||
<van-config-provider :theme="theme" :theme-vars="themeVars">
|
||||
<van-form>
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</van-config-provider>
|
||||
</demo-block>
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<div style="margin: 16px">
|
||||
<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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user