Skip to content

usePreferredColorScheme

类别
导出体积
1.24 kB
上次更改
2 months ago

响应式的 prefers-color-scheme 媒体查询。

示例

首选配色方案:
no-preference

用法

ts
import { 
usePreferredColorScheme
} from '@vueuse/core'
const
preferredColor
=
usePreferredColorScheme
()

组件使用

vue
<template>
  <UsePreferredColorScheme v-slot="{ 
colorScheme
}">
首选色彩方案: {{
colorScheme
}}
</UsePreferredColorScheme> </template>

类型声明

ts
export type 
ColorSchemeType
= "dark" | "light" | "no-preference"
/** * 响应式首选颜色方案媒体查询。 * * @see https://vueuse.org/usePreferredColorScheme * @param [options] * * @__NO_SIDE_EFFECTS__ */ export declare function
usePreferredColorScheme
(
options
?:
ConfigurableWindow
,
):
ComputedRef
<
ColorSchemeType
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
SerKo
IlyaL
Anthony Fu
丶远方
vaakian X
wheat
Alex Kozack
Le Minh Tri
Antério Vieira

更新日志

8c521 - feat(components)!: refactor components and make them consistent (#4912)
d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)