Skip to main content

usePreferredColorScheme

prefers-color-scheme media query

Usage​

Live Editor

function Demo() {
  const color = usePreferredColorScheme();

  return <div>PreferredColorScheme: {color}</div>;
};
Result
Loading...

API​

usePreferredColorScheme​

Returns​

ColorScheme: value of prefers-color-scheme media query

Arguments​

ArgumentDescriptionTypeDefaultValue
defaultStatedefault valueColorScheme | undefinedno-preference

ColorScheme​

Type​

export type ColorScheme = 'dark' | 'light' | 'no-preference'