如何设置网页在 Safari 15 浏览器顶部状态栏的颜色

苹果最近发布了 Safari 浏览器的 15 版本，这个版本首先把地址栏移到底部，方便切换不同的标签页和输入网址，特别是对于大屏手机来说，可能一开始使用的时候会有点习惯问题，习惯性往上输入网址，习惯了之后，会特别方便。

Safari 15 支持顶部状态栏颜色

另外还有一个特别大的功能改进是支持设置顶部状态栏的颜色了，如「WordPress果酱」博客，设置了顶部状态栏颜色之后：

WPJAM 加速服务介绍单页 http://wpjam.com/speed/ 设置了顶部状态栏颜色之后：

这样设置之后感觉网页和浏览器整体融为一体，特别是 Safari 15 还支持下拉加载刷新，原生 APP 的感觉更明显：

另外桌面版的 Safari 浏览器也是支持这个功能，前提是 Mac 系统的 Safari 浏览器也要升级到 15：

在手机上还好，可能有些人觉得在桌面上有点突兀，所以也是支持关闭的，在 Safari 浏览器的偏好设置里面选择「标签页」，然后将「在标签页栏中显示颜色」选项取消了即可：

如何设置顶部状态栏颜色

Safari 15 顶部状态栏的颜色这个功能是通过使用的 theme-color 这个 meta 标签来实现的。只要你在你的网页的头部加入下面这行代码即可：

<meta name="theme-color" content="#0a1992">

如果你的网页支持暗黑模式，希望两种模式设置的顶部状态的颜色不同，可以加入一下两行代码：

<meta name="theme-color" content="#1972F8" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1C4D98" media="(prefers-color-scheme: dark)">

其中的颜色值根据自己的需求修改。

如果对于 WordPress 站点，你不想修改主题的模板，那么你还可以通过更方便的方法来实现，安装 WPJAM Basic 插件之后，在 WordPress 后台，「WPJAM」主菜单下的「样式定制」的字菜单中，在前台 Head 代码中贴入这段代码即可：