¿Cómo detectar si el SO está en modo oscuro en los navegadores?
Similar a "¿ Cómo detectar si OS X está en modo oscuro? " solo para navegadores.
¿Alguien ha descubierto si hay alguna forma de detectar si el sistema del usuario está en el nuevo modo oscuro de OS X en Safari/Chrome/Firefox?
Nos gustaría cambiar el diseño de nuestro sitio para que sea compatible con el modo oscuro según el modo operativo actual.
El nuevo estándar está registrado en el W3C en Media Queries 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 algún usuario no tenga preferencia. Pero te recomiendo que uses CSS normal en ese caso y conectes 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 instalada Safari Technology Preview Release 71, puede activarla 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, tendrá 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 de la 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. (publicado 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 (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. (publicado el 18 de noviembre de 2020)
EDITAR (2 de diciembre de 2020):
Google Chrome agrega emulación de tema oscuro a Dev Tools. Fuente: desarrollador.chrome.com
EDITAR (2 de mayo de 2022):
Actualmente, el 90% del mundo puede utilizar CSS en modo oscuro. Fuente: caniuse.com
EDITAR (23 de enero de 2024):
Actualmente, el 96,5% del mundo puede utilizar CSS en modo oscuro. Fuente: caniuse.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";
});
Se lanzó la especificación (ver arriba), disponible como consulta de medios. Algo ya ha aterrizado en Safari, consulte también aquí . Entonces, en teoría, puedes hacer esto en Safari/Webkit:
@media (prefers-dark-interface) { color: white; background: black }
inverted-colorsEn MDN se menciona una función multimedia CSS . Enchufe: escribí en un blog sobre el modo oscuro aquí .
