HTML怎么做主题色_html theme-color主题色设置方法保姆级教程

作者：袖梨 2026-07-21

theme-color 是 HTML 中仅用于通知浏览器 UI（如地址栏）主色调的元标签，不控制页面样式，必须写在 <head> 中且格式固定，不支持动态修改或 CSS/JS 控制，Safari 不支持，PWA manifest 优先级更高。

theme-color 是 HTML 中用于告诉浏览器（尤其是移动端）“当前页面主色调是什么”的元信息，它不控制网页内任何元素的样式，只影响地址栏、标签页、书签栏等浏览器 UI 的配色。设了不一定生效，不设则一定没效果。

theme-color 只在 `<meta>` 里设置，不能用 CSS 或 JS 动态改

它必须写在 <head> 里，格式固定为：<meta name="theme-color" content="#4285f4">。浏览器只认这个 exact name 和 exact location —— 写在 <body> 里无效，用 document.querySelector('meta').setAttribute() 动态插入也基本不会触发重绘。

content 值只接受十六进制（#rrggbb 或 #rgb）、RGB（rgb(66, 133, 244)）或颜色名（如 blue），但颜色名兼容性差，不推荐
Android Chrome、Edge、Samsung Internet 支持较好；Safari 完全忽略该 meta 标签
如果页面有 PWA manifest，theme_color 字段会覆盖 theme-color meta，优先级更高

和 CSS `background-color` 完全是两回事，别混用

有人以为设了 theme-color 就能顺便把 body 背景也染成同色，这是错的。它对页面内任何元素无影响。你看到的“页面背景变色”，其实是你自己另外写的 body { background-color: #4285f4; } 在起作用。

theme-color：仅通知浏览器 UI，不可继承、不可伪类、不可媒体查询响应
background-color：控制 DOM 元素渲染，可响应式、可动画、可被 JS 修改
两者值可以不同——比如深色主题下，theme-color 用浅蓝（让地址栏易读），body 用深灰（保证内容可读）

深色模式下 `theme-color` 不自动切换，得手动处理

浏览器不会根据 @media (prefers-color-scheme: dark) 自动换 theme-color。如果你希望深色模式下地址栏也变暗，必须用 JS 检测并替换 meta 标签：

立即学习“前端免费学习笔记（深入）”；

const themeMeta = document.querySelector('meta[name="theme-color"]');if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {  themeMeta.content = '#1e1e1e';} else {  themeMeta.content = '#ffffff';}