Skip to content

Commit a6d9afc

Browse files
committed
docs: update dark mode
1 parent bf280e4 commit a6d9afc

File tree

1 file changed

+18
-4
lines changed

1 file changed

+18
-4
lines changed

vue3-vant-mobile/dark-mode.md

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ outline: deep
66

77
# :last_quarter_moon: 暗黑模式
88

9-
### 初始化模式 {#initialization-mode}
9+
## 初始化模式 {#initialization-mode}
1010

11-
根据本地存储的主题设置和系统偏好,自动为页面添加或移除 dark 类,实现暗黑模式的切换。
11+
根据本地存储的主题设置和系统偏好,自动添加或移除`dark`类,实现暗黑模式的切换。
1212

1313
```ts
1414
<script>
@@ -21,9 +21,9 @@ outline: deep
2121
</script>
2222
```
2323

24-
### 切换模式 {#switch-mode}
24+
## 如何使用? {#use}
2525

26-
统一管理暗黑模式的状态、切换和用户偏好,方便在 Vue 组件中直接使用。
26+
`dark.ts`文件统一管理暗黑模式的状态、切换和用户偏好,方便在 Vue 组件中直接使用,无需引入
2727

2828
```text
2929
src/composables/
@@ -38,6 +38,20 @@ export const toggleDark = useToggle(isDark)
3838
export const preferredDark = usePreferredDark()
3939
```
4040

41+
### 获取当前模式
42+
```ts
43+
const mode = isDark.value ? 'dark' : 'light'
44+
```
45+
46+
### 切换模式 {#switch-mode}
47+
```ts
48+
toggleDark()
49+
```
50+
51+
### 获取用户偏好
52+
```ts
53+
const userPreferredDark = preferredDark.value ? 'dark' : 'light'
54+
```
4155

4256
## 常见问题 {#FAQ}
4357

0 commit comments

Comments
 (0)