theme-color 仅在 android chrome、edge（chromium版）、samsung internet 中生效，ios safari 不支持；生效需同时满足 https/localhost、静态写入 head、纯十六进制 color 值、pwa manifest 优先级更高四条件。
直接说结论：theme-color 只在 Android Chrome、Edge（Chromium版）、Samsung Internet 这几款浏览器上生效，iOS Safari 完全不认——不是你配错了，是它压根没实现。
Android 上 theme-color 生效的四个硬性条件
漏掉任意一条，theme-color 就静默失效，地址栏颜色不会变：
- 页面必须跑在 HTTPS 或
localhost下；HTTP 协议下 Chromium 浏览器直接跳过解析 -
<meta name="theme-color">必须静态写死在里，且位置靠前（建议紧贴<title></title>后）；JS 动态插入（如document.createElement('meta')）无效 -
content值只能是纯十六进制色值，例如#4285f4或简写#45f；不支持rgb()、hsl()、命名色（red）、CSS 变量（var(--primary)）、带透明度的十六进制（#4285f480） - 如果网站已注册 PWA，
manifest.json中的theme_color字段会覆盖 HTML 中的theme-color标签；此时改 HTML 没用，得去改 manifest
如何适配深色/浅色模式（prefers-color-scheme）
浏览器不会监听系统主题切换并重绘地址栏，所谓“自动适配”其实是加载时一次性匹配。必须静态写两条 <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">
为什么颜色变了但图标/文字看不清？
这不是 bug，是 Chromium 内核根据颜色的感知亮度（luminance）自动调整状态栏图标配色的结果。它只看 RGB 值，不看你主观判断。
- 例如
#3367d6可能触发白字，而#1e3a8a才稳定出白字 - 没有 API 可控，只能手动调色 + 在 Chrome for Android 的 DevTools → Application → Manifest 里验证是否解析成功
- 太浅（如
#ffffff）或太暗（如#000000）都可能让系统误判，导致文字发虚或图标不可见
最常被忽略的一点：iOS 上无论你怎么配 theme-color，它都不会生效。想控制状态栏文字明暗，唯一可用的是 <meta name="apple-mobile-web-app-status-bar-style">，但它不改背景色，只影响文字颜色，且仅在「添加到主屏幕」或 PWA 全屏模式下起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
