theme-color meta 标签必须放在 <head> 中且位于 <title> 之后，仅对 PWA 或 Chrome/Edge 移动版地址栏生效，HTTPS 环境下才起作用，命名色在 Chrome Android 90+ 支持，动态修改需替换整个标签而非仅改 content 属性。
theme-color meta 标签写在哪才生效
必须放在 <head> 里，且最好在 <title> 之后、其他资源加载之前。浏览器解析到它就会立即应用，放错位置（比如塞进 <body> 或 JS 动态插入）完全无效。
常见错误：用 JS 拼接字符串后 document.write 插入，或等 DOM 加载完再 appendChild —— 这时工具栏早已按默认色渲染完毕，不会重绘。
支持哪些值？十六进制和命名色都行吗
只接受有效的 CSS 颜色值，但实际兼容性有坑：
-
#ff6b6b、rgb(255, 107, 107)、hsl(0, 60%, 70%)都可以 -
red、blue这类命名色在 Chrome for Android 90+ 支持，旧版本可能回退为灰色 -
transparent会被忽略，不是变透明，而是 fallback 到系统默认色 - 带 alpha 的
rgba()或hsla()大部分安卓浏览器不识别，直接失效
为什么改了颜色没反应？几个关键排查点
不是代码写错，而是环境或配置卡住了：
立即学习“前端免费学习笔记（深入）”；
- 仅对 PWA（添加到主屏幕的网页）或 Chrome/Edge 移动版的地址栏生效；Safari iOS 完全不支持
theme-color - 页面必须通过 HTTPS 提供（localhost 除外），HTTP 站点会被浏览器静默忽略
- 某些安卓厂商定制系统（如华为 EMUI、小米 MIUI）会强制覆盖该值，优先使用自己主题色
- 如果同时设置了
manifest.json中的theme_color，且两者不一致，Chrome 会以 manifest 为准，meta 标签被无视
动态切换 theme-color 的正确姿势
真要换色，不能靠改 meta 标签 content 属性——浏览器不会监听变更。得用 JS 覆盖整个标签：
const themeMeta = document.querySelector('meta[name="theme-color"]');
if (themeMeta) {
themeMeta.setAttribute('content', '#4a90e2');
}
但注意：这仅对后续新打开的标签页或重新加载有效；当前已渲染的页面工具栏不会实时变色。想“即时”生效，目前没有可靠方案。
深色模式适配这类需求，更稳妥的做法是用 prefers-color-scheme 媒体查询配合两个独立的 meta 标签（服务端渲染时判断），而不是前端硬切。
