User prefers light color scheme

Angelos Chalaris · JavaScript, Browser · Oct 22, 2020

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

Recommended snippets

  • Checks if the user color scheme preference is dark.

  • Detect language

    JavaScript, Browser

    Detects the preferred language of the current user.

  • Copy to clipboard

    JavaScript, Browser

    Copies a string to the clipboard. Only works as a result of user action (i.e. inside a click event listener).