如何在Safari 15中控制网站地址栏与标签栏的着色效果

运行原理 #

Safari 15的地址栏、标签栏自动着色功能仅在浏览器启用紧凑标签栏布局时生效，默认逻辑下Safari会自动识别并提取页面头部区域的背景色作为浏览器栏的填充色，若页面头部存在复杂渐变、多层透明叠加、动态切换的背景样式，Safari无法识别到稳定的纯色值时，就会回退到系统默认的灰色，这也是你之前的站点没有触发该效果的常见原因。

自定义控制方法 #

你可以通过HTML+CSS的组合完全自定义该颜色，优先级从高到低如下：

• 优先使用HTML meta 标签配置：
  直接在页面<head>中加入对应代码即可，支持适配明暗模式：

  <!-- 浅色模式下的着色 -->
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <!-- 深色模式下的着色 -->
  <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
  

  不需要适配明暗模式的话直接写一行不带media属性的即可。
• 可选CSS方案：
  Safari支持在CSS中使用theme-color()函数配置，适合和站点的CSS变量联动：

  :root {
    --header-bg: #2563eb;
    theme-color: var(--header-bg);
  }
  

  注意该CSS配置的优先级低于HTML的meta标签，兼容性也略差，更推荐优先用meta标签方案。

常见不生效排查点 #

• 确认浏览器开启了紧凑标签栏布局，分离式标签栏布局下该功能默认不生效
• 若配置了PWA的manifest文件，manifest中的theme_color字段优先级高于页面内的meta标签和CSS配置，需要同步修改
• 颜色值尽量使用标准十六进制实色，半透明色在不同场景下可能出现显示异常
• 不要使用Safari不识别的颜色命名或格式，确保content属性的色值书写规范

内容的提问来源于stack exchange，提问作者Luís