En Firefox 67, se pueden usar consultas de medios para detectar la preferencia del usuario sobre un tema claro u oscuro.
En mi versión de Firefox (bajo Ubuntu), parece que mi preferencia es el tema ligero. Es decir, el siguiente CSS da un fondo azul:
@media (prefers-color-scheme: light) { :root {} body { background-color: blue; } }
¿Cómo puedo cambiar mis preferencias de Firefox para que prefers-color-scheme: dark
se evalúe como verdadero?
Encontré un complemento que parece funcionar, pero debo estar haciendo algo mal con mi propio CSS, ya que no funciona en mi página. Forzador de sitios web oscuros
Solo por el bien de la exhaustividad: si todo falla, hay un complemento de Firefox llamado " Dark Website Forcer " ( también en GitHub ).
Cambia el estilo leyendo el CSS del sitio web y volviendo a aplicar las partes para la versión oscura nuevamente, si desea tener una oscura. Como tal, solo puede forzar un sitio web oscuro, no uno claro. El archivo Léame tiene una explicación detallada de por qué .
Divulgación: soy el autor de este complemento. 🙂
Buenas noticias: desde Firefox 87, ahora está habilitado de forma predeterminada, ¡sin necesidad de establecer un indicador de configuración! Puede encontrarlo en la pestaña del inspector:
En algunas versiones anteriores de Firefox, esta característica existía detrás de una bandera. Para probar en una de esas versiones, puede habilitar esto yendo a about:config
y configurando la devtools.inspector.color-scheme-simulation.enabled
en true
. Una vez hecho esto, encontrará los controles en el mismo lugar que en las herramientas de desarrollo modernas, pero como un solo icono de pincel en lugar de los botones de alternar sol/luna de hoy.
Puede actualizar el estilo utilizado por Firefox yendo a about:config
y agregando una nueva propiedad ui.systemUsesDarkTheme
de tipo entero con valor 1
.
No actualiza automáticamente el valor en las páginas activas de la misma manera que lo hace cuando actualiza la configuración del sistema operativo en Windows o Mac, pero si actualiza la página después de la actualización, se recuperará.
Puede confirmar que la configuración del navegador es correcta al ver el ejemplo en mdn
Editar: en Firefox 71, la actualización se aplica a las páginas activas sin actualizar