User prefers dark color scheme

Angelos Chalaris · JavaScript, Browser · Oct 22, 2020

Checks if the user color scheme preference is dark.

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

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

prefersDarkColorScheme(); // true

Recommended snippets

• User prefers light color scheme

  JavaScript, Browser

  Checks if the user color scheme preference is light.

• 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).