Busqué a través de 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 ayudarlo: 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.

Esto se está discutiendo actualmente (septiembre de 2018) en "Borradores del editor del grupo de trabajo de CSS" . Se ha lanzado Spec (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 se menciona una función de medios CSS inverted-colors . Enchufe: Escribí un blog sobre el modo oscuro aquí .

El nuevo estándar está registrado en W3C en Media Queries Level 5 .

NOTA: actualmente solo 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-preference en caso de que un usuario no tenga preferencia. Pero te recomiendo que uses CSS normal en ese caso y coloques tu CSS en cascada correctamente.

EDITAR (7 de diciembre de 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 > Funciones experimentales > Compatibilidad con CSS en modo oscuro

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

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

EDITAR (5 de septiembre de 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 del Keynote de Apple)
• EdgeHTML 76 (no estoy seguro de cuándo se enviará)

EDITAR (5 de noviembre de 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 considere implementar el modo oscuro porque la mayoría de los usuarios pueden usarlo ahora (para los usuarios nocturnos de su sitio).

Nota: todos los principales navegadores ahora admiten el modo oscuro, excepto: IE, Edge

EDITAR (19 de noviembre de 2020): Actualmente, el 88 % del mundo puede usar CSS en modo oscuro. Fuente: caniuse.com

El marco CSS Tailwind CSS v2.0 admite el modo oscuro. (lanzado el 18 de noviembre de 2020)

EDITAR (2 de diciembre de 2020):

Google Chrome agrega la emulación Dark Theme a Dev Tools. Fuente: desarrollador.chrome.com

Si quieres detectarlo desde JS, puedes usar este código:

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

Para estar atento a los cambios:

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

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

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

Para Safari/Webkit puedes usar

 @media (prefers-dark-interface) { background: #000; }