theme-color meta 标签仅在 Chrome、Edge（Chromium版）、Samsung Internet 和部分 Android WebView 中生效，iOS Safari 完全不支持；必须置于 head 内，值为合法十六进制色值（如 #RRGGBB），不支持命名色、rgb()、hsl() 或带 alpha 的十六进制；多个标签仅第一个生效，JS 动态修改无效；PWA 的 manifest.json 中 theme_color 会覆盖它（仅限安装后或启动屏），两者应保持一致；原生不支持暗色模式自动适配，需 JS 检测 prefers-color-scheme 并切换，但首次加载仍用初始值，且 Safari 等不支持该 meta 的浏览器无效。
theme-color meta 标签在哪些浏览器生效
只有 Chrome、Edge（基于 Chromium）、Samsung Internet 和部分 Android WebView 支持 <meta name="theme-color">，iOS Safari 完全忽略它。如果你在 iPhone 上测试没反应，不是写错了，是它本来就不支持。
实际使用中，这个颜色主要影响：Android 手机 Chrome 的地址栏、PWA 添加到主屏幕后的启动屏顶部、以及部分桌面端 Chromium 浏览器的标签页高亮边框（仅限某些版本）。
正确的写法和常见错误
必须写在 内，且值必须是合法十六进制色值（#RRGGBB 或 #RGB），不支持 rgb()、hsl()、命名色或带 alpha 的 rgba()。
-
<meta name="theme-color" content="#4285f4">✅ 正确 -
<meta name="theme-color" content="blue">❌ 无效 -
<meta name="theme-color" content="rgb(66, 133, 244)">❌ 无效 -
<meta name="theme-color" content="#4285f480">❌ 十六进制带 alpha 不被识别（会被整个忽略）
多个 <meta name="theme-color"> 标签时，只取第一个；动态通过 JavaScript 修改 content 值不会触发浏览器重绘顶部栏。
立即学习“前端免费学习笔记（深入）”；
与 manifest.json 中 theme_color 的关系
如果网站注册了 PWA 并提供了 manifest.json，其中的 theme_color 字段会覆盖 <meta name="theme-color"> —— 但仅限于 PWA 安装后或启动屏场景。普通网页浏览仍走 meta 标签。
两者建议保持一致，否则用户从桌面快捷方式打开和直接访问网页时顶部颜色不统一，容易显得割裂。
- manifest.json 中写：
"theme_color": "#4285f4" - HTML 中对应写：
<meta name="theme-color" content="#4285f4">
注意：manifest 文件必须通过 <link rel="manifest" href="/manifest.json"> 正确引入，且响应头需包含 Content-Type: application/manifest+json，否则 theme_color 不生效。
暗色模式下如何适配
原生 <meta name="theme-color"> 不支持媒体查询，无法自动响应系统主题。目前唯一可靠方案是用 JavaScript 检测并切换：
<meta name="theme-color" content="#ffffff" id="theme-color-meta">
<script>
const meta = document.getElementById('theme-color-meta');
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const updateThemeColor = () => {
meta.content = mediaQuery.matches ? '#121212' : '#ffffff';
};
updateThemeColor();
mediaQuery.addEventListener('change', updateThemeColor);
</script>
但要注意：这个 JS 切换只对后续导航有效，首次加载仍按 HTML 中初始值渲染；而且 Safari 等不支持该 meta 的浏览器，这段代码也无意义。
真正需要强一致性暗色适配的项目，建议优先走 PWA + manifest 方案，并搭配 CSS 自定义属性做 UI 同步，别把 theme-color 当成核心视觉控制点。
