File tree Expand file tree Collapse file tree 1 file changed +18
-4
lines changed Expand file tree Collapse file tree 1 file changed +18
-4
lines changed Original file line number Diff line number Diff line change @@ -6,9 +6,9 @@ outline: deep
6
6
7
7
# :last_quarter_moon : 暗黑模式
8
8
9
- ### 初始化模式 {#initialization-mode}
9
+ ## 初始化模式 {#initialization-mode}
10
10
11
- 根据本地存储的主题设置和系统偏好,自动为页面添加或移除 dark 类,实现暗黑模式的切换。
11
+ 根据本地存储的主题设置和系统偏好,自动添加或移除 ` dark ` 类,实现暗黑模式的切换。
12
12
13
13
``` ts
14
14
<script >
@@ -21,9 +21,9 @@ outline: deep
21
21
< / script >
22
22
```
23
23
24
- ### 切换模式 {#switch-mode }
24
+ ## 如何使用? {#use }
25
25
26
- 统一管理暗黑模式的状态 、切换和用户偏好,方便在 Vue 组件中直接使用。
26
+ ` dark.ts ` 文件统一管理暗黑模式的状态 、切换和用户偏好,方便在 Vue 组件中直接使用,无需引入 。
27
27
28
28
``` text
29
29
src/composables/
@@ -38,6 +38,20 @@ export const toggleDark = useToggle(isDark)
38
38
export const preferredDark = usePreferredDark ()
39
39
```
40
40
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
+ ```
41
55
42
56
## 常见问题 {#FAQ}
43
57
You can’t perform that action at this time.
0 commit comments