ios safari 完全忽略 theme-color，仅支持 apple-mobile-web-app-status-bar-style 或 pwa manifest 的 status_bar；android chrome 需 https、静态 meta、十六进制色值、无透明度，且 manifest 的 theme_color 优先级更高。
theme-color 在 iOS Safari 上根本不会生效
别再对着 iPhone 刷新页面等颜色变了——meta name="theme-color" 在所有版本的 iOS Safari 中均被完全忽略，不是你写错了，是 Apple 压根没实现。你看到的状态栏背景始终灰白，和这个标签无关。
想在 iOS 控制状态栏，唯一可行路径只有两个：apple-mobile-web-app-status-bar-style（仅影响文字/图标明暗）或 PWA manifest.json 中的 status_bar 字段（仅安装为 PWA 后生效），两者都和 theme-color 无任何交集。
Android Chrome 要生效必须同时满足四个硬条件
哪怕只漏一个，meta name="theme-color" 就静默失效，不报错、不提示、不回退：
- 页面必须通过 HTTPS 或 localhost 访问；HTTP 下 Chrome 直接跳过解析
-
<meta>必须静态写死在最靠前位置，建议紧贴<title></title>后；JS 动态插入（如document.createElement('meta')）基本无效 -
content值只能是十六进制格式（如#4285f4或简写#45f），不支持rgb()、hsl()、CSS 变量、透明度（#4285f480被截断）或命名色（red） - 若网站已注册 PWA，
manifest.json中的theme_color字段会直接覆盖 HTML 中的theme-color，且优先级更高
深色模式适配只能靠 media 属性静态声明
浏览器不会监听 prefers-color-scheme 并动态重绘地址栏，但支持在 中并列写两个带 media 的 <meta> 标签，由加载时一次性匹配：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
注意：
- 两个标签都得静态存在，JS 插入无效
- 用户中途切换系统主题，地址栏颜色不会更新（无事件可监听，无重绘机制）
- 部分旧版 Android Chrome 不支持
media属性，建议额外加一个无条件 fallback：<meta name="theme-color" content="#ffffff">
改了 color 还是看不清图标？是亮度判断逻辑在起作用
即使 theme-color 生效，状态栏图标/文字也可能突然变灰或发虚——这不是渲染错误，而是 Chromium 内核根据颜色的“感知亮度”自动切换图标配色的结果。它只看 RGB 值的 luminance，不看你主观认为“这个蓝够深”。
例如 #3367d6 可能触发白字，而 #1e3a8a 才稳定出白字。没有 API 可控，只能手动调色验证；也别指望用 rgba() 控制透明度来“微调亮度”，alpha 通道会被直接丢弃。
最常被忽略的一点：PWA 场景下，manifest.json 的 theme_color 和 status_bar 是两套独立配置，前者管启动屏和地址栏（Android），后者才管 iOS 状态栏背景——混着写、混着测，几乎必然失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
