theme_color vs background_color (Manifest)
Em um web app manifest, theme_color tinge a interface do sistema operacional ao redor do seu app instalado (a barra de status e a área do título) enquanto background_color pinta a tela de abertura mostrada enquanto o app carrega, antes de o seu CSS ser aplicado. São campos separados para momentos separados. A tag <meta name="theme-color"> faz o trabalho do theme_color para uma aba normal do navegador.
Duas cores, dois momentos
theme_color é mostrado enquanto o seu app está rodando: o SO o usa para tingir a interface ao redor da janela, como a barra de status e a área do título. background_color é mostrado antes. É a cor lisa da tela de abertura que o SO desenha enquanto o app ainda está carregando, antes de qualquer parte do seu CSS ser aplicada.
Definir background_color como aproximadamente o fundo da sua página faz o lançamento parecer contínuo; deixá-lo no padrão dá a você um flash branco antes de o seu app renderizar.
Qual é qual
| Campo | Quando aparece | O que colore |
|---|---|---|
| theme_color | App rodando | Interface do SO, barra de status |
| background_color | Durante o lançamento | A tela de abertura |
Perguntas frequentes sobre cores do manifest
Qual a diferença entre theme_color e background_color?
theme_color tinge a interface do SO ao redor de um app instalado em execução; background_color é a cor da tela de abertura mostrada enquanto o app ainda está sendo lançado. Superfícies diferentes, momentos diferentes.
Por que a tela de abertura do meu PWA está com a cor errada?
Essa cor vem de background_color no manifest. Defina-a para combinar com o fundo do seu app para que não haja um flash brusco antes de o seu CSS carregar.
Ainda preciso da meta tag theme-color?
Sim, para as abas normais do navegador. O theme_color do manifest só se aplica ao app instalado. Mantenha a meta tag e o valor do manifest em sincronia.