网页主题颜色需用CSS变量配合prefers-color-scheme媒体查询控制页面内容，theme-color仅影响浏览器UI（如地址栏）；iOS Safari完全忽略theme-color，CSS中需在:root定义变量并用@media覆盖，同时声明color-scheme告知浏览器适配原生控件。

网页主题颜色不是靠单个 HTML 属性就能“设置”的，theme-color meta 标签只影响浏览器 UI（如地址栏、标签页顶部），不控制页面内容颜色 —— 想改文字、背景、按钮等，必须用 CSS。

设置浏览器 UI 主题色用

这个标签告诉移动端浏览器（Chrome、Edge、Samsung Internet 等）该用什么颜色渲染地址栏、状态栏或桌面图标背景。它不改变网页本身样式，但对用户体验很关键：

• 必须放在 里，且在 之后、其他资源之前
• 值只能是纯色（#rrggbb、rgb()、hsl()），不支持透明度（rgba() 会被忽略）
• 深色模式下，部分浏览器会自动降级为浅色 fallback，所以建议搭配 media 属性做区分：
  
  
• 桌面端基本不响应此标签，别指望它让 Firefox 或 Safari 的标签页变色

真正控制页面主题色得靠 CSS 变量 + prefers-color-scheme

想让整个页面随系统切换亮/暗色，硬写两套 class 太重，推荐用 CSS 自定义属性（变量）配合媒体查询：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 先在 :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 不是设颜色，而是“声明你支持哪些配色方案”，让浏览器知道能否安全地自动调整原生控件（、、滑块等）的默认外观：

• 写在 :root 上表示全站支持：:root { color-scheme: light dark; }
• 也可以限定局部，比如表单强制浅色：.form-area { color-scheme: light; }
• 它不会改你的自定义 CSS，也不会影响 background-color 或 color 值 —— 那些还得靠变量或媒体查询
• 如果没声明，某些浏览器（尤其 Safari）可能在深色模式下仍用浅色原生控件，导致对比度极低甚至不可读

容易被忽略的兼容性与调试点

主题色逻辑看似简单，实际落地常卡在几个细节上：

• theme-color 在 iOS Safari 上完全无效（它只认 ，且仅限 PWA）
• CSS 变量无法被内联 style 属性读取（
  不生效），必须走外部或内部样式表
• 某些旧版 Android WebView 忽略 prefers-color-scheme，需加 JS 检测兜底：window.matchMedia('(prefers-color-scheme: dark)').matches
• 字体抗锯齿、阴影、border-color 等常被遗忘，全链路主题化要检查所有视觉层，不能只动 background 和 color