theme-color无法随暗黑模式动态变色，需静态并列声明light/dark两版meta标签并满足HTTPS、静态写入、十六进制值及PWA覆盖等条件，iOS Safari则完全忽略该属性。
theme-color 不能“随”暗黑模式动态变色
浏览器不会监听 prefers-color-scheme 并重绘地址栏，theme-color 是静态声明、一次性匹配的机制。所谓“自动切换”，只是页面加载时根据系统当前偏好选中一个 <meta> 标签，之后无论用户怎么切系统主题，地址栏颜色都不会更新。
必须并列写两个带 media 的 meta 标签
可行做法是静态并列两个 <meta name="theme-color">，靠 media 属性让浏览器在加载时选一个：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
注意：
- 两个标签都得写死在 <head> 靠前位置（建议紧贴 <title> 后）
- JS 动态插入无效，必须是初始 HTML 解析内容
- 旧版 Android Chrome（如 v80 之前）不支持 media 属性，建议额外加一个无条件 fallback：<meta name="theme-color" content="#ffffff">
iOS Safari 完全无视 theme-color
别在 iPhone 上调试这个功能——theme-color 在所有版本的 iOS Safari 中均被静默忽略，Apple 从未实现。你看到的状态栏背景始终是灰白底，和这个标签无关。
想在 iOS 控制状态栏，只有两条有限路径：
- <meta name="apple-mobile-web-app-status-bar-style" content="black">：只影响文字/图标颜色（default/black/black-translucent），不改背景色，且仅在「添加到主屏幕」或 PWA 全屏模式下生效
- PWA manifest.json 中的 status_bar 字段：仅安装为 PWA 后生效，和 theme-color 无任何交集
Android Chrome 生效有四个硬性条件
哪怕漏掉任意一条，theme-color 就静默失效：
立即学习“前端免费学习笔记（深入）”；
- 页面必须通过 HTTPS 或
localhost访问（HTTP 下直接跳过解析） -
<meta>必须静态写死在<head>最靠前位置（JS 动态创建基本无效） -
content值只能是十六进制格式（如#4285f4或简写#45f），不支持rgb()、hsl()、CSS 变量、命名色或透明度（#4285f480会被截断） - 若网站已注册 PWA，
manifest.json中的theme_color字段会直接覆盖 HTML 中的theme-color，且优先级更高
最常被忽略的是 HTTPS 和静态写入——本地开发用 http://localhost 可以，但换成 http://127.0.0.1 或任何其他 HTTP 地址就失效。
