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
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
2929src/composables/
@@ -38,6 +38,20 @@ export const toggleDark = useToggle(isDark)
3838export 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
You can’t perform that action at this time.
0 commit comments