meta 标签 name="theme-color" 属性在移动端浏览器 UI 染色中的优先级-html教程-PHP中文网

android chrome 中 theme-color 优先级：manifest.json 的 theme_color > html meta 标签；ios safari 完全不支持；深色模式需静态并列 media 查询标签；亮度自动反色由 chromium 内核根据 rgb 值计算决定。

$meta 标签 name=\$

theme-color 在 Android Chrome 中的优先级规则

HTML 中的 meta name="theme-color" 不是最终决定者，它只在没有更高优先级来源时才生效。Android Chrome（及 Edge、Samsung Internet）会按固定顺序读取主题色：先查 PWA manifest.json 中的 theme_color 字段，命中即停；未定义或解析失败，才 fallback 到 HTML 的 meta 标签。

这意味着哪怕你写了 <meta name="theme-color" content="#ff0000">，只要 manifest.json 存在且含 "theme_color": "#00ff00"，地址栏就一定是绿色——HTML 标签被完全忽略，连 warning 都不报。

manifest.json 必须通过 <link rel="manifest" href="/manifest.json"> 正确引入，路径 404 或 MIME 类型错误（如返回 text/html）会导致 fallback
theme_color 值支持十六进制、rgb()、rgba()（alpha 被截断），但不支持 CSS 变量或命名色
若 manifest 同时定义了 background_color 和 theme_color，前者只用于启动屏，后者才控制地址栏

iOS Safari 完全无视 theme-color 的事实

别在 iOS Safari 上调试 meta name="theme-color"——它从 iOS 10 到最新版均未实现该标准，不是兼容性问题，是 Apple 根本没解析这个标签。你在 iPhone 上反复刷新、清缓存、换颜色值，状态栏背景始终灰白或继承系统默认。

想影响 iOS 状态栏，只有两条路可走，且都和 theme-color 无关：

<meta name="apple-mobile-web-app-status-bar-style" content="black">：仅控制文字/图标明暗（default/black/black-translucent），不改背景色，且只在「添加到主屏幕」或 PWA 全屏模式下生效
PWA manifest 中的 status_bar 字段（非标准，仅 Safari 支持）：需配合 apple-mobile-web-app-capable=yes，且只在安装后启动时起作用

media="(prefers-color-scheme)" 的静态匹配机制

浏览器不会监听系统主题切换并重绘地址栏，所谓“深色模式适配”只是加载时一次性匹配。你必须在中静态并列写两个 meta 标签，不能靠 JS 插入，也不能只写一个带 media 的：

仿UC浏览器官方网站全屏jQuery幻灯片

下载

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff"><!-- fallback for old Android Chrome -->

旧版 Android Chrome（如 v80 之前）不支持 media 属性，所以 fallback 是必需的。用户中途切换深浅色模式，地址栏颜色不会变——没有 prefers-color-scheme change 事件，也没有重绘触发点。