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

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

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

— 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