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です。