¿Cómo detectar si el sistema operativo está en modo oscuro en los navegadores?

Similar a " ¿Cómo detectar si OS X está en modo oscuro? " Solo para navegadores.

¿Alguien ha encontrado si hay una manera de detectar si el sistema del usuario está en el nuevo Modo Oscuro OS X en Safari / Chrome / Firefox?

Nos gustaría cambiar el diseño de nuestro sitio para que sea amigable en modo oscuro basado en el modo operativo actual.

El nuevo estándar está registrado en W3C en Media Consultas Nivel 5 .

NOTA: actualmente solo está disponible en Safari Technology Preview Release 68

En caso de que la preferencia del usuario sea light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

En caso de que la preferencia del usuario sea dark:

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

También existe la opción no-preferenceen caso de que un usuario no tenga preferencia. Pero le recomiendo que solo use CSS normal en ese caso y conecte en cascada su CSS correctamente.

EDITAR (7 dic 2018):

En Safari Technology Preview Release 71 , anunciaron un interruptor de palanca en Safari para facilitar las pruebas. También hice una página de prueba para ver el comportamiento del navegador.

Si tiene instalado Safari Technology Preview Release 71 , puede activarlo a través de:

Desarrollar> Características experimentales> Soporte de CSS en modo oscuro

Luego, si abre la página de prueba y abre el inspector de elementos, tiene un nuevo icono para alternar el modo Oscuro / Claro.

-

EDITAR (11 feb 2019): Apple se envía en el nuevo modo oscuro Safari 12.1

-

EDITAR (5 sep 2019): actualmente el 25% del mundo puede usar CSS en modo oscuro. Fuente: caniuse.com

Próximos navegadores:

• iOS 13 (supongo que se enviará la próxima semana después de Keynote de Apple)
• EdgeHTML 76 (no estoy seguro de cuándo será enviado)

-

EDITAR (5 nov 2019): actualmente el 74% del mundo puede usar CSS en modo oscuro. Fuente: caniuse.com

-

EDITAR (3 de febrero de 2020): Microsoft Edge 79 admite el modo oscuro. (lanzado el 15 de enero de 2020)

-

Mi sugerencia sería: que debería considerar implementar el modo oscuro porque la mayoría de los usuarios pueden usarlo ahora (especialmente para dispositivos móviles, también conocido como ahorro de batería).

Nota: Todos los principales navegadores son compatibles con el modo oscuro ahora, excepto: IE, Edge

Si desea detectarlo desde JS, puede usar este código:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Para ver los cambios:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Esto se está discutiendo actualmente (septiembre de 2018) en "Borradores del editor del grupo de trabajo CSS" . La especificación se ha lanzado (ver arriba), disponible como una consulta de medios. Algo ya ha aterrizado en Safari, ver también aquí . Entonces, en teoría, puedes hacer esto en Safari / Webkit:

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

Pero parece que esto es privado . En MDN inverted-colorsse menciona una función de medios CSS . Plug: escribí en un blog sobre el modo oscuro aquí .

Busqué en la API de Mozilla, no parecen tener ninguna variable correspondiente al color de las ventanas del navegador. Aunque encontré una página que podría ayudarte: Cómo usar los estilos del sistema operativo en CSS . A pesar del encabezado del artículo, los colores son diferentes para Chrome y Firefox.

Según Mozilla, este es el método preferido a partir de septiembre de 2019

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}