Skip to main content

usePreferredContrast

prefers-contrast media query

Usage​

Live Editor

function Demo() {
  const contrast = usePreferredContrast();

  return <div>PreferredContrast: {contrast}</div>;
};
Result
Loading...

API​

usePreferredContrast​

Returns​

Contrast

Arguments​

ArgumentDescriptionTypeDefaultValue
defaultStatedefault valueContrast | undefinedno-preference

Contrast​

Type​

export type Contrast = 'more' | 'less' | 'custom' | 'no-preference'