HTML5 的 theme-color meta 标签仅在 Android Chrome/Edge/Samsung Internet（Chromium 内核）、HTTPS 或 localhost 环境下生效，不支持 iOS Safari；需静态写入 head、十六进制色值、非动态注入，PWA 中优先读取 manifest.json。
在 HTML5 中配置 meta 标签设置移动端浏览器的网页主题色，核心是使用 name="theme-color"，但它只在特定条件下生效，并非所有设备都支持。
哪些浏览器和环境真正支持 theme-color
该标签仅对以下场景有效：
- Android 系统上的 Chrome、Edge、Samsung Internet 浏览器（必须基于 Chromium 内核）
- 页面必须通过 HTTPS 协议访问，或运行在
localhost下；HTTP 环境下会被静默忽略 - PWA 安装后也支持，但此时优先读取
manifest.json中的theme_color字段，会覆盖 HTML 中的 meta 标签 - iOS Safari 完全不支持，无论怎么写都不会改变状态栏背景色
- Firefox for Android、桌面版 Chrome 均不渲染地址栏颜色
正确写法与硬性要求
要让标签起作用，必须同时满足四个条件：
-
<meta name="theme-color" content="#4285f4">必须静态写在<head>内，且位置靠前——建议紧贴<title>标签之后 -
content值只能是纯十六进制格式，例如#4285f4或简写#45f；不支持rgb()、hsl()、命名色（如red）、CSS 变量或带透明度的写法（如#4285f480） - 不能用 JavaScript 动态插入，必须是 HTML 源码中直接存在的标签
- 确保网站未注册 PWA，或已注册但
manifest.json中未定义theme_color字段
适配深色/浅色模式的写法
浏览器不会监听系统主题变化并实时更新，但支持通过 media 属性做加载时的静态匹配：
立即学习“前端免费学习笔记（深入）”；
- 并列写两条
meta标签：<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)"> - 为兼容旧版 Android Chrome（不识别
media），建议额外加一条无条件 fallback：<meta name="theme-color" content="#ffffff"> - 所有标签都必须写死在 HTML 的
<head>中，不能由 JS 注入
颜色选择与图标清晰度注意事项
主题色不仅影响背景，还会影响状态栏图标的显示效果：
- Chromium 内核会根据颜色的感知亮度（luminance）自动切换图标配色（白或黑），太亮（如
#ffffff）或太暗（如#000000）可能导致图标不可见 - 推荐选用中等明度的品牌色，例如
#3a7ebf或#2c3e50，兼顾可读性与品牌一致性 - 若需控制 iOS 状态栏文字颜色（仅限添加到主屏幕或 PWA 全屏模式），可用：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
可选值为default、black、black-translucent，但无法修改背景色
