【发布时间】：2017-01-26 02:45:18
【问题描述】：
我想知道一个网站是如何改变 chrome 顶部栏的颜色的。
在这里 - 在顶部 - 您可以看到 polyvore 导航颜色（黑色）也设置为 chrome 导航的颜色（链接所在的位置）。这是如何用 css 制作的？提前致谢！
【问题讨论】：
-
我认为这不是那个问题的重复，这个问题是针对移动设备的。
标签： html css google-chrome
【发布时间】：2017-01-26 02:45:18
【问题描述】：
从 Lollipop 上的 Android 版 Chrome 39 开始，您现在将 能够使用
theme-color元标记来设置工具栏颜色——这个 意味着不再有西雅图灰色工具栏！语法很简单：添加 使用name="theme-color"将元标记添加到页面的<head>，并设置content到任何有效的 CSS 颜色。例如，将背景设置为您喜欢的颜色或 HTML5Rocks 橙色：
<meta name="theme-color" content="#db5945">此外，Chrome 会显示精美的高分辨率网站图标 假如。适用于 Android 的 Chrome 会选择您认为分辨率最高的图标 提供，我们建议提供 192×192 像素的 PNG 文件。例如：
<link rel="icon" sizes="192x192" href="nice-highres.png">在 HTML5Rocks 和Web Fundamentals site 上查看主题颜色，并确保查看Add to home screen docs 了解更多让您的网站脱颖而出的方法。
来源： https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
【讨论】：
-
谢谢！只有 Chrome 提供这些功能吗？
-
我认为 Firefox 移动版做不到。
-
是否可以禁用这种侵入性的废话功能？
-
有时是自动的，取决于网站颜色。
-
我希望在某些情况下可以选择将文本/图标颜色覆盖为白色。我知道避免白色背景上的白色文字和此类笑话是自动的，但橙色上的白色绝对是可读的。
如果您使用 realfavicongenerator.net 之类的东西来创建您的网站图标，您还可以选择配置您的主题颜色（它被称为切换器，可从 lollipop up 获得）。如果您想手动完成，只需将其包含在您的标题中：
<meta name="theme-color" content="#ffffff">
【讨论】：
这取决于顶部栏使用的 CSS 样式，但例如，如果它使用样式“栏”，它在您的 CSS 文件中会如下所示：
bar {
background-color: black;
}
【讨论】：