当黑夜降临：CSS prefers-color-scheme 与暗黑模式的优雅共舞
有没有那么一瞬间，你盯着屏幕，觉得刺眼的光芒像一支支无形的箭，直插你的双眼？尤其是在夜深人静的时候，周围一片漆黑，屏幕却亮得像个小太阳，恨不得把它一把摔到地上。
别担心，你不是一个人。这种痛苦，无数熬夜加班的打工人，深夜刷剧的追剧党，以及所有在黑暗环境下使用电子设备的人都深有体会。
好消息是，科技的发展，总能给我们带来希望。暗黑模式，就是这黑暗中的一盏明灯。它把刺眼的白色背景换成柔和的深色调，大大减轻了眼睛的负担。
而今天，我们要聊的是如何用CSS，让你的网站也能拥有智能切换暗黑模式的能力，让你的用户不再需要手动去设置，而是能根据他们的系统偏好，自动切换到最舒适的显示模式。
暗黑模式，不仅仅是换个颜色
很多人觉得，暗黑模式就是把背景颜色改成黑色，文字改成白色。这当然没错，但仅仅做到这一点，只能算是入门级。一个优秀的暗黑模式，应该考虑更多细节：
- 对比度: 不要一味地追求黑色，选择合适的深色调，保证文字和背景之间有足够的对比度，但又不会过于刺眼。
- 色彩饱和度: 在暗黑模式下，过高的色彩饱和度会让眼睛感到不适。适当降低饱和度，让颜色更加柔和。
- 元素层次: 通过阴影、透明度等手段，清晰地展现页面元素的层次感，避免所有元素都融为一体。
- 品牌一致性: 暗黑模式应该与你的品牌风格保持一致，而不是简单地把颜色反转。
想象一下，你正在浏览一个电商网站，在明亮模式下，商品图片色彩鲜艳，细节清晰可见，让你忍不住想立刻下单。但切换到暗黑模式后，如果商品图片仍然保持原来的亮度和饱和度，就会显得非常突兀，甚至影响你的购物体验。
一个好的暗黑模式，应该对图片进行适当的调整，降低亮度，让它们与深色的背景更好地融合。
prefers-color-scheme: 你的网站，也能读懂用户的想法
那么，如何让你的网站自动切换暗黑模式呢？答案就是 CSS 中的 prefers-color-scheme 媒体查询。
prefers-color-scheme 可以检测用户的系统是否开启了暗黑模式。如果用户开启了，那么浏览器就会应用你为暗黑模式定义的 CSS 样式。
它的用法非常简单：
/* 默认样式（明亮模式） */
body {
background-color: white;
color: black;
}
/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212; /* 深灰色 */
color: #ffffff; /* 白色 */
}
}这段代码的意思是：
- 默认情况下，页面的背景颜色是白色，文字颜色是黑色。
- 如果用户的系统开启了暗黑模式，那么页面的背景颜色会变成深灰色（
#121212），文字颜色会变成白色。
是不是很简单？只需要几行 CSS 代码，你的网站就能拥有智能切换暗黑模式的能力了。
让暗黑模式更上一层楼：进阶技巧
仅仅改变背景颜色和文字颜色，可能还不够。为了让你的暗黑模式更加完美，我们还需要掌握一些进阶技巧：
-
变量（CSS Custom Properties）: 使用 CSS 变量来管理颜色值，可以让你更方便地修改和维护暗黑模式的样式。
:root { --bg-color: white; --text-color: black; } body { background-color: var(--bg-color); color: var(--text-color); } @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #ffffff; } }这样，你只需要修改
:root中的变量值，就可以一次性地修改所有使用了这些变量的元素的颜色。 -
SVG 图标: 对于 SVG 图标，你可以使用 CSS 过滤器来调整它们的颜色，让它们在暗黑模式下也能清晰可见。
.icon { filter: invert(0%); /* 默认颜色 */ } @media (prefers-color-scheme: dark) { .icon { filter: invert(100%); /* 反转颜色 */ } }这个技巧可以让你快速地反转 SVG 图标的颜色，但需要注意的是，它可能会影响图标的细节。你可以根据实际情况，选择合适的过滤器。
-
JavaScript 辅助: 虽然
prefers-color-scheme已经很强大了，但在某些情况下，你可能需要使用 JavaScript 来进行更精细的控制。例如，你可以使用 JavaScript 来检测用户的系统偏好，并手动切换 CSS 类名，从而应用不同的样式。if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark-mode'); } else { document.body.classList.remove('dark-mode'); }这段代码会检测用户的系统是否开启了暗黑模式，如果开启了，就给
body元素添加一个dark-mode类名。然后，你就可以使用 CSS 来定义dark-mode类名的样式：body { background-color: white; color: black; } body.dark-mode { background-color: #121212; color: #ffffff; }使用 JavaScript 的好处是，你可以更灵活地控制暗黑模式的切换。例如，你可以添加一个按钮，让用户手动切换暗黑模式，并将用户的选择保存在
localStorage中，以便下次访问时自动应用。
暗黑模式的思考：不仅仅是技术
在实现暗黑模式的过程中，我们不仅仅是在编写 CSS 代码，更是在思考用户体验。一个好的暗黑模式，应该考虑到用户的需求，提供舒适的视觉体验。
- 可访问性: 暗黑模式不仅仅是为了美观，更是为了提高网站的可访问性。对于视力障碍的用户来说，暗黑模式可以减轻眼睛的负担，让他们更轻松地浏览网站。
- 用户选择: 尊重用户的选择，提供手动切换暗黑模式的选项。有些用户可能不喜欢暗黑模式，或者希望在某些情况下使用明亮模式。
- 性能: 暗黑模式的实现不应该影响网站的性能。避免使用过多的 CSS 过滤器，或者加载过大的图片。
想象一下，你正在浏览一个新闻网站，在明亮模式下，文章内容清晰易读，排版整洁，让你能够快速地获取信息。但切换到暗黑模式后，如果文章内容变得模糊不清，排版混乱，就会让你感到非常沮丧。
一个好的暗黑模式，应该保证文章内容在任何情况下都能清晰易读，排版整洁。
总结：让黑暗不再恐惧，让光明更加温暖
prefers-color-scheme 是一个强大的 CSS 媒体查询，它可以让你的网站拥有智能切换暗黑模式的能力，让你的用户在任何环境下都能获得舒适的视觉体验。
但是，暗黑模式不仅仅是换个颜色，更是一种对用户体验的思考。我们需要考虑到对比度、色彩饱和度、元素层次、品牌一致性等因素，才能打造一个真正优秀的暗黑模式。
希望这篇文章能给你带来一些启发，让你在实现暗黑模式的道路上少走弯路，让你的网站更加人性化，更加受欢迎。
现在，就拿起你的编辑器，开始你的暗黑模式之旅吧！让黑暗不再恐惧，让光明更加温暖。