Hook usePrefersColorScheme

usePrefersColorScheme returns a value of prefers-color-scheme media query. Based on Media Queries Level 5: 11.5. Detecting the desire for light or dark color schemes: the prefers-color-scheme feature.

Get Started

npm i @microsoft/arbutus.use-prefers-color-scheme

import { usePrefersColorScheme } from '@microsoft/arbutus.use-prefers-color-scheme';

Usage

const MyComponent = () => {
  const preferredTheme = usePrefersColorScheme(); // "light" | "dark" | undefined
  return <div>{preferredTheme === 'light' ? 'light' : 'dark'</div>;
};