useDark

响应式暗色模式，并自动 持久化数据。

import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

行为

useDark 结合了 usePreferredDark 和 useStorage。在启动时，它会从 localStorage/sessionStorage（键可配置）中读取值，以查看是否有用户配置的配色方案；如果没有，它将使用用户的系统偏好设置。当你更改 isDark ref 时，它会更新相应元素的属性，然后将偏好设置存储到存储（默认键：vueuse-color-scheme）中以实现持久化。

请注意，useDark 仅为你处理 DOM 属性的更改，以便你在 CSS 中应用正确的选择器。它不处理实际的样式、主题或 CSS。

配置

默认情况下，它使用 Tailwind CSS 偏好的暗色模式，即当 dark 类应用于 html 标签时启用暗色模式，例如：

<!--light-->
<html>
  ...
</html>

<!--dark-->
<html class="dark">
  ...
</html>

当然，你也可以对其进行自定义，使其与大多数 CSS 框架兼容。

例如：

const isDark = useDark({
  selector: 'body',
  attribute: 'color-scheme',
  valueDark: 'dark',
  valueLight: 'light',
})

运行结果如下：

<!--light-->
<html>
  <body color-scheme="light">
    ...
  </body>
</html>

<!--dark-->
<html>
  <body color-scheme="dark">
    ...
  </body>
</html>

如果以上配置仍无法满足你的需求，你可以使用 onChanged 选项来完全控制如何处理更新。

const isDark = useDark({
  onChanged(dark: boolean) {
    // update the dom, call the API or something
  },
})

组件方式使用

此函数也通过 @vueuse/components 包提供一个无渲染组件版本。了解更多用法。

<template>
  <UseDark v-slot="{ isDark, toggleDark }">
    <button @click="toggleDark()">
      Is Dark: {{ isDark }}
    </button>
  </UseDark>
</template>

类型声明

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>

useCssVar

useEventListener

useDark

Demo

使用

行为

配置

组件方式使用

类型声明