theme-color 仅用于 Chromium 内核 Android 浏览器设置地址栏背景色，需同时满足 HTTPS/localhost、静态写入 head 前部、纯十六进制 content 值、无 PWA theme_color 覆盖四条件才生效。
meta 标签的 name="theme-color" 不是用来“美化网页”的，它只干一件事：告诉 Chromium 内核的 Android 浏览器（Chrome、Edge、Samsung Internet）——“请把地址栏背景涂成这个颜色”。iOS Safari 完全不认它，Firefox for Android 也不支持，桌面 Chrome 更不会改地址栏（只影响新建标签页预览）。别把它当跨平台主题开关用。
为什么写了 theme-color 却没变色？四个硬条件缺一不可
不是缓存问题，也不是 CSS 冲突，是浏览器直接跳过解析。必须同时满足：
- 页面运行在
HTTPS或localhost下；HTTP 协议下 Chrome 静默忽略，不报错也不 fallback -
<meta name="theme-color">必须静态写死在<head>最靠前位置，建议紧贴<title>后；JS 动态创建（document.createElement('meta')）基本无效 -
content值只能是纯十六进制格式，如#4285f4或简写#45f；rgb(66, 133, 244)、var(--primary)、#4285f480（带透明度）、red全部被拒 - 若已注册 PWA，
manifest.json中的theme_color字段会直接覆盖 HTML 中的theme-color，且优先级更高
如何适配深色/浅色模式？media 属性只能静态匹配一次
浏览器不会监听 prefers-color-scheme 并重绘地址栏，所谓“自动适配”其实是加载时一次性匹配。必须并列写两个 <meta> 标签，都静态存在于 <head> 中：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
注意：
- 两个标签都得手写进 HTML 源码，JS 插入无效
- 用户中途切换系统主题，地址栏颜色不会更新 —— 没有
change事件，也没有重绘机制 - 部分旧版 Android Chrome（如 v80 之前）不支持
media属性，务必额外加一条无条件 fallback：<meta name="theme-color" content="#ffffff">
为什么改了颜色，状态栏图标却看不清？亮度判断逻辑不可绕过
即使 theme-color 生效，Chromium 也会根据颜色的感知亮度（luminance）自动切换状态栏图标的明暗模式。它只算 RGB 值，不看你主观觉得“这个蓝够深”。例如：
立即学习“前端免费学习笔记（深入）”；
-
#3367d6可能触发白字但显示偏灰 -
#1e3a8a才更稳定出清晰白字 - 深色背景配浅色
theme-color（如#e0e0e0）容易导致 URL 文字可读性差，Chrome 的反色逻辑不可禁用或覆盖
没有 API 控制该行为，只能手动调色验证；推荐用 WCAG 对比度检查器辅助选值。
和 iOS 状态栏控制完全无关，别混用 apple-mobile-web-app-status-bar-style
theme-color 在所有版本的 iOS Safari 中均被静默忽略，Apple 从未实现。你看到的状态栏背景始终是默认灰白，和这个标签毫无关系。
iOS 上唯一可控路径只有两个：
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">：只控制文字/图标颜色（default/black/black-translucent），不改背景色，且仅在「添加到主屏幕」或 PWA 全屏模式下生效 - PWA
manifest.json中的status_bar字段：仅安装为 PWA 后生效，且只影响安装后环境
这两个和 theme-color 互不相干，可以共存，但各自只在对应平台起作用。最易被忽略的一点：即使所有条件都满足，theme-color 也只在首次加载时被读取一次；后续 JS 修改 meta.content 几乎无效，除非触发完整页面重载。
