首页 网络技术
  1. 正文

2行代码给网页添加黑暗模式(夜间模式)开关

Darkmode.Js

  • 黑暗模式/夜间模式,只需要几秒钟就可以给你的网站添加这个功能。本站已经添加,你可以看到网站左下方有个小按钮,你点击 Ta 预览以下效果吧!

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

特点

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

简单方法(使用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>

本文标题:2行代码给网页添加黑暗模式(夜间模式)开关
本文链接:http://www.qqooo.cn/post/1496.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 feelym@88.com 处理,谢谢!