fn
usePreferredContrast
v0.0.15testeddemoReactive `prefers-contrast` media query, resolving to the user's preferred contrast level. SSR-safe with an optional SSR fallback value.
Examples
ts
const contrast = usePreferredContrast();ts
// Provide an SSR fallback to avoid hydration flicker
const contrast = usePreferredContrast({ ssrContrast: 'more' });Demo
Loading demo…
Signature
ts
export function usePreferredContrast(
options: UsePreferredContrastOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
options? | UsePreferredContrastOptions | Options (custom `window`, `ssrContrast`) |
Returns
ComputedRef<ContrastType>Readonly ref of the preferred contrast: `'more' | 'less' | 'custom' | 'no-preference'`