设置meta标签theme-color为#000000时未显示纯黑色的问题咨询

问题原因 #

你遇到的是部分移动端浏览器（主要是Chrome for Android 85及以上版本）的默认行为：系统开启暗色模式时，浏览器会自动降低theme-color指定颜色的对比度，避免顶部状态栏颜色过暗刺眼，即便是纯黑#000000也会被调整为深灰色，和预期的纯黑效果不符。

修复方案 #

• 方案1：针对明暗模式分别设置theme-color，添加media属性匹配系统颜色模式，浏览器会自动跳过对应模式下的颜色校正
  代码如下：

  <!-- 亮色模式主题色，可根据业务需求调整颜色值 -->
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <!-- 暗色模式强制纯黑主题色 -->
  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
  

• 方案2：检查PWA配置文件manifest.json的对应字段
  如果你开发的是PWA应用，manifest.json中的theme_color字段优先级高于HTML的meta标签，需要同步设置为"theme_color": "#000000"
• 方案3：清除缓存后重试
  移动端浏览器对theme-color的缓存周期较长，修改代码后需要清除浏览器缓存、彻底关闭浏览器后台进程再重新打开验证效果。

内容的提问来源于stack exchange，提问作者abood sabbag