皆さんこんにちは！本日は「Darkmode.js」についてご紹介していきたいと思います。
公式のドキュメントに沿って紹介を進めていきますので、下記のリンクを参照しながらご覧ください！
Darkmode.jsのURL:https://darkmodejs.learn.uno/
下記の順で解説していきます
- Darkmode.jsとは何か？
- 実装方法
- オプションの解説
それでは早速いってみましょう！！
Darkmode.jsとは？
Darkmode.jsは簡単に「ダークモード」の実装ができるJavaScriptのライブラリです。近年TwitterやInstagramに限らず、モダンなアプリケーションにはほぼ確実に実装されているダークモード。
目に強い光が送り込まれないので、深夜帯にスマホ画面を見ていても睡眠に支障が出難くていいですよね。
「アプリケーションを作ったはいいけど、ダークモード入れたい。でも難しそう...」
そう言った方でも簡単に実装できる内容になっていますので、ご安心ください！
実装方法
それでは早速実装していきましょう。
まずは簡単なhtmlファイルを作りましょう。
<!doctype html><htmlclass="no-js"lang="jp"><head><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="style.css"><script type="text/javascript"src="darkmode.js"></script></head><body><h1>Hello world!</h2><button>BUTTUN</button><script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script></body></html>cssとjsファイルを読み込んだシンプルな作りにしています。
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
こちらのコードをbodyタグの終わりに記述する事でDarkmode.jsを呼び出しています。
続いてJavaScriptファイルを見てみましょう。
functionaddDarkmodeWidget(){newDarkmode().showWidget();}window.addEventListener('load',addDarkmodeWidget);これだけでダークモードの実装は完了です。（cssファイルは省略します。）
下記のような画面になるはずです。
右下に黒い丸印が現れましたね。試しにクリックしてみましょう。
すると...
画面が暗くなり、黒いフォントだった「Hello world!」が白になっています！
ボタンの色を見ていただくとわかりますが、仕組みとしては色を反転しているだけでかなりシンプルですね。
これがダークモードです！ライトモードに戻したいときは右下の白い丸印をクリックすれば戻ります！！
とまあ、こんな感じで簡単に実装できちゃいました。
オプション解説
Darkmode.jsにはオプションも用意されています。
それらを紹介します。
constoptions={①bottom:'64px',// default: '32px'②right:'unset',// default: '32px'③left:'32px',// default: 'unset'④time:'1s',// 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: ''autoMatchOsTheme:true// default: true}constdarkmode=newDarkmode(options);darkmode.showWidget();順番に解説していきます。
①下から何px離れるかを指定しています。px数をあげればあげるほど、上の位置に固定されます。
②右から何px離れているか指定できます。今回のコードであれば「unset」になっているので特に機能はして居ません。
③左から何px離れているか指定できます。今回の場合であれば左下にダークモードの丸印が表示されることになりますね。
④モードの切り替え時間を指定できます。
⑤ダークモードの色に配合する色を選べます。
⑥ライトモードの色を指定できます。
⑦⑧モード切り替えの丸印の色を変えられます。
終わりに
いかがでしたでしょうか。皆さんもぜひダークモードを実施してよりリッチなアプリケーションを作ってみましょう！！
ちなみにダークモードは単純に色の反転を利用して実装されているので、中には反転して欲しくない要素もでてくると思います。その際の解決方法もこちらに記述しておきます。
今回の場合はボタン要素に反転して欲しくないのでそれを例に対応していきます。
<button class="darkmode-ignore">BUTTUN</button>
このように対象の要素にクラスで「darkmode-ignore」と設定してあげるだけでOKです！！