遵循网络标准的深色模式

2026年6月12日尊重用户的操作系统设置非常简单：在CSS中使用prefers-color-scheme媒体查询。可以说，这还不够：用户还应该能够根据每个站点单独自定义他们的选择。举个例子，用户可能希望在应用程序的UI中使用深色模式，但在内容丰富的网站上阅读长篇文本时使用浅色模式。我们需要：支持用户的系统设置，作为用户首次访问我们网站时的默认设置，允许用户通过应用程序中的开关覆盖他们的系统设置。网页的颜色方案可以通过文档的<head>中的HTML元标签或通过html元素上的CSS color-scheme属性来设置。在慢速连接上，CSS加载可能需要时间，因此推荐使用元标签。当用户首次访问您的网站时，通过设置<meta name="color-scheme" content="light dark">来尊重他们的系统偏好。如果要通过您的Web应用程序或网站中的控件覆盖操作系统设置，请使用JavaScript将content属性值更新为light，以强制浅色模式，dark以强制深色模式，或light dark以还原为操作系统设置。 const metaTag = document.querySelector('[name="color-scheme"]'); const savedScheme = localStorage.getItem("colorScheme"); if (savedScheme) {metaTag.setAttribute('content', savedScheme);} btnlight.addEventListener('click', function() { metaTag.setAttribute('content', 'light'); localStorage.setItem("colorScheme", "light"); }); btndark.addEventListener('click', function() { metaTag.setAttribute('content', 'dark'); localStorage.setItem("colorScheme", "dark"); }); btnsystem.addEventListener('click', function() { metaTag.setAttribute('content', 'light dark'); localStorage.removeItem("colorScheme"); }); color-scheme会影响什么？通过light-dark() CSS函数设置的颜色、渐变或图像、系统颜色如Canvas和CanvasText、滚动条颜色、HTML元素的默认颜色如按钮、iframe样式（只要iframe文档通过元标签选择加入）使用light-dark()或prefers-color-scheme的SVG。color-scheme不会影响什么？color-scheme与prefers-color-scheme媒体查询之间存在不幸的断层。prefers-color-scheme反映了操作系统设置——无论color-scheme值如何。如果您提供在页面内切换的功能以实现深色模式，则不能采用prefers-color-scheme媒体查询。以下代码不会受到color-scheme的影响：<picture><source srcset="logo-dark.png" media="(prefers-color-scheme: dark)"/><img src="logo-light.png" alt="产品标志"/></picture>除了使用background-image外，不幸的是，没有等效于引用颜色方案的<picture>元素的方法。color-scheme将影响prefers-color-scheme媒体查询的两个例外是：iframes和SVG。以下是两个iframe，显示相同的文档。iframe内的文档正在使用prefers-color-scheme媒体查询。<iframe style="color-scheme: light;" src="/example.html"></iframe><iframe style="color-scheme: dark;" src="/example.html"></iframe>正如您在上述示例中所看到的，当在父文档中使用color-scheme: dark时，@media (prefers-color-scheme: dark)的样式被应用。相同的原理适用于SVG。这是.svg文件的内容：<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><style>circle { fill: rgb(40,40,40); } @media (prefers-color-scheme: dark) { circle { fill: rgb(216, 216, 216); } }</style><circle cx="50" cy="50" r="50"/></svg><img style="color-scheme: light;" src="/circle.svg" alt=""><img style="color-scheme: dark;" src="/circle.svg" alt="">CSS规范最近已更新，以便文档的color-scheme在所有上下文中影响媒体查询，但没有浏览器实现此功能。一些Safari注意事项：SVG中对prefers-color-scheme媒体查询的支持是在Safari 27中添加的，但color-scheme不影响媒体查询（见bug报告）。在Safari 27中添加了iframe中的prefers-color-scheme媒体查询支持，并且父文档的color-scheme确实会覆盖它，正如它应该的那样🎉。然而，其他错误仍然存在（见bug报告）。使用light-dark()处理图像和渐变。light-dark()函数最初仅限于颜色。现在可以用于渐变和图像（自Chrome/Edge版本150、Firefox版本150和Safari技术预览版起）。 .bg-gradient { background-image: light-dark(linear-gradient(15deg, #b9b6ff, #308dc6), linear-gradient(15deg, #6b7495, #001339)); } <div class="bg-gradient" style="color-scheme: light;"></div> <div class="bg-gradient" style="color-scheme: dark;"></div> 也可以在单个