Como alterar a cor da barra de cabeçalho e da barra de endereço na versão mais recente do Chrome no Lollipop?

578

Ainda não encontrei nada sobre este tópico. Eu realmente gosto da capacidade de alterar a cor da barra de endereço e da cor do cabeçalho na Visão geral? Existe alguma maneira fácil de fazer isso?

Chrome para Android insira a descrição da imagem aqui.

Acho que você precisa do Android 5.0 Lollipop para que isso funcione, e as guias e aplicativos de mesclagem do Chrome definidos como Ativado .

android html google-chrome Arpad Gabor
fonte
A partir de janeiro de 2016, a opção Mesclar guias não é mais necessária para que isso funcione (no Lollipop).
Skuld
1
Também é assim para KitKat agora ..
Revetahw diz Reinstate Monica
@ Skuld Você precisa Mesclar guias para ver a cor na visualização "Aplicativos recentes", mas mesmo se você desativou "Mesclar guias e aplicativos", ainda poderá ver a cor ao visualizar o site no Chrome. Mas espero que eles o conserte algum dia, para que a lista de guias no Chrome (mostrada quando "Mesclar guias e aplicativos" está desativada) também exiba a cor do tema em vez do cinza opaco.
ADTC
1
@ADTC você está falando quando você muda de aba perde a cor? Se sim, então sim, não é o ideal, mas não é realmente um grande negócio, pois recupera a cor quando você clica na guia. A grande coisa é que o site quando visto tem a cor correta :)
Skuld
1
@ Skuld, com "Mesclar guias e aplicativos" desativado , você obtém essa visualização (link) quando alterna as guias. Nesta visualização, todas as guias são apenas cinza. Seria bom se a cor do tema permanecesse nessa exibição. Semelhante à forma como o "app-like guia" tem a cor do tema quando "Mesclar Tabs e Apps" está ligado em e você abrir o alternador de aplicativos. (PS: Pessoalmente, odeio mesclar porque tenho muitas guias e também tenho muitos aplicativos. Quero mantê-los separados ou ficarei louco >.< )
ADTC

Respostas:

791

Encontrei a solução após algumas pesquisas.

Você precisa adicionar uma <meta>tag ao seu <head>conteúdo name="theme-color", com o seu código HEX como valor do conteúdo. Por exemplo:

<meta name="theme-color" content="#999999" />
Arpad Gabor
fonte
19
Obrigado. Confira também html5rocks para obter mais informações: updates.html5rocks.com/2014/11/…
redochka 13/03/2015
4
Existem configurações no Chrome para desativar isso? Não suporto a barra de endereço colorida. Eu só quero a cor padrão.
James James
@ James - isso pode não ser uma correção que você goste, mas você pode interromper a mudança de cor desativando a configuração 'Mesclar guias com aplicativos'.
Novocaine
4
Mesmo? Estou usando o Marshmallow, com a configuração 'Mesclar guias com aplicativos' desativada, mas a barra de endereço ainda está colorida. Talvez eles tenham 'consertado o bug'.
precisa saber é o seguinte
3
Não precisa necessariamente ser uma cor hexadecimal, qualquer cor CSS válida funcionará.
Bogdan M.
501

Você realmente precisa de três metatags para oferecer suporte ao Android, iPhone e Windows Phone

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
Edoardo L'Astorina
fonte
E a barra de carregamento? Como já vi sites que tornam a barra superior escura e a barra de carregamento branca, mas não consigo encontrar o snippet analisando o código?
Novato
19
Nota : de acordo com as notas de desenvolvedor da Apple : "Esta metatag não tem efeito, a menos que você primeiro especifique o modo de tela cheia como descrito em apple-apple-mobile-web-app-capable".
Yan Foto
@YanFoto que é realmente uma informação muito útil. Como alguém faria isso?
viriato 24/02
44
O apple-mobile-web-app-status-bar-styleatributo iOS suporta apenas black, black-translucent or padrão` - você não pode usar uma cor personalizada.
sixones
2
se você usar black-translucentele vai fazer a barra superior transparente com texto branco que é provavelmente o que você seria depois
99 problemas - Sintaxe não é um
93

Por exemplo, para definir o plano de fundo com sua cor favorita / marca

Adicionar propriedade Meta Abaixo ao seu código HTML na Seção HEAD

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

Exemplo

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

Na imagem abaixo, acabei de mencionar como o Chrome levou sua propriedade da cor do tema

insira a descrição da imagem aqui

O Firefox OS, Safari, Internet Explorer e Opera Coast permitem definir cores para elementos do navegador e até a plataforma usando metatags.

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Estilo específico do Safari

Das diretrizes Documentos aqui

Ocultando componentes da interface do usuário do Safari

Defina a metatag compatível com apple-mobile-web-app como yes para ativar o modo autônomo. Por exemplo, o HTML a seguir exibe o conteúdo da Web usando o modo autônomo.

<meta name="apple-mobile-web-app-capable" content="yes">

Alterando a aparência da barra de status

Você pode alterar a aparência da barra de status padrão para preto ou preto translúcido. Com preto translúcido, a barra de status flutua sobre o conteúdo da tela inteira, em vez de pressioná-lo. Isso confere ao layout mais altura, mas obstrui a parte superior. Aqui está o código necessário:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Para saber mais sobre a aparência da barra de status, consulte Apple-mobile-web-app-status-bar-style.

Por exemplo:

Captura de tela usando preto-translúcido

Captura de tela usando preto-translúcido

Captura de tela usando preto

Captura de tela usando preto

Ravi Delixan
fonte
42

A partir da documentação oficial ,

Por exemplo, para definir a cor de fundo como laranja:

<meta name="theme-color" content="#db5945">

Além disso, o Chrome exibirá belos ícones de alta resolução quando fornecidos. O Chrome para Android escolhe o ícone de maior resolução que você fornece e recomendamos que você forneça um arquivo PNG de 192 × 192px. Por exemplo:

<link rel="icon" sizes="192x192" href="nice-highres.png">
Deval Khandelwal
fonte
22
é o mesmo que a resposta original, além de adicionar informações não relacionadas
igorsantos07
9
@ igorsantos07 Eu só queria adicionar um link para a documentação oficial. É isso aí
Deval Khandelwal
4
Eu pensei que um link para a documentação é exatamente o que estava faltando na resposta selecionada. Era para isso que eu estava pesquisando quando acabei aqui. Obrigado.
Justin Force
Isso é redundante
taimur alam 27/03/19