theme-color元标签仅在基于Chromium的Android浏览器（Chrome、Edge、Samsung Internet）及PWA环境生效，iOS Safari完全不支持；需HTTPS/localhost、静态声明于head、十六进制色值，且manifest中theme_color会覆盖它。
theme-color元标签在哪些浏览器生效
只在基于 Chromium 的 Android 浏览器（Chrome、Edge、Samsung Internet）和部分 PWA 环境下起作用；iOS Safari 完全忽略 theme-color，哪怕你写对了也没反应。
常见错误现象：<meta name="theme-color" content="#4285f4"> 写在 <head> 里，但 iOS 上状态栏仍是默认灰色——这不是你代码错了，是平台不支持。
- Android Chrome 从 v39 开始支持，需页面为 HTTPS 或 localhost
- 必须是
<head>内的静态声明，JS 动态插入无效 - 颜色值推荐用十六进制（如
#ff6b6b），不支持rgb()或变量 - 若页面有 PWA manifest，
theme_color字段会覆盖theme-color元标签
如何让 CSS 和 theme-color 同步更新
不能靠 CSS 直接读取 theme-color 值，它不是 CSS 变量。真正能同步的方式只有「手动维护一致」或「用 JS 注入动态 meta 标签」。
使用场景：主题切换功能（比如深色/浅色模式）、品牌色随用户偏好变化。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案不存在——
theme-color是 HTML 元信息，CSS 无法访问它 - 安全做法：在切换主题时，同时修改
document.querySelector('meta[name="theme-color"]').content - 别用
document.write或重复添加 meta，会导致多个theme-color标签，行为不可预测 - 示例：
function updateThemeColor(color) { const meta = document.querySelector('meta[name="theme-color"]'); if (meta) meta.content = color; }
移动端状态栏颜色还受哪些 CSS 属性影响
仅靠 theme-color 不够，iOS 和部分 Android 场景下，状态栏文字颜色（亮色/暗色）由系统自动判断，但你可以用 viewport 配合 CSS 控制。
关键点在于：状态栏背景色由 theme-color 控制，但文字/图标颜色是否可读，取决于系统是否认为背景足够深或浅。
- iOS 不认
theme-color，但支持viewport的content="... , viewport-fit=cover"+env(safe-area-inset-top)配合 padding - Android 上，深色背景（如
#121212）通常触发白色状态栏图标；浅色背景（如#ffffff）触发黑色图标——这个逻辑不可编程干预 - 如果发现图标变灰、看不清，大概率是颜色太接近中性灰（比如
#888），换更纯的深色或浅色
为什么改了 theme-color 页面刷新后没变
因为很多 Android 浏览器会缓存 theme-color 值，尤其是 PWA 安装后，甚至重启浏览器都不刷新。
这不是 bug，是实现层面的优化策略——浏览器把首次加载时读到的 theme-color 当作“安装时主题”，后续只在重新添加到主屏幕时更新。
- 开发调试时，先卸载 PWA（长按图标 → 卸载），再清空浏览器缓存，最后重新访问并添加
- 线上环境无法强制用户重装，所以首次设置务必准确；后续变更建议只用于非关键路径（如节日彩蛋色）
- 没有 API 能检测当前生效的
theme-color值，也无法监听变化
最麻烦的其实是 iOS —— 它既不响应 theme-color，也不提供等效替代方案。所谓“统一”，本质上只是 Android 侧的可控操作，iOS 上你只能接受默认行为。这点容易被忽略，但决定了整个方案的适用边界。
