网页主题颜色需用CSS变量配合prefers-color-scheme媒体查询控制页面内容，theme-color仅影响浏览器UI（如地址栏）；iOS Safari完全忽略theme-color，CSS中需在:root定义变量并用@media覆盖，同时声明color-scheme告知浏览器适配原生控件。
网页主题颜色不是靠单个 HTML 属性就能“设置”的，theme-color meta 标签只影响浏览器 UI（如地址栏、标签页顶部），不控制页面内容颜色 —— 想改文字、背景、按钮等，必须用 CSS。
设置浏览器 UI 主题色用 <meta name="theme-color">
这个标签告诉移动端浏览器（Chrome、Edge、Samsung Internet 等）该用什么颜色渲染地址栏、状态栏或桌面图标背景。它不改变网页本身样式，但对用户体验很关键：
- 必须放在
<head>里，且在<title>之后、其他资源之前 - 值只能是纯色（
#rrggbb、rgb()、hsl()），不支持透明度（rgba()会被忽略） - 深色模式下，部分浏览器会自动降级为浅色 fallback，所以建议搭配
media属性做区分：<meta name="theme-color" content="#2575fc" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#18191a" media="(prefers-color-scheme: dark)"> - 桌面端基本不响应此标签，别指望它让 Firefox 或 Safari 的标签页变色
真正控制页面主题色得靠 CSS 变量 + prefers-color-scheme
想让整个页面随系统切换亮/暗色，硬写两套 class 太重，推荐用 CSS 自定义属性（变量）配合媒体查询：
- 先在
:root定义基础变量，比如--bg-primary、--text-primary - 用
@media (prefers-color-scheme: dark)覆盖这些变量值 - 所有样式都用
var(--bg-primary)引用，避免重复写死颜色 - 注意：变量本身不触发重绘，但修改后所有引用它的样式会自动更新，性能友好
- 示例片段：
:root {<br> --bg-primary: #ffffff;<br> --text-primary: #333333;<br>}<br>@media (prefers-color-scheme: dark) {<br> :root {<br> --bg-primary: #121212;<br> --text-primary: #e0e0e0;<br> }<br>}<br>body {<br> background-color: var(--bg-primary);<br> color: var(--text-primary);<br>}
color-scheme CSS 属性的作用和限制
color-scheme 不是设颜色，而是“声明你支持哪些配色方案”，让浏览器知道能否安全地自动调整原生控件（<input>、<button>、滑块等）的默认外观：
立即学习“前端免费学习笔记（深入）”；
- 写在
:root上表示全站支持：:root { color-scheme: light dark; } - 也可以限定局部，比如表单强制浅色：
.form-area { color-scheme: light; } - 它不会改你的自定义 CSS，也不会影响
background-color或color值 —— 那些还得靠变量或媒体查询 - 如果没声明，某些浏览器（尤其 Safari）可能在深色模式下仍用浅色原生控件，导致对比度极低甚至不可读
容易被忽略的兼容性与调试点
主题色逻辑看似简单，实际落地常卡在几个细节上：
-
theme-color在 iOS Safari 上完全无效（它只认<meta name="apple-mobile-web-app-status-bar-style">，且仅限 PWA） - CSS 变量无法被内联
style属性读取（<div style="background: var(--bg-primary)">不生效），必须走外部或内部样式表 - 某些旧版 Android WebView 忽略
prefers-color-scheme，需加 JS 检测兜底：window.matchMedia('(prefers-color-scheme: dark)').matches - 字体抗锯齿、阴影、border-color 等常被遗忘，全链路主题化要检查所有视觉层，不能只动 background 和 color
