暗黑模式是网站颇受欢迎的功能，用HTML、CSS、JS即可实现。但为什么你没有在你的个人网站实现暗黑功能呢？只要这简单的三个步骤，你就可以拥有暗黑模式。实操开始！（译：并不是所有的人都会CSS，所以这是为什么我会翻译本文的原因，它真的超简单！）
本文目录暗黑模式Step1
暗黑模式Step2
暗黑模式Step3
展示效果
暗黑模式Step1：如果你还没有个人网站，先简单地创建一个HTML文件。
!--!DOCTYPEhtmlheadtitleDarkModeFeature/titlemetacharset="UTF-8"metahttp-equiv="Content-type"content="text/html;charset=UTF-8"metaname="viewport"content="width=device-width,initial-scale=1.0"/headbodybody/html
有了网站之后，下面来实现HTML和CSS。
暗黑模式Step2：开始往HTML里添加我们想要的东西，先来添加链接JS和CSS文件的方法，就像ADDCSSFILE和ADDJSFILE注释下的那样：
!--!DOCTYPEhtmlheadtitleDarkModeFeature/titlemetacharset="UTF-8"metahttp-equiv="Content-type"content="text/html;charset=UTF-8"metaname="viewport"content="width=device-width,initial-scale=1.0"!--ADDCSSFILE--linkrel="stylesheet"href=""!--ADDJSFILE--scriptsrc=""/script/headbodybody/html
现在我们要开始创建JS和CSS文件了。你可以随意更改你的CSS文件，在这里，我添加了一些代码：
/**/body{background-color:white;color:black;}.dark-mode{background-color:black;color:white;}在body模块，我们设定默认网页背景色为白色、文本为黑色，而在dark-mode模块，我们将网页背景色变为黑色、文本则是白色。
好了，我们要创建文件了，这是实现暗黑功能的关键；
//(){constwasDarkmode=('darkmode')==='true';('darkmode',!wasDarkmode);constelement=;('dark-mode',!wasDarkmode);}functiononload(){('dark-mode',('darkmode')==='true');}成功创建CSS和JS文件后，你现在只用做最后一件事。
暗黑模式Step3：经过上面2个步骤，你可能认为暗黑模式已经实现，但其实不是。来问自己一个问题：如果我的网站有多个页面要咋整？如何在每个页面启用黑暗模式而不是默认的白色背景？答案比你想的要简单得多。在每个页面的初始bodytag中添加：
onload="onload()"
就这么简单，希望它对你有用，谢谢阅读本文^^
展示效果最后，欢迎优秀的你加入HelloGitHub的「译文亦舞」系列，让你的才华舞动起来！把优秀的文章分享给更多的人。要求：
平时浏览GitHub、开源、编程、程序员等英文资讯和文章
想把自己阅读到优秀的英文文章分享给更多的人
翻译准确但不是直翻或机翻
保证每月至少翻译或校正1篇高质量文章
了解Markdown和排版规则
联系我
免责声明：本文章如果文章侵权，请联系我们处理，本站仅提供信息存储空间服务如因作品内容、版权和其他问题请于本站联系