たった4行のコードをコピペするだけで、Webサイトやブログをダークモードにする軽量JavaScript -Darkmode.js

Post on:2019年6月24日

Darkmode.jsの特徴

Darkmode.jsはWebサイトやブログにダークモードで表示させる、VanillaJSで構築された軽量スクリプトです。

既存のWebページにコードをコピペするだけで、ダークモードのオン・オフを切り替えるウィジェットが表示されます。また、ウィジェットなしでプログラム的に使用することもできます。デフォルトでlocalstorageも使用するので、ビジターに切り替えられた最後の設定は記憶されます。

サポートブラウザ

ダークモードに切り替わる際の描画にmix-blend-modeを使用しているため、IE, Edgeはサポートされていません。

mix-blend-modeのサポートブラウザ

Darkmode.jsのデモ

デモではさまざまなタイプのWebページのダークモードを試せます。

デモページ

Darkmode.jsの使い方

Step 1: 外部ファイルとスクリプト

当スクリプトを外部ファイルとし、スクリプトを実行します。

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

new Darkmode().showWidget();

</script>

これだけで完了です。

オプション

ボタンの位置やカラーなどをカスタマイズできます。

var 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: ''
}

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

var 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: ''

}

const darkmode = new Darkmode(options);

darkmode.showWidget();

ダークモード時のスタイル

ダークモードがアクティブ化されると、bodyタグに.darkmode--activatedが追加されます。このclassを利用してスタイルを上書きすることができます。

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

.button {
  isolation: isolate;
}

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