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

既存ページにたった4行のコードをコピペするだけで、そのページをダークモードにするボタンを設置する5.73Kbの軽量JavaScriptを紹介します。

他のスクリプトへの依存はなく、カスタマイズも非常に簡単。ダークモードに切り替わる際は、アニメーションでダークに覆われます。

デモのキャプチャデモのキャプチャ

Darkmode.js
Darkmode.js -GitHub

Darkmode.jsの特徴

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

デモのキャプチャ

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

サポートブラウザ

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

サイトのキャプチャ

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

Darkmode.jsのデモ

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

デモのキャプチャ

デモページ

デモのキャプチャ

デモページ

デモのキャプチャ

デモページ

Darkmode.jsの使い方

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

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

これだけで完了です。

オプション

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

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

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

  • darkmodeを適用したくない場合は、.darkmode-ignoreを使用してください。
  • isolation: isolate;を定義した要素は、ダークモードを無視します。
  • mix-blend-mode: difference;で、ダークモードを元に戻すことも可能です。

sponsors

top of page

©2019 coliss