10个最佳黑暗模式Javascript库

黑暗主题,夜间模式或任何您想拨打的电话,对于网络和移动设备来说都是风行一时。 Web和移动应用程序平台已经采用了黑暗主题,因为它很容易被用户看到,在移动设备上消耗的功率更少,并且在夜间具有更好的可用性。因此,如果您正在寻找一个允许读者选择浅色和深色模式的开关,那么这将使您的网站变成深色模式。

Darkmode.js

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

Darkmode.js


Nightly.js

零依赖性JavaScript库,可轻松在您的网站中启用夜间模式。

Nightly.js


背景调查

根据元素背后图像的亮度,自动将其切换为较暗或较亮的版本。

背景调查


Darkmodejs

在网络上管理暗模式的实用程序包。

Darkmodejs


黑暗模式

DarkModeJS帮助您自动检测用户’s time and switch theme to 黑暗side. Lightweight and cross-browser DarkModeJS帮助您自动检测用户’时间到了,将主题切换到黑暗面。还有’重量仅为2,4kb,使用纯Javascript编写,没有任何插件和jQuery!

黑暗模式


暗模式开关

添加带有Bootstrap自定义开关的暗模式主题切换。

暗模式开关


暗光

该应用程序在夜间模式下显示任何网页,因此您可以在暗或昏暗的光线下阅读该网页,从而将压力降到最低。

暗光


暗光模式开关

关于如何通过更新颜色变量(CSS自定义属性)的值来创建深色主题以及如何将此新主题应用于Web项目的教程。

暗光模式开关


的CSS更喜欢配色方案

通过“首选配色方案”,可以遵循“媒体查询”规范在所有浏览器中使用浅色和深色配色。

的CSS更喜欢配色方案


暗模式切换

一个自定义元素,可让您轻松地在网站上放置暗模式切换或切换,这样您就可以最初加入用户’根据“ prefers-color-scheme”的偏好设置,还允许他们(可选地永久)覆盖仅针对您的网站的系统设置。

暗模式切换


发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.