theme-color 在 iOS Safari 上完全无效，Apple 从未实现；仅 Android Chrome/Edge/Samsung Internet 在 HTTPS（或 localhost）、静态写死于 head 靠前、纯十六进制色值、无 PWA manifest theme_color 覆盖四条件同时满足时生效，且仅首次加载读取一次。
theme-color 在 iOS Safari 上完全无效，不是你写错了，是 Apple 根本没实现；在 Android Chrome/Edge/Samsung Internet 上，它只在 HTTPS（或 localhost）、静态写死、十六进制色值、无 PWA theme_color 覆盖这四个条件同时满足时才生效。
为什么写了 theme-color 却没变色
这不是缓存或刷新问题，而是硬性条件被破坏：
- 正在用 iPhone 测试 ——
theme-color在所有 iOS Safari 版本中均被静默忽略，状态栏背景永远灰白 - 页面跑在 HTTP 下 —— Chromium 内核浏览器只在 HTTPS 或
localhost时解析该标签，HTTP 下直接跳过 -
<meta name="theme-color">没紧贴<title>放在<head>最前面 —— 靠后（比如在 CSS/JS 引入之后）可能被跳过 -
content值用了rgb(66, 133, 244)、var(--primary)或带透明度的#4285f480—— 只认纯十六进制格式（#4285f4或简写#45f），不支持命名色、HSL、变量、空格或透明度 - 网站已注册 PWA 且
manifest.json中定义了theme_color—— 它会直接覆盖 HTML 中的theme-color，且优先级更高
如何让深色/浅色模式“自动”匹配地址栏颜色
浏览器不会监听 prefers-color-scheme 并重绘地址栏，所谓“自动”只是加载时静态匹配一次。必须靠 HTML 层级的 media 属性并列声明：
- 两个
<meta name="theme-color">标签都得静态写死在<head>中，JS 动态插入（如document.createElement('meta')）基本无效 - 示例写法：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">和<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)"> - 用户中途切换系统主题，地址栏颜色不会更新 —— 没有事件可监听，也没有重绘机制
- 部分旧版 Android Chrome 不支持
media属性，建议额外加一条无条件 fallback：<meta name="theme-color" content="#ffffff">
为什么改了颜色，状态栏图标却看不清
这不是 bug，也不是 CSS 冲突，而是 Chromium 内核根据颜色的感知亮度（luminance）自动决定文字/图标明暗：
- 它只算 RGB 值的 luminance，不看你主观觉得“这个蓝够深”
- 例如
#3367d6可能触发白字但显示偏灰；#1e3a8a才更稳定出清晰白字 - 没有 API 可控该行为，只能手动调色验证 —— 推荐用 WCAG contrast checker 等在线 luminance 计算器辅助选值
- 深色背景配浅色
theme-color容易导致 URL 文字可读性差，Chrome 的反色逻辑不可绕过
最易被忽略的一点：即使所有条件都满足，theme-color 也只在首次加载时被读取一次；后续 JS 修改 meta.content 几乎总是被忽略，除非触发完整页面重绘（比如导航或滚动）。
