Muy buenas makiwis, aprovechando la tarde del sábado os comparto este tip que aprendí desarrollando una aplicación web que necesitaba un favicon que pudiera adaptarse en modo oscuro y claro automáticamente.
¿Cómo es eso posible? Dos cosas: el soporte de CSS en SVG y la existencia de prefers-color-scheme
.
prefers-color-scheme
nos permite determinar el modo favorito del usuario según sus ajustes del sistema o navegador, que por especificación son dark
y light
. Y los favicons, aunque tradicionalmente han sido los .ICO, también se ha dado soporte a otros tipos como PNG o SVG.
El soporte de SVG está presente por el momento en Firefox, Chrome y sus derivados. Safari no soporta SVG pero no es problema porque podemos meter un favicon de fallback.
¿Y cómo juntamos eso? Muy sencillo, lo metemos dentro con la etiqueta style de los SVG. Código abreviado para la brevedad:
<svg ...atributosDelSvg>
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
@media (prefers-color-scheme: light) {
path { fill: black }
}
</style>
.. resto del código del svg
</svg>
Si lo pruebas en tu navegador, podrás observar que se adapta automáticamente, ¡magia! Si quieres una demo rápida, aquí tienes una.