浏览器地址栏主题色（theme-color）须用<meta name="theme-color" content="#4285f4">在<head>中声明，仅Android Chrome等支持，Safari不支持；页面背景色则通过CSS的background-color设置，二者独立且不可互替。
theme-color 和 background-color 是两套完全独立的机制，不能互相替代。设了 theme-color 不会改变页面背景，设了 background-color 也不会影响地址栏颜色。
怎么设置浏览器地址栏主色调（theme-color）
它只在 <head> 里生效，且必须是 <meta name="theme-color" content="#4285f4"> 这种写法。其他位置、其他 name 值、JS 动态插入都无效。
- 只支持十六进制（
#rrggbb或#rgb）、rgb()、hsl()，不推荐用颜色名（如blue），兼容性差 - Android Chrome、Edge、Samsung Internet 支持；Safari 完全无视这个标签
- 如果页面注册了 PWA manifest，里面的
theme_color字段会覆盖theme-colormeta 标签 - 深色模式下不会自动切换——想响应
prefers-color-scheme，得用 JS 检测并手动替换meta标签内容
怎么设置页面实际背景色（background-color）
这是真正控制 DOM 元素显示颜色的 CSS 属性，和 theme-color 没半点关系。最稳妥的是直接给 body 或 html 设值。
- 别用废弃的
bgcolor属性，现代浏览器可能忽略它 - 内联写法：
<body style="background-color: #f0f0f0;">，适合快速验证 - 更推荐在
<style>或外部 CSS 中统一管理：body { background-color: #f0f0f0; } - 若背景没铺满全屏，大概率是
html和body缺少min-height: 100vh或height: 100% - 用
rgba()或hsla()时注意 alpha 通道：透明度会让底层内容（比如滚动条、iframe）透出来，容易误判为“没生效”
为什么改了 theme-color 地址栏没变色
常见原因不是代码写错，而是被更高优先级的配置覆盖或环境不支持。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 检查是否已注册 PWA manifest，它的
theme_color会强制覆盖theme-colormeta - 打开 DevTools → Application → Manifest，看当前生效的
theme_color值是什么 - 在 Safari 上测试？直接放弃——它根本不读这个标签
- 把
meta标签写在<body>里？浏览器直接忽略 - 用 JS 动态创建并插入？Chrome 大概率不重绘地址栏，得刷新页面才可能生效
怎么让主题色和背景色联动又不冲突
二者可以同色，也可以不同色——关键看设计意图。比如深色模式下，theme-color 用浅蓝保证地址栏可读，background-color 用深灰保证文字对比度。
- 用 CSS 变量统一管理颜色值，例如：
:root { --brand-primary: #4285f4; }，然后分别赋给theme-color（静态写死）和background-color（CSS 中引用） - 需要动态换肤？
theme-color必须 JS 替换meta标签，background-color可用 class 切换或修改 CSS 变量 - 别试图用
background-color的值反推theme-color——没有 API 能读取已计算的 CSS 颜色再塞进 meta 标签
最容易被忽略的一点：哪怕 theme-color 写对了、浏览器也支持，如果页面加载过程中发生跳转、PWA 安装提示弹出、或 service worker 干预了首屏渲染，地址栏配色也可能延迟甚至失败。这不是代码问题，是浏览器 UI 更新时机不可控。
