Darkmode.js 为您的网站添加暗模式/夜间模式代码

该库使用 cssmix-blend-mode为您的任何网站带来暗模式。只需复制粘贴片段，您将获得一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。该插件是轻量级的，内置于​​ VanillaJS 中。默认情况下，它还使用 localstorage，因此您的最后设置将被记住！

特点

• 小工具自动出现
• 保存用户选择
• 如果操作系统首选主题为深色，则自动显示深色模式（如果浏览器支持prefers-color-scheme）
• 可以在没有小部件的情况下以编程方式使用

WordPress 插件

如果你正在使用 WordPress，你可以使用这个基于 Darkmode.js 的插件：

[lixui_button link="https://wordpress.org/plugins/blackout-darkmode-widget/" variation="red"]Darkmode插件[/lixui_button]

简单使用：使用 JSDelivr CDN

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

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

选项参数

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--activated当暗模式被激活时，一个 CSS 类被添加到 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;
}