theme-color meta 标签必须静态写在 head 中才生效，动态插入无效；它仅控制浏览器UI色（地址栏等），与页面 background-color 无关；PWA manifest 的 theme_color 会覆盖它；深色模式需 JS 检测并手动更新；CSS 变量可统一管理样式但无法自动同步到 meta；系统深色模式可能强制降级 theme-color 显示。
theme-color meta 标签必须写在 head 里且不能动态插入
浏览器地址栏、书签栏、PWA 安装弹窗里的主色调，靠的是 <meta name="theme-color" content="#4285f4">，但它只在 <head> 中静态声明才生效。JS 动态创建并 append 到 head 的 meta 标签，Chrome 和 Edge 都会忽略——看着 DOM 里有了，实际不生效。
常见错误包括：
- 把
<meta name="theme-color">放在<body>里 - 用
document.createElement('meta')+appendChild()想 runtime 切换主题色 - 拼错 name 值，比如写成
name="theme"或name="color"
正确写法只有一种：
<head> <meta name="theme-color" content="#4285f4"> </head>颜色值支持
#rrggbb、#rgb、rgb()、hsl()，但别用 blue 这类英文名，Safari 虽不支持该标签，但部分 Android WebView 会 fallback 解析失败。
theme-color 和 background-color 完全无关
很多人以为设了 theme-color 就能“延伸”到页面背景，其实它和 background-color 是两套独立机制：前者控制浏览器 UI 区域，后者控制 DOM 渲染区域。设了 theme-color 不会让 body 变蓝，反之亦然。
真正让页面视觉“延伸”主题色的，是手动同步设置：
立即学习“前端免费学习笔记（深入）”；
-
body { background-color: #4285f4; }（或用 CSS 变量统一管理） - 如果用了 PWA manifest，里面的
theme_color字段会覆盖theme-colormeta 标签，得一并改 - 深色模式下
theme-color不自动切换，需 JS 检测matchMedia('(prefers-color-scheme: dark)')并替换 meta content
用 CSS 变量实现主题色联动更可靠
想让主题色从地址栏“延伸”到按钮、标题、边框等多处，硬编码十六进制值容易漏改、难维护。推荐用 CSS 变量做源头控制：
:root {
--theme-primary: #4285f4;
}
body {
background-color: var(--theme-primary);
}
.btn-primary {
background-color: var(--theme-primary);
border-color: var(--theme-primary);
}
这样改一处变量，所有引用的地方自动更新。若需响应深色模式，配合媒体查询：
@media (prefers-color-scheme: dark) {
:root {
--theme-primary: #34a853;
}
}
注意：CSS 变量无法被 theme-color meta 直接读取，仍需 JS 同步更新 meta content，否则地址栏颜色不会变。
移动端 Chrome 地址栏颜色可能被系统深色模式干扰
即使写了正确的 theme-color，某些 Android 系统（如 Samsung One UI）在全局深色模式开启时，会强制将浅色 theme-color 映射为灰阶色，用户看到的不是你指定的颜色。这不是 bug，而是系统级干预。
应对策略有限，但可减少意外：
- 避免用纯白
#ffffff或纯黑#000000作theme-color，它们最容易被系统降级 - 测试时真机优先，模拟器常不触发该行为
- 若品牌色必须用高对比色，接受“地址栏色 ≠ 页面色”的事实，专注保证页面内一致性
真正的“主题延伸”不在标签上，而在设计系统层面对齐——theme-color 是入口提示，background-color 和组件样式才是用户停留时的全部视觉反馈。两者不同步，比完全没设更伤体验。
