🚀 浅谈 Web Dark Theme
全文约 1700 字，阅读时间约 5 分钟。
Dark Theme 已经问世好久了，不过一直没有机会去用。最近有机会在一些个人项目里面用到了深色模式。在这里简单地记录一下，希望能够给那些有需要的同学一点启发！
本文将使用基于 CSS Variable 的方案去实现 Dark Theme，并且假设你已经会了一些基础的 JavaScript 和 CSS。
如果你对 JavaScript 和 CSS 还不是很熟悉，可以去 MDN 上阅读相关的文档。
全部代码在: Github，如果对你有帮助，可以帮我点一个 Star 哦！
在开始之前，我们先声明一下我们的需求：我们希望我们的网站主题可以跟随系统主题自动切换，也允许用户手动的去切换主题。
CSS Variable
在这一部分，我会带领你一步步地去实现我们的需求，不要害怕，其实这很简单。
首先我们建立一个 HTML 文件，一个 CSS 文件，之后在 HTML 里面引入我们的 CSS 文件，并随便输入一些文字，我相信这对于你来说就是小菜一碟。
html 文件内容
我们首先要做的就是让它能够跟随我们的系统主题去更改样式，在 Light Theme 的时候显示浅色的背景和深色的字体，在Dark Theme 的时候显示深色的字体和浅色的背景。
我们现在先简单的写一点 CSS 去实现我们在 Light Theme 中的样式，你完全可以按照自己的喜好去写你喜欢的配色，下面是我比较喜欢的配色。
Light Theme
Okay, 现在我们已经完成了一部分了，下一步则是去写一些在 Dark Theme 下我们希望它如何显示（假设现在就是 Dark Theme），同样，你完全可以按照自己的喜好去写你喜欢的配色，下面是我比较喜欢的配色。
Dark Theme
细心的同学可能发现了，我们在此使用 CSS变量 的话，那么修改主题的时候只需要修改变量的值就可以了。
好，现在我们已经写完了我们的网站在 Light Theme 和 Dark Theme 下的样式。它工作起来应该是这个样子的。
Light Theme
Dark Theme
我们下一步应该做什么呢？应该是让它能够自动跟随系统主题去切换模式。想要实现这个效果，我们首先要知道系统主题是什么，对吗？
很不错，CSS 给我们提供了一个媒体查询: prefers-color-scheme，它可以告诉我们系统主题是什么。那么我们只需要根据不同的系统主题去改变 CSS变量 的值就可以了。
修改后的 CSS 文件内容：
CSS 文件内容
我们来简单解释一下增加的第7行到第13行代码。
第7行使用了我们刚才提到的那个媒体查询，后面跟着的 : dark 意思是，当系统主题为 Dark 时，会去执行第8行到第11行代码。第8行到第11行代码其实就是去覆盖 CSS变量 达到修改变量值的目的。
我们来看一下效果（我本来想放一个Gif的，但是因为体积太大了，没办法，如果你有好的办法，可以告诉我吗？）：
Light Theme
Dark Theme
现在他已经可以跟随系统主题去显示对应的模式了。
下一步我们要做的就是，用户也可以手动去更改相应的显示模式。
Okay，我们来想一下用户可以手动更改显示模式的话，那我们需要给用户一个按钮，他可以点击。在用户点击之后我们去更改相应的模式。
这很简单，我们先在 HTML 文件中添加一个按钮，并且稍微给它美化一下(框起来的内容为新增的)：
HTML 文件内容
CSS 文件内容
现在它长这个样子：
在第13行我们添加了一个按钮，我们希望用户点击这个按钮，就可以更改对应的显示模式。
那么我们只需要给这个按钮绑定一个 click 事件，因此我们需要一点点🤏🏻 Js 去实现。
哇哦，突然增加这么多内容，这也太难了吧。不用怕！我来解释一下这些内容是干什么用的。
首先在用户点击的时候我们需要知道此刻网页是 Light Theme 还是 Dark Theme, 因此前两行是为了获取此刻网页的显示模式。
接下来的 lightTheme 和 darkTheme 是保存了两种模式的 CSS变量。
之后我们为按钮添加一个 click 的事件，并添加回调函数，这个回调函数要做的事情就是在网页为 Light Theme 时，把网页切换为 Dark Theme，反之亦然。
Okay，到此为止，我们已经实现了我们的基本需求了。
不过似乎有一个问题，我们似乎无法保存用户的显示模式，也就是说如果我现在把网页设置为 Light Theme 了，我下一次进来的时候它还是会跟随系统去显示。这似乎会让用户体验不怎么好。
那么我们如何做呢？可以借助 localStorage 去保存用户的显示偏好，这就可以完美解决问题了。
修改后的 Js 如下：
JS 内容
现在我们已经完成了我们的需求，总结一下：
- 我们使用
CSS变量去定义主题 - 之后利用
媒体查询去跟随系统显示主题 - 最后给按钮绑定事件，然后改变
CSS变量的值，实现在跟随系统主题的情况下，能够手动切换主题。
其实也没有很难，是吧？动手试一下吧！
代码传送门：Github，如果对你有帮助，可以帮我点一个 Star 哦！
今天的分享到此就结束了，希望能够帮助到屏幕前的你！
