我如何改变标题栏和地址栏的颜色在最新版本的Chrome棒棒糖?

我还没有找到任何关于这个话题的东西。我真的很喜欢改变地址栏和标题颜色的能力概述。有什么简单的方法吗?

我认为你需要Android 5.0(棒棒糖)才能工作，Chrome的合并标签和应用程序设置为开启。

当前回答

经过一番寻找，我找到了解决办法。

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

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

如果Android设备启用了原生暗模式，则忽略此元标记。

Android版Chrome不会在启用了原生暗模式的设备上使用这种颜色。

来源:主题颜色元标签

2014-11-16 18:54:22

其他回答

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

将下面的Meta属性添加到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-specific样式

从指南(文件在这里):

Hiding Safari User Interface Components Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode. <meta name="apple-mobile-web-app-capable" content="yes"> Changing the Status Bar Appearance You can change the appearance of the default status bar to either black or black-translucent. With black-translucent, the status bar floats on top of the full screen content, rather than pushing it down. This gives the layout more height, but obstructs the top. Here’s the code required: <meta name="apple-mobile-web-app-status-bar-style" content="black"> For more on status bar appearance, see Supported Meta Tags.

例如:

截图使用黑半透明

截图使用黑色

2016-06-04 12:43:42

你实际上需要3个元标签来支持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">

2015-10-18 02:37:49

来自官方文件:

例如，设置背景色为橙色: <meta name="theme-color" content="#db5945"> 此外，Chrome将显示漂亮的高分辨率favicon，当他们提供。Chrome for Android选择你提供的最高分辨率图标，我们建议提供一个192×192px PNG文件。例如: <link rel="icon" sizes="192x192" href="nice-highres.png"> .

2015-12-11 12:20:09

检查所有这些步骤:

在HTML <head>标签中包含<meta name="theme-color" content="#db4b5d" />。打开Chrome手机设置: 向下滚动到主题选项切换到灯光主题。重新加载页面。

2022-08-18 21:06:16