diff --git a/README.md b/README.md index b34356e1b..8b43fb786 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ - 🍭 Support Custom Theme - 🍭 Support Accessibility (still improving) - 🍭 Support i18n +- 🍭 Support Dark Mode - 🌍 Support SSR ## Install diff --git a/README.zh-CN.md b/README.zh-CN.md index ab1fb5998..43fadb58d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -42,6 +42,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源 - 🍭 支持按需引入和 Tree Shaking - 🍭 支持无障碍访问（持续改进中） - 🍭 支持服务器端渲染 +- 🍭 支持深色模式 - 🌍 支持国际化和语言包定制 ## 安装 diff --git a/packages/vant/docs/markdown/changelog-v4.zh-CN.md b/packages/vant/docs/markdown/changelog-v4.zh-CN.md index ae795c8b9..5fb8114f3 100644 --- a/packages/vant/docs/markdown/changelog-v4.zh-CN.md +++ b/packages/vant/docs/markdown/changelog-v4.zh-CN.md @@ -8,7 +8,7 @@ **Feature** -- ConfigProvider: 新增 `theme` 属性，用于开启暗色模式 +- ConfigProvider: 新增 `theme` 属性，用于开启深色模式 - ConfigProvider: 新增 `ConfigProviderTheme` 类型 **Style** diff --git a/packages/vant/docs/markdown/home.en-US.md b/packages/vant/docs/markdown/home.en-US.md index 9ed7a078f..93a36a7d5 100644 --- a/packages/vant/docs/markdown/home.en-US.md +++ b/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 diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md index 5225a0a4f..7a710972c 100644 --- a/packages/vant/docs/markdown/home.zh-CN.md +++ b/packages/vant/docs/markdown/home.zh-CN.md @@ -29,6 +29,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源 - 🍭 支持按需引入和 Tree Shaking - 🍭 支持无障碍访问（持续改进中） - 🍭 支持服务器端渲染 +- 🍭 支持深色模式 - 🌍 支持国际化和语言包定制 ### 快速上手 diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index 04da5b3eb..2ff983c26 100644 --- a/packages/vant/src/config-provider/README.md +++ b/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 +... +``` + +> 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 +... +``` + +```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. diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md index 838688bbb..943d2c4db 100644 --- a/packages/vant/src/config-provider/README.zh-CN.md +++ b/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 +... +``` + +> Tips: 开启深色模式不会改变页面的背景色，需要手动进行设置。 + +### 动态切换 + +通过动态设置 `theme` 属性，可以在浅色风格和深色风格之间进行切换。 + +```html +... +``` + +```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` | diff --git a/packages/vant/src/config-provider/demo/index.vue b/packages/vant/src/config-provider/demo/index.vue index e6c8fbd34..0ff7ab8bc 100644 --- a/packages/vant/src/config-provider/demo/index.vue +++ b/packages/vant/src/config-provider/demo/index.vue @@ -1,11 +1,13 @@