User prefers dark color scheme

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

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • User prefers light color scheme

    Checks if the user color scheme preference is light.

    JavaScript, Browser · Oct 22, 2020

  • Detect language

    Detects the preferred language of the current user.

    JavaScript, Browser · Oct 6, 2020

  • Copy to clipboard

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

    JavaScript, Browser · Jan 11, 2022