如果你阅读过早前分享过的《CSS媒体查询新特性》和《给网站添加暗黑模式》相关的文章，就可能想到了今天这篇文章大致和大家要聊的是些什么东西。事实上也的确如此，但或许和想象的略有差异，因为在这篇文章和大家聊的并不是 CSS 的媒体查询，也不是教大家怎么给网站添加暗黑模式的主题。如果是这样的话，就有点对不起大家了，大家也会觉得我在不断的炒冷饭。接下来要和大家聊的虽然也和 CSS 有关联，但对于很多同学来说，还是很新，很有意思的东西。感兴趣的同学请继续往下阅读。

在《如何使用CSS实现黑暗模式和高亮模式的切换》和《给网站添加暗黑模式指南》主要围绕着如何使用CSS的技术给Web添加Dark Mode的功能。在这篇文章中我们把重点放在了React环境中，详细介绍了如何在React中实现Dark Mode的效果，另外还向大家介绍了一Darkmode.js这样的JavaScript怎样实现Dark Mode的效果。感兴趣的欢迎继续往下阅读。

给网站添加暗黑模式是随着macOS中的暗黑模式（Dark Mode）出现之后的一个热门话题，今年上半年在《如何使用CSS实现暗黑模式和高亮模式的切换》一文中就和大家一起聊了聊怎么通过CSS来实现暗黑模式和高亮模式切换。事实上，社区上有关于这方面的讨论也很多，都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题，不同的是，这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学，请继续往下阅读。

在Web技巧的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值dark和light来进行切换，这是从最底层也是最原生的解决方案，除此之外还可以通过CSS的混合模式属性来模拟。当然，除了期刊中提到的技术方案之外，还有其他的一些解决方案。今天我们就来一起学习一下，如何实现黑暗模式和高亮模式之间的切换。