Detect user color scheme preference in JavaScript

JavaScript, Browser · Nov 5, 2023

The recently introduced prefers-color-scheme media query allows us to check if the user prefers a light or dark color scheme. This can be a useful tool when implementing a dark mode for your website or web application.

Combining the media query with the Window.matchMedia() method allows us to check if the user has selected a dark color scheme ('dark') in their operating system settings.

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

The same technique can be used for checking if the user prefers a light color scheme. Bear in mind, however, that 'light' is the default value for the prefers-color-scheme media query. This means that it might also mean that the user has not expressed a preference.

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

More like this