Skip to content

usePreferredColorScheme

Category
Export Size
1.24 kB
Last Changed
2 weeks ago

Reactive prefers-color-scheme media query.

Demo

Preferred Color Scheme:
light

Usage

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

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

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

Type Declarations

ts
export type 
ColorSchemeType
= "dark" | "light" | "no-preference"
/** * Reactive prefers-color-scheme media query. * * @see https://vueuse.org/usePreferredColorScheme * @param [options] * * @__NO_SIDE_EFFECTS__ */ export declare function
usePreferredColorScheme
(
options
?:
ConfigurableWindow
,
):
ComputedRef
<
ColorSchemeType
>

Source

SourceDemoDocs

Contributors

Anthony Fu
SerKo
Anthony Fu
丶远方
vaakian X
wheat
Alex Kozack
Le Minh Tri
Antério Vieira

Changelog

v13.6.0 on
d32f8 - refactor: add @__NO_SIDE_EFFECTS__ annotations to all pure functions (#4907)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access