在移动互联网时代，用户对“深色模式”的需求日益增长——从手机系统到各类App，深色模式不仅能减少夜间用眼疲劳，还能节省OLED屏幕的电量。作为前端开发者，如何让网页自动跟随系统的深色/浅色模式切换？HTML5新增的标签，就是实现这一功能的“开关”。它能告诉浏览器：“我的网页支持深色/浅色模式，请根据系统设置自动切换”，配合CSS变量，可轻松打造无缝适配的多主题体验。
今天，我们就来解锁这个提升用户体验的实用标签。 的核心作用是声明网页支持的颜色方案，并让浏览器根据系统设置自动应用对应的基础样式。它解决了传统网页的一个痛点：当系统切换到深色模式时，网页若未做适配，会出现“白底黑字”与系统主题格格不入的情况，甚至导致某些原生控件（如输入框、按钮）样式混乱。
1.1 没有 color-scheme 时的问题当网页未声明color-scheme时，即使系统切换到深色模式，浏览器也会默认使用浅色样式渲染页面：
- 背景为白色，文字为黑色。
- 原生控件（如
<input>、<select>）保持浅色外观，与系统深色主题冲突。 - 可能出现“闪屏”：页面加载时先显示浅色，再通过JS切换到深色，体验割裂。
1.2 加上 color-scheme 后的变化
添加<meta name="color-scheme" content="light dark">后，浏览器会：
- 根据系统设置自动切换网页的基础颜色（背景、文字、链接等）。
- 让原生控件（输入框、按钮等）自动适配系统主题（深色模式下显示深色样式）。
- 提前加载对应主题的样式，避免切换时的“闪屏”问题。
示例：最简单的主题适配
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 声明支持浅色和深色模式 --> 5 <meta name="color-scheme" content="light dark"> 6 <title>自动适配主题</title> 7 </head> 8 <body> 9 <h1>Hello, Color Scheme!</h1> 10 <input type="text" placeholder="输入内容"> 11 </body> 12 </html>
<meta name="color-scheme" content="light"><!-- 支持深色模式 --> <meta name="color-scheme" content="dark"><!-- 同时支持浅色和深色模式（推荐） --> <meta name="color-scheme" content="light dark">