theme-color不能统一控制所有移动端浏览器顶栏颜色，iOS Safari完全无视该标签；仅Android Chrome/Edge/Samsung Internet在HTTPS、静态置于head靠前、十六进制色值、无PWA theme_color覆盖四条件同时满足时生效。
它不能统一控制所有移动端浏览器顶栏颜色，iOS Safari 完全无视 theme-color，仅 Android Chrome/Edge/Samsung Internet 在 HTTPS、静态写入、十六进制色值、无 PWA theme_color 覆盖四条件同时满足时才生效。
为什么写了 theme-color 却没变色
不是代码写错，而是平台或环境不满足硬性前提：
- 正在用 iPhone 调试 ——
theme-color在所有 iOS Safari 版本中均被静默忽略，Apple 从未实现该特性 - 页面跑在 HTTP 下 —— Chromium 浏览器只在 HTTPS 或
localhost下解析该标签 -
<meta name="theme-color">没放在<head>靠前位置（建议紧贴<title>后），动态插入（如document.createElement('meta')）基本无效 - 用了
rgb(66, 133, 244)、var(--primary)或带透明度的#4285f480—— 只认纯十六进制格式（#4285f4或简写#45f） - 网站已注册 PWA，且
manifest.json中定义了theme_color字段 —— 它会直接覆盖 HTML 中的theme-color
如何让深色/浅色模式“匹配”顶栏颜色
浏览器不会监听 prefers-color-scheme 并重绘地址栏，所谓“自动适配”只是加载时静态匹配一次：
- 必须并列写两个
<meta name="theme-color">标签，都静态存在于<head>中：<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，是 Chromium 内核根据颜色的感知亮度（luminance）自动切换图标配色的结果：
立即学习“前端免费学习笔记（深入）”；
- 它只算 RGB 值的 luminance，不看你主观认为“这个蓝够深”
- 例如
#3367d6可能触发白字但显示偏灰；#1e3a8a才更稳定出清晰白字 - 没有 API 可控该行为，只能手动调色验证 —— 推荐用在线 luminance 计算器（如 WCAG contrast checker）辅助选值
- 深色背景配浅色
theme-color容易导致 URL 文字可读性差，Chrome 的反色逻辑不可绕过
最易被忽略的一点：即使所有条件都满足，theme-color 也只在首次加载时被读取一次；后续 JS 修改 meta.content 大概率被忽略，除非触发完整页面重绘（比如导航或滚动）。它不是响应式变量，而是静态提示色。
