网页暗黑模式js插件 Darkmode.Js

JavaScript

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

我受到这篇文章的启发：https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm

特征

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

示范

在这些网站上查看演示（右下角有一个按钮，只需按一下即可！）：

  • 在这个网站上
  • https://tradivegan.com（带有自定义标签）
  • https://what.toeat.in（无自定义标签）
  • https://www.kanbanote.com（无窗口小部件，一旦登录）
  • https://www.sandoche.com（带有自定义标签）

WordPress插件

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

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

使用方法

Darkmode.js非常易于使用，只需复制粘贴以下代码或使用npm包即可。

way简单方法（使用JSDelivr CDN）

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

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

使用NPM

npm install darkmode-js

然后添加以下javascript代码：

import Darkmode from 'darkmode-js';
new Darkmode().showWidget();

Options️选项

以下是可用的选项：

var options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

方法

如果您不想显示小部件并以编程方式启用/禁用暗模式，则可以使用方法toggle()。您还可以检查是否通过方法激活了暗模式isActivated()。在下面的示例中看到它们的实际效果。

const darkmode = new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // will return true

覆盖样式

  • darkmode--activated激活暗模式后，会将CSS类添加到body标签。您可以利用它来覆盖样式并具有自定义样式
  • 使用类darkmode-ignore，你不希望应用darkmode
  • 您还可以添加此样式：isolation: isolate;在CSS中，这也将忽略darkmode。
  • 也可以使用这种样式还原暗模式 mix-blend-mode: difference;

例子

.darkmode--activated p, .darkmode--activated li {
color: #000;
}

.button {
isolation: isolate;
}

.darkmode--activated .logo {
mix-blend-mode: difference;
}
<span class="darkmode-ignore">😬<span>

除错

如果它不起作用，则可能必须添加以下代码，但这将使要覆盖的类无效。

.darkmode-layer, .darkmode-toggle {
z-index: 500;
}

浏览器兼容性

该库使用CSS mix-blend-mode: difference;来提供暗模式。它可能与所有浏览器都不兼容。因此，该小部件已隐藏在Internet Explorer和Edge中。prefers-color-scheme: dark如果操作系统偏好的主题是黑暗的，该库还用于自动启用黑暗模式。

在此处检查兼容性：

  • https://caniuse.com/#search=mix-blend-mode
  • https://caniuse.com/#search=prefers-color-scheme（自动激活暗模式）

发展历程

yarn build或npm run build-在该lib文件夹下生成您的图书馆的生产版本
yarn dev或npm run dev-生成库的开发版本并运行观察程序
yarn test或npm run test-运行测试the
yarn test:watch或npm run test:watch-与上述相同，但处于观看模式

来自：https://darkmodejs.learn.uno/