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";