Propiedad "prefers-color-scheme"

Por medio de prefers-color-scheme, una media query, es posible detectar el esquema de colores que se está utilizando en un bloque, generalmente en toda la página.

En CSS con prefers-color-scheme

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

En JS con matchMedia

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

Forzar un tema manualmente

En CSS con color-scheme

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

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

En JS con color-scheme

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

En JS para Tailwind CSS

// tailwind.config.js

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

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