サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていたが「Darkmode.js」というJavaScriptライブラリを用いることで簡単に実装できるとのこと。これを試してみたいのでサンプルと実装方法を以下にメモ。
Darkmode.js
公式サイト
GitHub
https://github.com/sandoche/Darkmode.js
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
サンプル
https://taitan916.info/sample/Darkmode.js/
右下のアイコンをクリックするとダークモードになる筈。
実装方法
ソースコード
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> <script> const options = { bottom: '32px', right: '32px', left: 'unset', time: '0.5s', mixColor: '#fff', backgroundColor: '#fff', buttonColorDark: '#100f2c', buttonColorLight: '#fff', saveInCookies: false, label: '', autoMatchOsTheme: true } const darkmode = new Darkmode(options); darkmode.showWidget(); </script>
ページ遷移orリロード時もモード状況を保持する場合
一度ダークモードに変更してもページ遷移やリロードした際、通常モードとして表示されるが、これを保持したい場合は以下のような形でcookieに保存させると良さそう。
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script> <script> const options = { bottom: `32px`, right: `32px`, left: `unset`, time: `0.5s`, mixColor: `#fff`, backgroundColor: `#fff`, buttonColorDark: `#100f2c`, buttonColorLight: `#fff`, saveInCookies: false, label: ``, autoMatchOsTheme: true } const darkmode = new Darkmode(options); darkmode.showWidget(); //cookieを読み取ってダークモードに変更 if( Number(Cookies.get('darkmode')) ){ document.querySelector(`.darkmode-toggle`).click(); } //アイコンクリック時にcookie保存 document.querySelector(`.darkmode-toggle`).onclick = (event) => { const cookie_value = ( darkmode.isActivated() ) ? 1 : 0; Cookies.set('darkmode', cookie_value); }; </script>
関連記事
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...
-
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...