useColorMode

分类

浏览器

导出大小

3.14 kB

上次更改

4 个月前

演示

源代码演示 (beta)

← 点击切换颜色模式

基本用法

import { useColorMode
 } from '@vueuse/core'

const mode
 = useColorMode
() // Ref<'dark' | 'light'>

默认情况下，它将使用 usePreferredDark (即 auto 模式) 与用户的浏览器偏好设置匹配。当读取 ref 时，它将默认返回当前颜色模式（dark、light 或您的自定义模式）。通过启用 emitAuto 选项，auto 模式可以包含在返回的模式中。当写入 ref 时，它将触发 DOM 更新并将颜色模式持久化到本地存储（或您的自定义存储）。您可以传递 auto 以设置回自动模式。

mode
.value
 // 'dark' | 'light'

mode
.value
 = 'dark' // change to dark mode and persist

mode
.value
 = 'auto' // change to auto mode

配置

import { useColorMode
 } from '@vueuse/core'

const mode
 = useColorMode
({
  attribute
: 'theme',
  modes
: {
    // custom colors
    dim
: 'dim',
    cafe
: 'cafe',
  },
}) // Ref<'dark' | 'light' | 'dim' | 'cafe'>

高级用法

您还可以显式访问系统偏好设置和存储的用户覆盖模式。

import { useColorMode
 } from '@vueuse/core'

const { system
, store
 } = useColorMode
()

system
.value
 // 'dark' | 'light'
store
.value
 // 'dark' | 'light' | 'auto'

const myColorMode
 = computed
(() => store
.value
 === 'auto' ? system
.value
 : store
.value
)

组件用法

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

vue

<template>
  <UseColorMode v-slot="color
">
    <button
 @click
="color
.mode = color
.mode === 'dark' ? 'light' : 'dark'">
      Mode {{ color
.mode }}
    </button
>
  </UseColorMode>
</template>

类型声明

显示类型声明

export type BasicColorMode
 = "light" | "dark"
export type BasicColorSchema
 = BasicColorMode
 | "auto"
export interface UseColorModeOptions
<T
 extends string = BasicColorMode
>
  extends UseStorageOptions<T
 | BasicColorMode
> {
  /**
   * CSS Selector for the target element applying to
   *
   * @default 'html'
   */
  selector
?: string | MaybeElementRef

  /**
   * HTML attribute applying the target element
   *
   * @default 'class'
   */
  attribute
?: string
  /**
   * The initial color mode
   *
   * @default 'auto'
   */
  initialValue
?: MaybeRefOrGetter
<T
 | BasicColorSchema
>
  /**
   * Prefix when adding value to the attribute
   */
  modes
?: Partial
<Record
<T
 | BasicColorSchema
, string>>
  /**
   * A custom handler for handle the updates.
   * When specified, the default behavior will be overridden.
   *
   * @default undefined
   */
  onChanged
?: (
    mode
: T
 | BasicColorMode
,
    defaultHandler
: (mode
: T
 | BasicColorMode
) => void,
  ) => void
  /**
   * Custom storage ref
   *
   * When provided, `useStorage` will be skipped
   */
  storageRef
?: Ref
<T
 | BasicColorSchema
>
  /**
   * Key to persist the data into localStorage/sessionStorage.
   *
   * Pass `null` to disable persistence
   *
   * @default 'vueuse-color-scheme'
   */
  storageKey
?: string | null
  /**
   * Storage object, can be localStorage or sessionStorage
   *
   * @default localStorage
   */
  storage
?: StorageLike

  /**
   * Emit `auto` mode from state
   *
   * When set to `true`, preferred mode won't be translated into `light` or `dark`.
   * This is useful when the fact that `auto` mode was selected needs to be known.
   *
   * @default undefined
   * @deprecated use `store.value` when `auto` mode needs to be known
   * @see https://vueuse.org.cn/core/useColorMode/#advanced-usage
   */
  emitAuto
?: boolean
  /**
   * Disable transition on switch
   *
   * @see https://paco.me/writing/disable-theme-transitions
   * @default true
   */
  disableTransition
?: boolean
}
export type UseColorModeReturn
<T
 extends string = BasicColorMode
> = Ref
<
  T
 | BasicColorSchema

> & {
  store
: Ref
<T
 | BasicColorSchema
>
  system
: ComputedRef
<BasicColorMode
>
  state
: ComputedRef
<T
 | BasicColorMode
>
}
/**
 * Reactive color mode with auto data persistence.
 *
 * @see https://vueuse.org.cn/useColorMode
 * @param options
 */
export declare function useColorMode
<T
 extends string = BasicColorMode
>(
  options
?: UseColorModeOptions
<T
>,
): UseColorModeReturn
<T
>