Wordpress

如果你的网站是wordpress，则可以参考以Darkmode.js为基础的插件:

Nuxt.js

如果你正在使用Nuxt.js,则可以使用下面的模块

快速使用

使用Darkmode.js给网站快速部署上暗/浅色切换。 在网站的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>

可以把文件darkmod-js.min.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();

无开关模式

darkmod可以不使用开关，直接给网页设置成暗黑模式

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

自定义css/js

  • darkmode–activated: css class, 添加到body标签中，可以自定义style
  • darkmode-ignore: css class, 忽略darkmode
  • isolation: isolate: style, 忽略darkmode
  • mix-blend-mode: difference: style, 还原到dark-mod

例子:

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

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

<span class="darkmode-ignore">😬<span>

翻译 & 详情参考: https://darkmodejs.learn.uno

--完--