theme-color 必须写在 中静态 ，仅支持 #rrggbb 或 #rgb 格式，https 下 android chrome 等生效，ios safari 完全不支持。
theme-color写在哪、怎么写才被 Chrome for Android 读取
它只在 里生效，且必须是静态 HTML 中的 <meta name="theme-color" content="#4285f4">。写在 里、用 JS 动态插入、或者漏掉 name="theme-color" 属性，浏览器都会直接跳过。
-
content值只认纯十六进制格式：#rrggbb（如#4285f4）或简写#rgb（如#45f），不支持rgb()、hsl()、命名色（blue）、CSS 变量（var(--primary)）或带透明度的十六进制（#4285f480） - 多个
<meta name="theme-color">标签时，只取第一个，其余被忽略 - 建议紧贴
<title></title>后立即写，太靠后（比如在 CSS/JS 引入之后）可能被解析器跳过
为什么写了 theme-color 却没变色
不是缓存问题，而是硬性条件没满足。Chrome for Android 会静默忽略，不报错也不提示：
- 页面跑在 HTTP 下 → 必须 HTTPS 或
localhost；HTTP 环境下直接不解析 - 正在 iOS Safari 上调试 → Apple 完全不支持该标签，所有版本均忽略，状态栏永远灰白
- 网站已注册 PWA，且
manifest.json中定义了"theme_color"→ 此时优先使用 manifest 的值，HTML 中的<meta>被覆盖（仅限 PWA 启动场景） -
content值带空格或引号外多余字符，例如content=" #4285f4 "→ 整个值被判定为非法，静默失效
深色模式下怎么让地址栏“自动”换色
浏览器不会监听系统主题变化并重绘地址栏，所谓“自动”只是首次加载时匹配一次。可行做法是静态并列两个带 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"> - 用户中途切换系统主题，地址栏颜色不会更新 —— 没有事件可监听，也没有重绘机制
theme-color 和页面背景色是两回事
theme-color 控制的是浏览器 UI 层（地址栏、任务卡顶部、PWA 启动屏顶部），和页面内容完全无关。它不能替代 CSS 的 background-color：
- 设了
<meta name="theme-color">不会影响或任何 DOM 元素的显示颜色 - 设了
body { background-color: #f0f0f0 }也不会改变地址栏颜色 - 若想统一视觉，
theme-color和manifest.json中的"background_color"、"theme_color"应保持一致，否则 PWA 安装后与普通网页访问时顶部颜色割裂 - 颜色太浅（如
#ffffff）或太暗（如#000000）可能导致文字不可读；Chromium 内核会根据感知亮度自动切换图标/文字颜色，但逻辑不可控，只能手动调色验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
