前端一键切换深色模式

切换主题色传统方式是切换css包获取用less，sass定义变量控制主题色，复杂而且不易维护；
推荐一个插件 Darkmode.Js,一键切换深色模式

使用方法

引入Darkmode.Js，有两种方式：

• 通过script标签直接引入；

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

• 通过node下载

npm install darkmode-js

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

可用的选项
.

  var options = {
    bottom: "32px", // 定位底部距离 - 默认: '32px'
    right: "32px", // 定位右边距离 - 默认: '32px'
    left: "unset", // 定位左边距离 - 默认: 'unset'
    time: "0.5s", // 默认动画时间: '0.3s'
    mixColor: "#fff", // 需要改变的颜色 - 默认: '#fff'
    backgroundColor: "#fff", // 背景颜色 - 默认: '#fff'
    buttonColorDark: "#262728", // 黑暗模式下按钮颜色 - 默认: '#100f2c'
    buttonColorLight: "#fff", // 日间模式下按钮颜色 - 默认: '#fff'
    saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
    label: "🌓", // 切换模式按钮图标 - 默认: ''
    autoMatchOsTheme: true // 是否自动根据系统适应模式 - 默认: true
  };

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

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

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

使用类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>