醒游网

当前位置: 首页 » 网站日记 » 如何让网站支持暗黑模式/夜间模式?

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

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

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

只需将以下代码加入网页 </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 的这些插件

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

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

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

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

猜你喜欢
用户评论
  1. 你现在用的夜间插件是哪个?我折腾过但是效果不好

  2. 😎 主题自带,就不折腾了。

  3. 这黑色底是真的黑,暗黑模式没写错。

要发表评论,您必须先登录/注册
本类排行