prefersLightColorScheme

Checks if the user color scheme preference is light.

Use Window.matchMedia() with the appropriate media query to check the user color scheme preference.

const prefersLightColorScheme = () =>
  window &&
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: light)').matches;

prefersLightColorScheme(); // true

Last updated 15 September 2026 · Edit this page