手軽にダークモードを導入できるシンプルなスクリプト・「Darkmode.Js」

Darkmode.Js

Darkmode.Jsは手軽にダークモードをWebサイトに導入できるシンプルなスクリプトです。非依存で非常に軽量ですが、要はmix-blend-modeを使うので汎用性は高くはありません。

dev.toの投稿を元に作成したそうです。ブレンドモードを使う事で、汎用性は低いものの、手軽に簡単にダークモードを導入できます。

以下にサンプルを用意しました。

動作サンプル

右下にトグルボタンが確認できます。CDNを使えば数行で済みます。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
 new Darkmode({ label: '🌓' }).showWidget();
</script>

スクリプトを読み込んで初期化、セッティングするだけ。以下のようなオプションが利用できます。

var options = {
  bottom: '64px', // ボタンの位置
  right: 'unset', // ボタンの位置
  left: '32px', // ボタンの位置
  time: '0.5s', // エフェクト時間
  mixColor: '#fff', // ダークテーマのベースカラー？
  backgroundColor: '#fff',  // ライトテーマの背景色
  buttonColorDark: '#100f2c',  // ボタンの色、ダークモード時
  buttonColorLight: '#fff', // ボタンの色、ライトモード時
  saveInCookies: false, // cookie保存の有無
  label: '🌓' // ボタンのラベル
}

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

WebサイトのCSSによってはうまく動作しませんがこの手軽さは良いですね。ライセンスはMITです。

Darkmode.Js