如何在Lollipop的最新Chrome版本中更改标题栏和地址栏的颜色？

578

尚未找到关于该主题的任何内容。我真的很喜欢在概述中更改地址栏颜色和标题颜色的功能吗？有没有简单的方法可以做到这一点？

适用于Android的Chrome 在此处输入图片说明。

我想你需要的是Android 5.0棒棒糖对于这项工作，而Chrome的合并标签页和应用设置为上。

android html google-chrome

— Arpad Gabor
source

从2016年1月开始，不再需要使用“合并选项卡”选项（在Lollipop中）。

— Skuld

1

这也是喜欢本作奇巧现在..

— Revetahw恢复莫妮卡说，

@Skuld您需要“合并选项卡”才能在“最近的应用程序”视图中查看颜色，但是即使您禁用了“合并选项卡和应用程序”，在Chrome中查看网站时仍然可以看到颜色。但我希望他们有一天能解决它，以便Chrome内的标签列表（禁用“合并标签和应用程序”时显示）也可以显示主题颜色，而不是暗灰色。

— ADTC

1

@ADTC您是在谈论何时切换选项卡时它失去颜色吗？如果是这样，是的，这不是很理想，但并不是什么大问题，因为当您单击选项卡时，它会重新获得颜色。最重要的是，该网站在查看时具有正确的颜色:)

— Skuld

1

@Skuld，关闭 “合并选项卡和应用程序” 后，在切换选项卡时将获得此视图（链接）。在此视图中，所有选项卡均为灰色。如果主题颜色保留在该视图中，那将是很好的。类似如何“应用程序类似的选项卡”有当“合并标签页和应用”被关在主题颜色上和打开应用程序切换器。（PS：我个人讨厌合并，因为我有很多选项卡，然后我也有很多应用程序。我想让它们分开，否则我会发疯 >.< ）

— ADTC

790

经过一番搜索后找到了解决方案。

您需要添加一个<meta>标签在你的<head>包含name="theme-color"，你的十六进制代码为内容的价值。例如：

<meta name="theme-color" content="#999999" />

— Arpad Gabor
source

19

谢谢。也可以通过html5rocks查看更多信息：updates.html5rocks.com/2014/11/…–

— redochka

4

Chrome中是否有任何设置可以禁用此设置？我受不了彩色的地址栏。我只想要默认颜色。

— 詹姆斯

@James-这可能不是您想要的解决方法，但是您可以通过关闭“与应用程序合并选项卡”设置来停止颜色更改。

— Novocaine 2015年

4

真？我使用的是棉花糖，“应用程序合并选项卡”设置已关闭，但地址栏仍然是彩色的。也许他们“修复了错误”。

— user711413 '16

3

不一定需要是十六进制颜色，任何有效的CSS颜色都可以使用。

— Bogdan M.

498

您实际上需要3个meta标签来支持Android，iPhone和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）
source

那加载栏呢？如我所见，使顶部栏变暗而加载栏变白的网站，但是我找不到分析代码片段的代码？

— 新手

19

注意：根据Apple的开发说明：“除非您首先按照中所述指定全屏模式，否则此meta标签无效apple-apple-mobile-web-app-capable。”

— Yan Foto

@YanFoto实际上是非常有用的信息。一个人怎么做？

— viriato

44

iOS的apple-mobile-web-app-status-bar-style属性只支持black，black-translucent or default` -你不能使用自定义颜色。

— sixones

2

如果使用black-translucent它，将使顶部的条带透明并带有白色文本，这可能是您想要的内容

— 99问题-语法不是

93

例如，将背景设置为您喜欢的颜色/品牌颜色

将以下元属性添加到HEAD节中的HTML代码中

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

例

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

在下方图片中，我刚刚提到了Chrome如何获取主题色属性

Firefox OS，Safari，Internet Explorer和Opera Coast允许您使用元标记为浏览器甚至平台定义元素的颜色。

<!-- 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">

Safari特定样式

从指导文件在这里

隐藏Safari用户界面组件

将apple-mobile-web-app-capable元标记设置为yes，以打开独立模式。例如，以下HTML使用独立模式显示Web内容。

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

更改状态栏外观

您可以将默认状态栏的外观更改为黑色或半透明。对于黑色半透明，状态栏浮动在全屏内容的顶部，而不是向下推。这样可以增加布局的高度，但会阻碍顶部。这是所需的代码：

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

有关状态栏外观的更多信息，请参阅apple-mobile-web-app-status-bar-style。

例如：

屏幕截图使用黑色半透明

屏幕截图使用黑色

— 拉维·德利桑（Ravi Delixan）
source

42

根据官方文档，

例如，将背景色设置为橙色：

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

此外，Chrome会在提供精美的高分辨率图标时显示它们。Chrome浏览器（Android版）会选择您提供的最高分辨率图标，我们建议您提供192×192px的PNG文件。例如：

<link rel="icon" sizes="192x192" href="nice-highres.png">

— 德瓦尔·坎德尔瓦尔
source

22

这与原始答案相同，除了添加了不相关的信息之外

— igorsantos07，2007年

9

@ igorsantos07我只是想添加到官方文档的链接。就是这样

— Deval Khandelwal，2015年

4

我认为，到文档的链接正是所选答案中所缺少的。那就是我到这里结束时一直在搜寻的内容。谢谢。

— 贾斯汀原力

这是多余的

— taimur alam