四时宝库

在几秒钟内为您的网站添加黑暗模式/夜间模式

Darkmode.Js 是一款开源项目，只需要添加一段代码，就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式，让你的网站跟上 UI 界的潮流。

这个库使用css混合混合模式，以便为您的任何网站带来黑暗模式。只需复制粘贴片段，你就会得到一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。这个插件是轻量级的，内置于VanillaJS中。默认情况下，它还使用localstorage，因此您的上一个设置将被记住！

• 小部件自动出现
• 保存用户选择
• 如果OS首选主题为深色（如果浏览器支持首选配色方案），则自动显示暗模式
• 可以不使用小部件以编程方式使用

Wordpress插件

如果你正在使用Wordpress，你可能需要看看这些插件基于黑暗模式.js:

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

如何使用

Darkmode.js 很容易使用，只需复制粘贴下面的代码或使用npm包。

简单方法（使用jsdeliver CDN）

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

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.6/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

如果要使用npm就用下面的代码：

npm install darkmode-js

以下是可用的选项：

const 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();

如果不想显示小部件并以编程方式启用/禁用Darkmode，可以使用toggle（）方法。您还可以检查是否使用isActivated（）方法激活了darkmode。请在下面的示例中查看它们的实际操作。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated())

替代样式

• 当darkmode被激活时，一个CSS类darkmode--activated被添加到body标记中。您可以利用它替代样式并拥有自定义样式
• 在不想应用暗码的地方使用darkmode-ignore类
• 您还可以添加以下样式：isolation:isolate；在css中，这也会忽略暗码。
• 它也可以恢复黑暗模式与这种风格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;
}