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

Question

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

.

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

Answer 1

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

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

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

更新：

如果 android 设备启用了原生dark-mode ，则忽略此meta标记。

Android 版 Chrome 不会在启用了本机dark-mode设备上使用该颜色。

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

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

Answer 3

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

将下面的元属性添加到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。

例如：

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

使用黑色的截图

Answer 4

从官方文档，

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

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

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

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

Answer 5

检查所有这些步骤：

1. 在html <head>标签中包含<meta name="theme-color" content="#db4b5d" /> 。
2. 打开 Chrome 移动设置：
   • 向下滚动到theme选项
     • 切换到浅色主题。
3. 重新加载页面。