Darkmode.js 为您的网站添加暗模式/夜间模式代码 CSS/JS 第1张

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

特点

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

WordPress 插件

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

Darkmode插件

简单使用:使用 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;
}

 

发表评论

后才能评论