theme-color 只能静态声明且仅在 https 下对 chromium 系统浏览器生效，ios safari 完全不支持；需置于 head 靠前、用十六进制色值，pwa manifest 中 theme_color 会覆盖它。
meta name="theme-color" 只能静态声明，不能靠 JS 动态改；它在 iOS Safari 上完全无效，安卓端也只对 Chromium 系统浏览器（Chrome、Edge、Samsung Internet）起作用——写对了不一定生效，写错了肯定没反应。
为什么写了 theme-color 却没变色
常见现象是：HTML 里明明写了 <meta name="theme-color" content="#4285f4">，但 Android Chrome 地址栏还是默认灰白。原因通常有这几个：
- 页面跑在 HTTP 下（必须 HTTPS 或
localhost，否则 Chrome 静默忽略） -
meta标签没放在靠前位置（建议紧贴<title></title>后，太晚可能被跳过） - 颜色值用了
rgb(66, 133, 244)或var(--primary)（只认十六进制，如#4285f4，不支持透明度、命名色、CSS 变量） - 网站已注册 PWA，且
manifest.json中定义了theme_color字段（它会直接覆盖 HTML 中的theme-color） - 正在用 iOS 设备调试（Safari 完全不读这个标签，不是你漏写了什么）
怎么让深色/浅色模式下地址栏自动适配
浏览器不会响应 @media (prefers-color-scheme: dark) 自动切换 theme-color。所谓“自动”，其实是靠 HTML 层级的 media 属性做条件渲染：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
这种写法要求：
- 两个
meta标签都得静态写死在里（不能 JS 插入） - 浏览器首次加载时根据当前系统偏好选中一个生效
- 用户中途切换系统主题，地址栏颜色不会自动更新（没有事件可监听，也没有重绘机制）
- 部分旧版 Android Chrome 不支持
media属性，建议保留一个无条件的 fallback
和 iOS 状态栏控制的关系
别指望 theme-color 在 iPhone 上起任何作用。iOS 状态栏背景色由 apple-mobile-web-app-status-bar-style 或 PWA manifest 中的 status_bar 控制，两者互不相干：
-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">只影响文字/图标明暗，不改背景色 - 真要 iOS 状态栏变色，必须走 PWA 路线，在
manifest.json里配status_bar（仅限安装为 PWA 后生效） -
theme-color和apple-mobile-web-app-status-bar-style可以共存，但它们各自管各自的平台，别混着调
真正容易被忽略的是：即使所有条件都满足，theme-color 的效果也只出现在「首次加载」那一刻——后续任何 JS 修改 content 值，Chrome 都大概率无视；而 iOS 用户根本看不到它，连“无视”的机会都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
