meta tema-color no con el modo oscuro en Android Chrome

Estoy tratando de dar color personalizado a la barra de búsqueda de cromo usando .

Su funcionamiento bien si el sistema predeterminado se establece a la luz Tema pero no está funcionando si el sistema predeterminado se establece en modo oscuro.

Me gustaría saber cómo puedo resolver este problema.

Gracias por cualquier ayuda de antemano.

PS: Puedes visitar https://www.trippyadive.web.app para verlo vivir.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por algorithmwizard

4 Respuestas:

  • Actualmente, no es posible. El estado de este problema de características está abierto, puede ver los detalles aquí: https://bugs.chromium.org/p/chromium/issues/detail?id=980790

    Respondida el Dec 17, 2020 a las 16:32 - por webweaverx

    Votos positivos: 0 | Votos negativos: 0

  • Antes de que podamos usar media="(prefers-color-scheme: dark)" on etiquetas, puedes usar matchMedia.

    document
 ​.querySelector("meta[name=theme-color]")
 ​.setAttribute("content", window.matchMedia("(prefers-color-scheme: dark)").matches ? "darkblue" : "lightblue");

    También puede querer cambiar el color del tema junto con cambios de configuración del sistema operativo.

    const updateTheme = () =>  {
 ​document
   ​.querySelector("meta[name=theme-color]")
   ​.setAttribute("content", window.matchMedia("(prefers-color-scheme: dark)").matches ? "darkblue" : "lightblue");
}
updateTheme();
if (mediaQueryDark.addEventListener) {
 ​mediaQueryDark.addEventListener("change", updateTheme);
}

    Safari 14 no admite addEventListener en MediaQueryList

    Respondida el Dec 17, 2020 a las 16:40 - por nodenomad

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con la etiqueta puede estar relacionado con la configuración de tema oscuro en el navegador. Cuando la configuración del modo oscuro está activada en el navegador, algunos estilos y colores pueden verse afectados, incluso la propiedad "theme-color" que intentas aplicar.

    Para resolver este problema y asegurarte de que el color personalizado se aplique correctamente independientemente de si el modo oscuro está activado o desactivado, puedes considerar las siguientes opciones:

    • Utiliza variables CSS: En lugar de depender únicamente de la etiqueta , puedes definir tu color personalizado como una variable CSS en tu hoja de estilos y luego aplicar esa variable a los elementos que quieras personalizar. Por ejemplo:
    css
   :root {
        
    • -color-tema: 0000f2;   }
    


    / Luego puedes usar la variable en tus estilos /
   input[type="search"] {
     background-color: var(--color-tema);
   }

    • Utiliza media queries y CSS personalizado para el modo oscuro: Puedes crear estilos CSS personalizados para el modo oscuro y asegurarte de que el color personalizado se aplique correctamente en ambas configuraciones. Por ejemplo:
    css
   @media (prefers-color-scheme: dark) {
     input[type="search"] {
       background-color: 0000f2;     }
   }

    Al implementar alguna de estas soluciones, puedes asegurarte de que el color personalizado se aplique correctamente tanto en el modo claro como en el modo oscuro del navegador. ¡Espero que esta información te sea útil y resuelva tu problema! No dudes en intentarlo y hacernos saber si necesitas más ayuda.

    Respondida el Dec 18, 2020 a las 16:30 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe al hecho de que Chrome para Android no admite el meta de tema-color cuando el modo oscuro está habilitado. Este es un problema conocido que afecta a todas las aplicaciones web que intentan establecer un color personalizado para la barra de búsqueda de Chrome cuando el modo oscuro está habilitado.

    Desafortunadamente, no hay una solución directa para este problema en este momento. Sin embargo, hay una solución que puedes implementar para mitigar el problema:

    • Usa un color de tema claro y oscuro: Detecta si el modo oscuro está habilitado y establece un meta de tema-color claro o oscuro en consecuencia. Esto garantizará que la barra de búsqueda tenga un color personalizado tanto en modo claro como oscuro.

    Aquí tienes un ejemplo de cómo podrías implementar esta solución:

    html

    Ten en cuenta que esta solución no es ideal, ya que implica cambiar dinámicamente el meta del tema-color. Sin embargo, es la única solución disponible hasta que Chrome para Android solucione el problema subyacente.

    Respondida el Dec 18, 2020 a las 16:34 - por Gemini

    Votos positivos: 0 | Votos negativos: 0