theme-color仅在chromium内核安卓浏览器首次加载时静态生效，ios safari完全不支持；需https/localhost、置于head靠前、用十六进制色值，且pwa manifest中theme_color会覆盖它。
theme-color 标签不能动态改，也不能靠 CSS 或 JS 实时驱动；它只在部分安卓浏览器（Chrome/Edge/Samsung Internet）首次加载时生效，iOS Safari 完全无视——写对了不一定变色，写错了肯定没反应。
为什么写了 theme-color 却没变色
这不是代码没保存或浏览器卡了，而是硬性条件没满足：
- 页面必须跑在 HTTPS 下（
localhost例外），HTTP 协议下 Chrome 直接静默忽略 -
<meta name="theme-color">必须写在最前面，紧贴<title></title>后，放太晚可能被跳过 -
content值只能是纯十六进制格式，如#4285f4；rgb(66, 133, 244)、var(--primary)、带空格的" #4285f4 "全部无效 - 如果已注册 PWA，
manifest.json中的theme_color字段会直接覆盖该 meta 标签，优先级更高 - 正在 iOS 设备上用 Safari 调试？那不是你写错了，是它根本不读这个标签
theme-color 和 manifest.json 的 theme_color 冲突怎么办
冲突是常态，且有明确优先级：只要 manifest.json 存在并被正确引入（<link rel="manifest" href="/manifest.json">），浏览器就只认它的 theme_color，完全忽略 HTML 里的 theme-color。
- 纯静态页、不走 PWA 流程 → 用
<meta name="theme-color">，轻量、即改即用 - 已注册 PWA 或希望控制启动屏/桌面图标背景 → 必须配
manifest.json，theme_color是必需字段 -
manifest.json中可写"theme_color": "rgba(51, 103, 214, 0.9)"，但 Chrome 实际只取 RGB 部分，alpha 会被丢弃 - 两个都配了？删掉 HTML 里的那个，避免混淆和调试干扰
怎么让深色/浅色模式自动切换 theme-color
浏览器不会监听 prefers-color-scheme 并重绘地址栏，所谓“自动”其实是靠 HTML 层级的 media 属性做静态匹配：
- 必须同时写两条：
<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">
iOS 状态栏颜色根本不受 theme-color 控制
别再试了。theme-color 在 iOS Safari 上从不生效，苹果没提供任何等效替代标签来设置状态栏背景色。
- 唯一能影响 iOS 状态栏的，是
<meta name="apple-mobile-web-app-status-bar-style">，但它只控制文字/图标颜色（default/black），不改背景 - 这个 meta 标签只在「添加到主屏幕」或 PWA 全屏模式下起作用，普通 Safari 标签页里无效
- 真要 iOS 状态栏看起来协调，只能靠页面顶部元素的实际背景色“透上去”，Safari 会把状态栏融合进去，没有染色能力
- 想统一多端体验？得按平台拆开处理：Android 看
theme-color，iOS 看实际 DOM 背景 +apple-mobile-web-app-status-bar-style
theme-color 也只在 Chromium 系统浏览器的首次加载时刻起效；后续任何 JS 修改、CSS 变量联动、甚至强制刷新，都不会触发地址栏重绘。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
