如何让网站支持暗黑模式/夜间模式？

为了保护眼睛，手机的夜间模式大家都不陌生了，许多网站也支持开启暗黑模式。觉得很酷，所以也想让自己的博客网站实现支持暗黑模式/正常模式自由切换。

一、简单一行代码，为网站开启暗黑模式支持

只需将以下代码加入网页 </body>之前即可。网页右下方将出现一个可切换正常模式或暗黑模式的按钮。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

Darkmode.js 使用 CSS mix-blend-mode 将暗黑模式带入任何网站，

演示网址：https://darkmodejs.learn.uno/

我在用 Typecho 博客程序搭建的网站上成功实现，但 WordPress 博客上没有作用，原来它还是需要插件来实现。

二、WordPress 则需要基于 Darkmode.js 的这些插件

• https://wordpress.org/plugins/blackout-darkmode-widget/

• https://wordpress.org/plugins/wp-dark-mode/

我推荐使用后者 WP Dark Mode，不仅可实现网站前端的暗黑模式，而且后台撰写文章窗口也支持开启暗黑模式。而前者似乎是对网页的反色处理，对图片的显示非常不友好。

网站演示：https://www.maqingxi.com/

因切换按钮与返回顶部按钮的位置重叠，我把按钮放在了左下角。

如果有不用插件的方法，欢迎广大同好留言赐教。