修改网站在 Chrome for Android 下地址栏的颜色

日常网上冲浪的过程中经常能够注意到,在使用 Chrome for Android 访问一些网站时,浏览器的地址栏颜色不是默认的白色,而是变成了这些网站的主题颜色,这使得整个手机显示界面的颜色搭配看起来特别和谐。

本站也有着这样的 feature,与 NexT 主题的配色相呼应,在使用安卓 Chrome 访问本站时地址栏颜色会变成黑色。

本来以为这是 Chrome 的某种自适应机制,然而一番查找资料后却发现事情并不是这样,这个颜色是需要手动指定的,不然就会是默认的白色。

问题发现

前不久折腾了一下给博客增加了一个极简的 404 页面(原先是 Github Pages 默认的 404 页面,说实话有点丑),页面查看地址:https://xirikm.net/404.html

这个从网上随便“抄”来的 404 页面跟本站风格还算是比较搭的,然而最近在用手机访问的时候却发现这个 404 页面看起来有点怪怪的,下面是在 Chrome for Android 下本站的正常页面跟 404 页面的对比图。

本站正常页面跟初始 404 页面的对比图

哪里怪怪的其实一目了然,在本站正常页面下浏览器的地址栏是黑色的,然而 404 页面的地址栏是白色的,这使得在手机上看的时候两者变得“不那么搭了”。

解决方案

查找资料发现,从安卓 5.0、谷歌浏览器版本 39 开始,Chrome 上新增了一项使用 theme-color 元标记修改主题颜色的功能。只需要在网站页面的 head 标签中添加如下元标记就能实现对浏览器主题颜色的修改( content 项设置为你想要修改的颜色)。

1
<meta name="theme-color" content="#SOME_COLOR">

在了解了这一点之后马上打开自己的博客右键查看源代码搜索了一番,果然在其中发现了如下内容:

1
<meta name="theme-color" content="#222">

找到了问题所在之后解决起来就简单了,直接修改这个 404 页面的源代码,在它的的 head 标签中也添加上一样的元标记即可。最终效果如下,看起来果然舒服多了。

本站正常页面跟修改后 404 页面的对比图