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

138

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.

funkju
fuente
1
Hasta donde sé, no hay una consulta de medios CSS para que Safari detecte el modo claro u oscuro, pero Safari definitivamente admite widgets oscuros en páginas HTML. Puede ser útil archivar un radar para ello.
mschmidt
No me hiurt, pero después de Stackoverflow introdujo el modo oscuro que en Google cómo implementar el modo "sistema" y topé con esta pregunta. Espero mucho tráfico en esto :-)
usr-local-ΕΨΗΕΛΩΝ

Respuestas:

177

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.

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

Davy de Vries
fuente
2
Solo lo probé. Si cambia el tema en la configuración de su Mac OS, debe reiniciar el navegador. Lástima que no esté sincronizado sobre la marcha.
Herman Starikov
3
@HermanStarikov Publiqué una actualización sobre este problema que está describiendo. Con el nuevo Safari Technology Preview Release 71 puedes alternar en tiempo real.
Davy de Vries
¡Agradable! Hice una pequeña demostración de cómo se vería el tema con bootstrap: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov
2
¿Hay alguna manera de detectar esto en JavaScript?
Akash Kava
77
@AkashKava Busqué en Google, sí, es posible si usa algo como esto: window.matchMedia("(prefers-color-scheme: dark)").matchessi tengo algo de tiempo libre, agregaré una solución javascript completa a mi respuesta.
Davy de Vries
68

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";
});
Mark Szabo
fuente
¡Hola! Esto funciona muy bien. Sin embargo, tengo curiosidad: ¿cómo funciona exactamente esta sintaxis?
Stormblessed
1
@Stormblessed primero comprobará si el navegador es compatible matchMediay luego intentará hacer coincidir la prefers-color-scheme: darkcadena. Si coincide, estamos en modo oscuro.
Mark Szabo
Con el nuevo operador de Elvis esto se puede escribir comoif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
Mark Szabo
¡Oh eso tiene sentido! La sintaxis con .matches parecía que estaba haciendo la comparación entre lo primero y lo segundo o algo así. ¡Gracias!
Stormblessed
Debería ser la respuesta marcada.
podperson
22

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í .

Frank Lämmer
fuente
2

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;
  }
}
Aslam
fuente