Sabias que puedes cambiar dinámicamente el Favicon de tu sitio web en WordPress, de manera que si un usuario tiene configurado el modo oscuro o claro pueda ver una versión específica de ese ícono.
Resultado Final
Al final obtendremos diferentes Favicons de acuerdo a la configuración del sistema.
Código para cambiar dinámicamente el Favicon
Primero tienes que tener dos Favicon, tanto para el modo claro como para el modo oscuro, puedes copiar estos iconos en la raíz de tu sitio web WordPress. En nuestro ejemplo los iconos son: favicon-black.png y favicon-white.png.
Luego puedes copiar el siguiente código como parte de tu archivo functions.php de tu tema hijo o usando algún plugin de Snippets.
add_action('wp_head', function(){
echo '<link rel="icon" href="favicon-black.png" type="image/png" media="(prefers-color-scheme: light)">';
echo '<link rel="icon" href="favicon-white.png" type="image/png" media="(prefers-color-scheme: dark)">';
});
En el código anterior:
- Utilizamos el Hook wp_head que nos permitirá insertar código HTML en la etiqueta HTML head
- Insertamos el HTML tanto para el Favicon de fondo claro como para el de fondo oscuro
- El código esta especificando que la imagen es de type=»image/png», si tu imagen no es .png tienes que cambiar esto
- Lo que condiciona la carga de un u otro icono es la propiedad media, a través de prefers-color-scheme
Conclusión
Como has podido comprobar puedes mejorar el aspecto del Favicon dependiendo de las preferencias del usuario en su sistema y de esta forma tener un icono personalizado para tu sitio.
La entrada Favicon para modo oscuro y modo claro en WordPress es un artículo reciente del sitio DecodeCMS.
0 Commentaires