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

【问题标题】：How to change the color of header bar and address bar in newest Chrome version on Lollipop?如何在 Lollipop 上的最新 Chrome 版本中更改标题栏和地址栏的颜色？
【发布时间】：2015-01-13 15:46:33
【问题描述】：

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

我认为您需要 Android 5.0 Lollipop 才能正常工作，并且 Chrome 的 Merge Tabs and Apps 设置为 On。

【问题讨论】：

自 2016 年 1 月起，不再需要合并选项卡选项才能使其正常工作（在 Lollipop 中）。
现在奇巧也是这样..
@Skuld 您需要合并选项卡才能在“最近的应用程序”视图中查看颜色，但即使您禁用了“合并选项卡和应用程序”，您在 Chrome 中查看网站时仍然可以看到颜色.但我希望他们有一天能修复它，以便 Chrome 中的标签列表（在“合并标签和应用程序”被禁用时显示）也会显示主题颜色而不是暗灰色。
@ADTC 你是说当你去切换标签时它会失去颜色吗？如果是这样，那么是的，它并不理想，但也不是什么大不了的事，因为当您单击选项卡时它会恢复颜色。最重要的是网站在查看时具有正确的颜色:)
@Skuld，在“合并选项卡和应用程序”关闭的情况下，您在切换选项卡时会收到 this view (link)。在此视图中，所有选项卡都是灰色的。如果主题颜色保留在此视图中，那就太好了。类似于当“合并选项卡和应用程序”打开并打开应用程序切换器时“类应用程序选项卡”具有主题颜色的方式。 （PS：我个人讨厌合并，因为我有很多标签，然后我也有很多应用程序。我想让它们分开，否则我会发疯的 >.< )

标签： android html google-chrome

【解决方案1】：

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

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

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

更新：

如果安卓设备启用了原生dark-mode，那么这个meta标签会被忽略。

Chrome for Android 不会在启用原生 dark-mode 的设备上使用该颜色。

来源： https://caniuse.com/#search=theme-color

【讨论】：

谢谢。查看 html5rocks 了解更多信息：updates.html5rocks.com/2014/11/…
Chrome 中是否有任何设置可以禁用此功能？我无法忍受彩色地址栏。我只想要默认颜色。
@James - 这可能不是您喜欢的解决方案，但您可以通过关闭“将标签与应用合并”设置来停止颜色更改。
真的吗？我正在使用 Marshmallow，关闭了“使用应用程序合并标签”设置，但地址栏仍然是彩色的。也许他们“修复了这个错误”。
不一定是十六进制颜色，任何有效的 CSS 颜色都可以。

【解决方案2】：

你实际上需要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">

【讨论】：

那么加载栏呢？正如我所看到的使顶部栏变暗而加载栏变白的网站，但我找不到分析代码的 sn-p？
注意：根据Apple's dev notes：“除非您首先按照apple-apple-mobile-web-app-capable 中的说明指定全屏模式，否则此元标记无效。”
@YanFoto 这实际上是非常有用的信息。如何做到这一点？
iOS apple-mobile-web-app-status-bar-style 属性只支持black, black-translucent or default` - 你不能使用自定义颜色。
如果您使用black-translucent，它将使顶部栏透明并带有白色文本，这可能是您所追求的

【解决方案3】：

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

在HEAD部分

中将元属性添加到您的HTML代码中

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

例子

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

在下图中，我刚刚提到了 Chrome 如何获取您的 theme-color 属性

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 特定样式

来自指南Documents Here

隐藏 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">

有关状态栏外观的更多信息，see apple-mobile-web-app-status-bar-style.

例如：

使用黑色半透明的屏幕截图

使用黑色的屏幕截图

【讨论】：

【解决方案4】：

来自Official documentation，

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

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

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

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

【讨论】：

这和原来的答案一样，除了添加不相关的信息
@igorsantos07 我只是想添加官方文档的链接。就是这样
我认为文档链接正是所选答案中缺少的内容。当我最终来到这里时，这就是我在谷歌上搜索的内容。谢谢。
这是多余的