超简单的网站暗黑模式，它真的超简单！

本文目录

暗黑模式 Step 1

暗黑模式 Step 2

暗黑模式 Step 3

展示效果

暗黑模式 Step 1：

如果你还没有个人网站，先简单地创建一个 HTML 文件。

 

有了网站之后，下面来实现 HTML 和 CSS。

暗黑模式 Step 2：

开始往 HTML 里添加我们想要的东西，先来添加链接 JS 和 CSS 文件的方法，就像 ADD CSS FILE和 ADD JS FILE 注释下的那样：

 

现在我们要开始创建 JS 和 CSS 文件了。你可以随意更改你的 CSS 文件，在这里，我添加了一些代码：

 

在 body 模块，我们设定默认网页背景色为白色、文本为黑色，而在 dark-mode 模块，我们将网页背景色变为黑色、文本则是白色。

好了，我们要创建 main.js 文件了，这是实现暗黑功能的关键；

 

成功创建 CSS 和 JS 文件后，你现在只用做最后一件事。

暗黑模式 Step 3：

经过上面 2 个步骤，你可能认为暗黑模式已经实现，但其实不是。来问自己一个问题：如果我的网站有多个页面要咋整？如何在每个页面启用黑暗模式而不是默认的白色背景？答案比你想的要简单得多。在每个页面的初始body tag中添加：

 

就这么简单，希望它对你有用，谢谢阅读本文^^

展示效果

 

 

最后

本号会定期分享一些技术干货、职场经验等，希望能和大家积极交流讨论，一起学习、共同进步。

记得❤️关注+点赞+收藏+评论+转发❤️