たった4行のコードをコピペするだけで、Webサイトやブログをダークモードにする軽量JavaScript -Darkmode.js
Post on:2019年6月24日
sponsors
既存ページにたった4行のコードをコピペするだけで、そのページをダークモードにするボタンを設置する5.73Kbの軽量JavaScriptを紹介します。
他のスクリプトへの依存はなく、カスタマイズも非常に簡単。ダークモードに切り替わる際は、アニメーションでダークに覆われます。
Darkmode.js
Darkmode.js -GitHub
Darkmode.jsの特徴
Darkmode.jsはWebサイトやブログにダークモードで表示させる、VanillaJSで構築された軽量スクリプトです。
既存のWebページにコードをコピペするだけで、ダークモードのオン・オフを切り替えるウィジェットが表示されます。また、ウィジェットなしでプログラム的に使用することもできます。デフォルトでlocalstorageも使用するので、ビジターに切り替えられた最後の設定は記憶されます。
サポートブラウザ
ダークモードに切り替わる際の描画にmix-blend-modeを使用しているため、IE, Edgeはサポートされていません。
Darkmode.jsのデモ
デモではさまざまなタイプのWebページのダークモードを試せます。
Darkmode.jsの使い方
Step 1: 外部ファイルとスクリプト
当スクリプトを外部ファイルとし、スクリプトを実行します。
|
1 2 3 4 |
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script> <script> new Darkmode().showWidget(); </script> |
これだけで完了です。
オプション
ボタンの位置やカラーなどをカスタマイズできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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を利用してスタイルを上書きすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
.darkmode--activated p, .darkmode--activated li { color: #000; } .button { isolation: isolate; } .darkmode--activated .logo { mix-blend-mode: difference; } |
- darkmodeを適用したくない場合は、.darkmode-ignoreを使用してください。
- isolation: isolate;を定義した要素は、ダークモードを無視します。
- mix-blend-mode: difference;で、ダークモードを元に戻すことも可能です。
sponsors
