Property "prefers-color-scheme"

Using prefers-color-scheme, a media query, it’s possible to detect the color scheme being used in a block, usually across the entire page.

In CSS with prefers-color-scheme

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

In JS with matchMedia

window.matchMedia('(prefers-color-scheme: dark)').matches // true/false

Force a manual change

In CSS with color-scheme

.light {
  /* forces light color-scheme */
  color-scheme: light;
}

.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

In JS with color-scheme

document.body.style.colorScheme = 'dark';

In JS for Tailwind CSS

// tailwind.config.js

{
  //...
  darkMode: ['selector'],
  //...
}

document.documentElement.classList.toggle('dark');