Bootstrap中浏览器标签页的颜色由什么决定？

核心原理 #

这种浏览器顶部/标签栏的着色效果，是通过HTML的<meta>标签实现的，并非CSS或manifest.json配置。Bootstrap官网使用的配置如下：

<meta name="theme-color" content="#7354AD" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#633bbc" media="(prefers-color-scheme: dark)">

你在CSS中找不到#7354AD，是因为它定义在meta标签里，而非样式表内。

Safari下的显示条件 #

只有满足以下设置，标签栏才会直接显示主题色：

• 打开Safari「偏好设置」>「标签页」，将「标签页布局」设为「紧凑」
• 进入「偏好设置」>「高级」，勾选「在紧凑标签栏中显示颜色」

若关闭该选项，下拉页面时顶部会露出这个颜色，作为页面背景延伸的视觉效果。

修改/去除着色的方法 #

• 修改颜色：直接替换上述meta标签的content值为目标颜色代码即可
• 完全去除：删除对应的theme-color meta标签，浏览器会恢复默认标签栏样式

内容的提问来源于stack exchange，提问作者Josef Habr