主题
useDark
具有自动数据持久性的反应式夜间模式。
¥Reactive dark mode with auto data persistence.
通过 Vue School 的免费视频课程学习 useDark！示例
基本用法
¥Basic Usage
js
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)行为
¥Behavior
useDark 与 usePreferredDark 和 useStorage 组合。启动时，它从 localStorage/sessionStorage 中读取值（该键是可配置的）以查看是否有用户配置的配色方案，如果没有，它将使用用户的系统首选项。当你更改 isDark 引用时，它将更新相应元素的属性，然后将首选项存储到存储（默认键：vueuse-color-scheme）以进行持久化。
¥useDark combines with usePreferredDark and useStorage On start up, it reads the value from localStorage/sessionStorage (the key is configurable) to see if there is a user configured color scheme, if not, it will use users' system preferences. When you change the isDark ref, it will update the corresponding element's attribute and then store the preference to storage (default key: vueuse-color-scheme) for persistence.
请注意，
useDark仅处理 DOM 属性更改，以便你在 CSS 中应用正确的选择器。它不会为你处理实际的样式、主题或 CSS。¥Please note
useDarkonly handles the DOM attribute changes for you to apply proper selector in your CSS. It does NOT handle the actual style, theme or CSS for you.
配置
¥Configuration
默认情况下，它使用 Tailwind CSS 青睐夜间模式，当 dark 类应用于 html 标签时，它会启用夜间模式，例如：
¥By default, it uses Tailwind CSS favored dark mode, which enables dark mode when class dark is applied to the html tag, for example:
html
<!--light-->
<html>
...
</html>
<!--dark-->
<html class="dark">
...
</html>不过，你还可以对其进行自定义，使其与大多数 CSS 框架兼容。
¥Still, you can also customize it to make it work with most CSS frameworks.
例如：
¥For example:
ts
const isDark = useDark({
selector: 'body',
attribute: 'color-scheme',
valueDark: 'dark',
valueLight: 'light',
})会像
¥will work like
html
<!--light-->
<html>
<body color-scheme="light">
...
</body>
</html>
<!--dark-->
<html>
<body color-scheme="dark">
...
</body>
</html>如果上面的配置仍然不能满足你的需求，你可以使用 onChanged 选项来完全控制你处理更新的方式。
¥If the configuration above still does not fit your needs, you can use theonChanged option to take full control over how you handle updates.
ts
const isDark = useDark({
onChanged(dark: boolean) {
// update the dom, call the API or something
},
})js
const isDark = useDark({
onChanged(dark) {
// update the dom, call the API or something
},
})组件用法
¥Component Usage
vue
<template>
<UseDark v-slot="{ isDark, toggleDark }">
<button @click="toggleDark()">
Is Dark: {{ isDark }}
</button>
</UseDark>
</template>类型声明
typescript
export interface UseDarkOptions
extends Omit<UseColorModeOptions<BasicColorSchema>, "modes" | "onChanged"> {
/**
* Value applying to the target element when isDark=true
*
* @default 'dark'
*/
valueDark?: string
/**
* Value applying to the target element when isDark=false
*
* @default ''
*/
valueLight?: string
/**
* A custom handler for handle the updates.
* When specified, the default behavior will be overridden.
*
* @default undefined
*/
onChanged?: (
isDark: boolean,
defaultHandler: (mode: BasicColorSchema) => void,
mode: BasicColorSchema,
) => void
}
/**
* Reactive dark mode with auto data persistence.
*
* @see https://vueuse.org/useDark
* @param options
*/
export declare function useDark(
options?: UseDarkOptions,
): WritableComputedRef<boolean, boolean>