HTML里怎么用设置浏览器顶部栏颜色
只有 Chrome、Edge、Firefox（桌面+安卓）、Safari（仅 iOS 15.4+）支持 theme-color，且只在 PWA 或添加到主屏幕后生效；普通网页标签页里基本不显示。
实际效果取决于系统 UI 和浏览器实现：Android Chrome 会染色地址栏，iOS Safari 则影响状态栏背景（需配合 viewport 设置）。
- 必须写在
里，且不能动态插入（JS 修改无效） - 值必须是合法 CSS 颜色，比如
#4285f4、rgb(66, 133, 244)、rebeccapurple，不支持var(--primary) - 推荐用十六进制，避免空格或引号问题：
<meta name="theme-color" content="#4285f4"> - 如果页面有深色模式，可配合媒体查询：
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
为什么设置了 theme-color 却没变色
最常见原因是浏览器没“认出”这是个可安装的 Web 应用——它不是靠这个 meta 标签单独触发的，而是依赖整个 PWA 上下文。
- 缺少
manifest.json或其中没配background_color字段，Chrome 可能忽略theme-color - 服务端返回了
Cache-Control: no-cache或 HTTPS 不可用，导致离线能力缺失，进而降级处理 - 本地开发用
file://协议打开，所有现代浏览器都禁用theme-color - iOS Safari 要求同时设置
<meta name="apple-mobile-web-app-capable" content="yes">才可能生效
theme-color 和 CSS 自定义属性（CSS variables）能联动吗
不能直接联动。HTML 的 theme-color 是静态声明，不响应 JS 或 CSS 变量变化，也不参与样式计算。
立即学习“前端免费学习笔记（深入）”；
如果你需要根据主题切换顶部栏颜色，得手动更新 <meta> 标签内容，并重新挂载（注意：仅对后续加载有效，当前页不会刷新顶部栏）：
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#2e7d32');
但这只是“骗过”浏览器缓存，实际体验不稳定，尤其在 iOS 上几乎无效。
- 真正可靠的方案是预设多套
<meta>并用media属性控制显隐，而不是运行时改 - 别指望用
:root { --theme-color: #4285f4; }去驱动theme-color，两者完全隔离 - 深色模式下，
theme-color推荐用深灰（如#121212），而非纯黑——纯黑在 OLED 屏上可能被系统强制提亮
和 viewport、apple-mobile-web-app-status-bar-style 的关系
theme-color 管背景色，apple-mobile-web-app-status-bar-style 管文字/图标颜色，两者要配着用，否则 iOS 状态栏文字可能看不见。
-
<meta name="apple-mobile-web-app-status-bar-style" content="default">→ 黑字（默认） -
content="black"→ 白字（适配深色背景） -
content="black-translucent"→ 半透 + 白字（已废弃，iOS 13+ 不再支持） - 搭配
theme-color=#000000时，务必设status-bar-style=black，否则白字压黑底不可读 -
viewport中的width=device-width不是可选的——没它，iOS 会无视所有 mobile web app meta
theme-color 才真正有用，纯网页项目里加它基本等于装饰；iOS 兼容性尤其脆弱，测试一定要真机跑，模拟器经常假成功。 
