0
536
Views¿Cómo hacer que el ícono de una página responda a la preferencia de combinación de colores del usuario?
Las páginas ofrecen íconos para el navegador a través de favicon.ico o a través de varias etiquetas <link> como
<link rel='icon' type='image/png' href='icon.png'>El problema es que si el ícono es del mismo color que las pestañas del navegador, entonces no puedes verlo.
Hay algunas soluciones semi-obvias
(1) como usuario, elija un tema cuyas pestañas no sean de color blanco puro o negro puro (y rece para que los sitios no elijan el mismo color)
(2) como desarrollador, elija un color de icono que no sea blanco puro o negro puro (y rece para que no coincida con el tema del usuario) o agregue un marco al icono.
Pero, solo por curiosidad, como desarrollador, ¿hay alguna manera de decirle al navegador que use un ícono si la pestaña está oscura y un ícono diferente si la pestaña está clara? SVG CSS por ejemplo? ¿Diferentes etiquetas <link> ?
PD: Sí, entiendo que el tema anterior es llamativo. Es "verde para google" frente a otros perfiles que uso para separar cuentas. De esa manera, es fácil para mí saber qué cuenta está usando cada ventana del navegador. Tengo más de 7 perfiles, cada uno con un tema diferente y muy distinto 😉
2 answers
Answer question0
Estás hablando de dos cosas posibles:
- tema del navegador
- esquema de color del sistema operativo
Su captura de pantalla muestra la primera. Chrome no expone el tema elegido por el usuario a sus API de Javascript. Tampoco ningún otro navegador que yo sepa. Probablemente sea algo bueno: sería extremadamente único, por lo tanto, una forma de tomar las huellas dactilares de los usuarios .
¡Pero el segundo esquema de color del sistema operativo está expuesto a los navegadores! Por lo general , esto es solo uno de dark o light . No todos los sistemas operativos admiten esquemas de color, pero los que sí lo hacen suelen utilizar términos como "Modo oscuro" cuando hablan de ello. Apple tiene alguna documentación sobre cómo usar el modo oscuro en macOS, por ejemplo.
Si un sistema operativo admite esquemas de color, se exponen al navegador a través de consultas de medios CSS : @media ( prefers-color-scheme: dark ) . Es una característica con más del 91 % de compatibilidad con navegadores globales .
Lo bueno de estar en CSS es que, por lo tanto, puede servir un SVG para su favico que tenga esa consulta de medios , y sus usuarios obtendrán automáticamente el correcto.
Thomas Steiner popularizó esta técnica en este post de 2019 . Un ejemplo de eso:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <style> path { fill: black; } @media (prefers-color-scheme: dark) { path { fill: white; } } </style> <path d="....." /> </svg> Sin embargo, volvamos a su publicación: un usuario podría tener un esquema de color dark y un (digamos) tema de navegador verde llamativo, por lo que el favico posiblemente se vería mal de cualquier manera. Sin evitarlo.
¿La solución más fácil, entonces?
Ponle un color de fondo a tu favico . ¡Una solución tan antigua como el tiempo!
0
Esto parece ser no estándar? ya que aún no he encontrado documentos, pero encontré un sitio que hace esto
<link rel="shortcut icon" href="favicon_white.ico" media="(prefers-color-scheme: dark)"/> <link rel="shortcut icon" href="favicon.ico" media="(prefers-color-scheme: light)" />Y verificarlo es elegir el correcto en Chrome, al menos relacionado con el esquema de color preferido del usuario.
Ciertamente, el atributo de media se aplica a rel="stylesheet" , entonces, ¿tal vez se aplica a cualquier <link> ?