前端一鍵切換深色模式

切換主題色傳統方式是切換css包獲取用less，sass定義變量控制主題色，複雜而且不易維護；
推薦一個插件 Darkmode.Js,一鍵切換深色模式

使用方法

引入Darkmode.Js，有兩種方式：

• 通過script標籤直接引入；

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>