分类 JavaScript 下的文章

Darkmode.Js

🌓黑暗模式/夜间模式,只需要几秒钟就可以给你的网站添加这个功能

本站已经添加,你可以看到网站左下方有个小按钮,你点击 Ta 预览以下效果吧!

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段,您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的,内置于​​ VanillaJS 中。默认情况下,它也使用 localstorage,因此您的上一次设置将被记住!

特点

  • 窗口小部件自动显示
  • 保存用户选择
  • 如果操作系统偏好的主题为深色,则自动显示Darkmode(如果浏览器支持prefers-color-scheme)
  • 可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress,则可能需要看看基于 Darkmode.js 的这些插件:


简单方法(使用JSDelivr CDN)

只需将此代码添加到您的 html 页面:

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

高级调用参数:

- 阅读剩余部分 -