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

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

Chrome for Android enter image description here。

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

388338 次浏览
小开
最佳答案

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

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

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

如果Android设备启用了原生dark-mode，那么meta标记将被忽略。

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

# EYZ0 # EYZ1

小开

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

官方文档:

例如，设置背景色为橙色:

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

此外，Chrome将显示漂亮的高分辨率favicon，当他们提供。Chrome for Android选择你提供的最高分辨率图标，我们建议提供一个192×192px PNG文件。例如:

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

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

将下面的元属性添加到头部分的HTML代码中

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

例子

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

在下图中，我刚刚提到了Chrome是如何使用你的主题颜色属性的:

Enter image description here

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

从指导方针(文件在这里):

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

有关状态栏外观的更多信息，请参见支持的Meta标签。

例如:

截图使用黑半透明

截图使用黑-半透明

截图使用黑色

截图使用黑色

小开

检查所有这些步骤:

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

提交答案