VueUseusePreferredContrast
Reactive prefers-contrast media query.
Demo
Usage
js
import { usePreferredContrast } from '@vueuse/core'
const preferredContrast = usePreferredContrast()
import { usePreferredContrast } from '@vueuse/core'
const preferredContrast = usePreferredContrast()
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UsePreferredContrast v-slot="{ contrast }">
Preferred Color Scheme: {{ contrast }}
<UsePreferredContrast>
<UsePreferredContrast v-slot="{ contrast }">
Preferred Color Scheme: {{ contrast }}
<UsePreferredContrast>
Type Declarations
typescript
export type ContrastType = "more" | "less" | "custom" | "no-preference"
/**
* Reactive prefers-contrast media query.
*
* @see https://vueuse.org/usePreferredContrast
* @param [options]
*/
export declare function usePreferredContrast(
options?: ConfigurableWindow
): ComputedRef<ContrastType>
export type ContrastType = "more" | "less" | "custom" | "no-preference"
/**
* Reactive prefers-contrast media query.
*
* @see https://vueuse.org/usePreferredContrast
* @param [options]
*/
export declare function usePreferredContrast(
options?: ConfigurableWindow
): ComputedRef<ContrastType>
Source
Contributors
vaakian X
Zhao