fn
usePreferredContrast
v0.0.14testeddemoReactive 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'