Hace mucho tiempo que existe en navegadores basados en Chromium una flag que lo que hace es algo así como lo que ofrece la extensión Dark Reader. ¿Y qué es eso? Básicamente mostrar todas las páginas web en un modo oscuro aunque no ofrezcan esa opción. Vivaldi 6.6 ha añadido una opción que activa la flag nativa de Chromium para obtener el mismo resultado, pero ¿merece la pena en la actualidad la navegación oscura forzada?

Es difícil responder a algo que a mí personalmente me provoca sentimientos encontrados. No puedo – o no debo – poner capturas del editor de WordPress, pero sería el mejor ejemplo de lo que me hace querer usar la navegación oscura forzada. No tiene ningún elemento «raro» y el resultado es casi perfecto. Los fondos muestran diferentes tonos de gris oscuro, el texto es blanco y los enlaces de un azul un poco más claro que el del tema por defecto. Fijándome, puedo poner una captura parcial, y quedaría así:

En esa misma imagen se ven también algunas de las cosas a mejorar.

El problema de las imágenes en la navegación oscura forzada

Más adelante explicaremos o intentaremos explicar cómo funciona esta opción, pero aquí vamos a hablar de los problemas, de esas cositas que no quedan bien para nada. No he añadido ninguna flecha a la captura, pero ¿veis ese muñequito que hay a la izquierda del botón de «Relacionado»? El original no es así; se ha forzado la inversión de colores y muestra algo como no debería.

En un problema que se unas veces se ve y otras no. Una de las opciones debería respetar las imágenes, y falla estrepitosamente con algunas. Mirando con las herramientas del desarrollador, ese muñequito en concreto es una imagen en formato SVG, pero se muestra a través de un background-image de CSS. Por lo tanto, el navegador no está detectando que es una imagen, sino más bien texto, y los textos, según entiende, tienen que invertir su color.

Por lo tanto, las imágenes se respetarán siempre y cuando estén en un formato que deje claro que son unas imágenes. ¿Tiene solución de cara al futuro? Creo que sí, pero no es muy sencilla. Pasa por analizar los atributos e incluso reglas CSS y ver si en ellos hay algún tipo de imagen. Pero no es tan sencillo como confiar sólo en etiquetas img. Lo que no entiendo tanto es lo que pasa en Mastodon. Las imágenes de los perfiles se ven todas invertidas, y ahí sí están en una etiqueta img. No tengo dudas de que eso mejorará en el futuro, pero actualmente está así.

Otros problemas

Uno de los cambios cosméticos que hace todo esto es que los textos en colores diferentes al negro se muestran en un tono más claro. Eso es lo que hace que los enlaces de la captura anterior se vean bien; en el color azul normal se vería peor. Lo que en un principio parece buena idea, no siempre queda tan bien, y esto es más difícil de solucionar. Una solución sencilla corre por parte del usuario: acostumbrarse, y creo que es posible.

Hay un último problema, y es cómo sabe esta opción si tiene que actuar o no. Los diseñadores de páginas web hacen su trabajo pensando en cómo se verá al final. Son muchas las páginas que no tienen en cuenta las preferencias de colores que elegimos los usuarios. Para hacerlo bien y controlar nuestras preferencias hay que añadir dos paletas de colores, una para cuando elegimos el tema claro y otra para cuando elegimos el tema oscuro. Funciona de la siguiente manera:

1. Se diseña una página web tal y como se cree que quedará mejor.
2. Tras terminar, o en algún otro punto, ya que no hay una regla escrita para esto, se crea la opción para la paleta de colores que no hemos usado en el diseño original. Por ejemplo, si yo he decidido que las letras serán negras sobre fondo blanco en su opción por defecto, debo añadir mediante la media query «@media (prefers-color-scheme: dark)» los cambios necesarios para cuando un usuario elige el tema oscuro.

@media (prefers-color-scheme: dark), la solución… que depende de otros

Esa consulta multimedia puede solucionar muchos problemas. El navegador ve que hay una opción diseñada para temas oscuros, y, por lo que parece, ya no entra en juego la navegación oscura forzada. Sencillamente deja lo que se diseñó.

El problema aquí es que esa línea de código no se usa en muchos casos incluso si el diseño ya tiene fondos oscuros y textos claros. Claro, cuando el navegador entiende que está en un tema claro, que en realidad no es así, y trata de cambiar los colores de un tema oscuro por otro, estropicio al canto.

Cómo usar la navegación oscura forzada en Chromium

En navegadores basados en Chromium, esta opción está en chrome://flags (los navegadoras pueden cambiar «chrome» por «brave», «vivaldi» y demás) buscando «dark». La opción aparece como «Auto Dark Mode for Web Contents», y se puede activar con diferentes opciones. La que parece funcionar mejor es «Enabled with selective image inversion», lo que invertirá todo lo que no sean imágenes. Ofrece los resultados explicados aquí, y aunque esperamos que mejore en el futuro… hoy por hoy no es perfecto.

Y yo aquí estoy con mis sentimientos encontrados. Por una parte, me encanta, pero cuando va bien. Por otra, lo de mas imágenes es un problema. Ahora mismo voy activando y desactivando la opción, pero si llega el momento en el que estos pequeños problemas desaparecen, yo lo tengo claro. Me paso al lado oscuro.