theme-color在ios safari上完全无效，apple从未实现该特性；其仅对https下chromium内核android浏览器生效，需静态置于head靠前、十六进制色值，且pwa manifest中theme_color会覆盖它。
theme-color 在 iOS Safari 上根本不会生效
别再对着 iPhone 刷新页面等颜色变了——meta name="theme-color" 在所有版本的 iOS Safari 中均被完全忽略，不是你写错了，是 Apple 压根没实现。你看到的状态栏背景始终灰白，和这个标签无关。想在 iOS 控制状态栏，唯一可行路径是：apple-mobile-web-app-status-bar-style（仅影响文字明暗）或 PWA manifest.json 中的 status_bar 字段（仅安装为 PWA 后生效），两者都和 theme-color 无任何交集。
Android Chrome 要生效，必须同时满足这四个条件
哪怕只漏一个，meta name="theme-color" 就静默失效：
- 页面必须通过
HTTPS或localhost访问；HTTP 下 Chrome 直接跳过解析 -
<meta>必须静态写死在最靠前位置，建议紧贴<title></title>后；JS 动态插入（如document.createElement('meta')）基本无效 -
content值只能是十六进制格式（如#4285f4或简写#45f），不支持rgb()、hsl()、CSS 变量、透明度（#4285f480会被截断）或命名色（red） - 若网站已注册 PWA，
manifest.json中的theme_color字段会直接覆盖 HTML 中的theme-color，且优先级更高
深色模式下“自动变色”只能靠 media 属性静态声明
浏览器不会监听 prefers-color-scheme 并动态重绘地址栏，但支持在 中并列写两个带 media 的 meta 标签，由加载时一次性匹配：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
注意：
- 两个标签都得静态存在，JS 插入无效
- 用户中途切换系统主题，地址栏颜色不会更新（无事件可监听，无重绘机制）
- 部分旧版 Android Chrome 不支持
media属性，建议额外加一个无条件 fallback：<meta name="theme-color" content="#ffffff">
为什么改了 color 还是看不清图标？不是 bug，是亮度判断逻辑
即使 theme-color 生效，状态栏图标/文字也可能突然变灰或发虚——这不是渲染错误，而是 Chromium 内核根据颜色的“感知亮度”自动切换图标配色的结果。它只看 RGB 值的 luminance，不看你主观认为“这个蓝够深”。例如 #3367d6 可能触发白字，而 #1e3a8a 才稳定出白字。没有 API 可控，只能手动调色验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
