跳到主要内容

usePreferredColorScheme

分类
导出大小
1.24 kB
上次更改
3 个月前

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

演示

首选颜色方案
无偏好

用法

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

组件用法

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

vue
<template>
  <UsePreferredColorScheme v-slot="{ 
colorScheme
}">
Preferred Color Scheme: {{
colorScheme
}}
</UsePreferredColorScheme> </template>

类型声明

ts
export type 
ColorSchemeType
= "dark" | "light" | "no-preference"
/** * Reactive prefers-color-scheme media query. * * @see https://vueuse.org.cn/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)!: 重构组件并使其保持一致 (#4912)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。