30-seconds-of-code/snippets/prefersDarkColorScheme.md

title, tags, expertise, author, cover, firstSeen, lastUpdated

title	tags	expertise	author	cover	firstSeen	lastUpdated
User prefers dark color scheme	browser	intermediate	chalarangelo	blog_images/blue-lake.jpg	2020-05-04T12:50:35+03:00	2020-10-22T20:24:04+03:00

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