theme-color 元标签仅在 Android Chrome、Edge 和部分 Samsung Internet 中控制地址栏背景色，iOS Safari 完全忽略；需配合 manifest.json 才能覆盖 PWA 启动屏等场景，且必须通过 HTTPS、有效 manifest 和 service worker 才可生效。
ThemeColor 在移动端的实际作用范围
theme-color 元标签只在 Android Chrome、Edge（基于 Chromium）和部分 Samsung Internet 浏览器中生效，iOS Safari 完全忽略它。它控制的是浏览器 UI 的地址栏背景色（包括底部导航栏在某些全屏模式下），不是网页内容本身的颜色。
- 仅影响 PWA 安装后打开的独立窗口或“添加到主屏幕”后的启动体验
- 不影响普通网页浏览时的 Safari/Chrome 标签页颜色
- 若未设置
manifest.json中的background_color，主题色可能在启动屏过渡时失效
正确写法：meta 标签必须放在 中且带 name 属性
错误写法常见于复制粘贴遗漏关键属性，比如漏掉 name="theme-color" 或写成 property（那是 Open Graph 用的）：
<meta name="theme-color" content="#4285f4">
-
content值支持十六进制（如#ff6b35）、RGB（rgb(66, 133, 244)）、RGBA（rgba(66, 133, 244, 0.9)），但 iOS 不支持透明度，Android 也仅部分版本支持 - 不推荐使用 CSS 变量或 JS 动态注入该 meta 标签——浏览器只读取初始 HTML 解析结果
- 多个
theme-color标签会以第一个为准，后续被忽略
配合 manifest.json 才能覆盖更多场景
单独靠 meta 标签无法控制 PWA 启动屏、桌面图标背景等，必须配 manifest.json：
{
"background_color": "#ffffff",
"theme_color": "#4285f4",
"display": "standalone"
}-
background_color影响启动屏底色，theme_color影响地址栏和系统 UI - 两者值可以不同，但建议保持视觉一致性
- 若
manifest.json中theme_color与meta标签冲突，PWA 模式下以前者为准，普通网页以meta为准
调试时容易忽略的兼容细节
- Android 12+ 引入了动态色彩（Material You），
theme-color 会被系统采样并生成渐变 UI，但前提是应用已声明支持（需 android:forceDarkAllowed="true" 等原生配置，网页侧无法干预）
- 颜色太浅（如
#ffffff）或太暗（如 #000000）可能导致文字不可读，Chrome 会自动调整文字颜色，但行为不保证一致
- 使用工具检测是否生效：在 Chrome for Android 打开 DevTools → Application → Manifest，查看 “Theme color” 是否解析成功
theme-color 会被系统采样并生成渐变 UI，但前提是应用已声明支持（需 android:forceDarkAllowed="true" 等原生配置，网页侧无法干预） #ffffff）或太暗（如 #000000）可能导致文字不可读，Chrome 会自动调整文字颜色，但行为不保证一致 真正起效的只有三件事：HTML 里写对 meta 标签、PWA manifest 里填好 theme_color、确保页面可被识别为安装候选（HTTPS + valid manifest + service worker）。其他都是锦上添花。
立即学习“前端免费学习笔记（深入）”；
