Darkmode.js
『Darkmode.js』でダークモード入れてみました。
Sample
See the Pen vYKgEVE by sarap422 (@sarap422) on CodePen.
head
<head><!-- Bootstrap CDN --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><!-- darkmode-js CSS --><linkrel="stylesheet"href="js/darkmode-js/darkmode-js.css"></head>/body
<!-- 疑似要素 --><spanclass="gluttony-Sword-bs badge"><i></i></span><!-- jquery + Bootstrap CDN --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><!-- darkmode-js + function（CDN + option設定） --><script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script><script src="js/darkmode-js/darkmode-js-function.js"></script></body>darkmode-js-function.js
// option設定varoptions={// 左端に置くbottom:'-17px',// default: '32px'right:'unset',// default: '32px'left:'-17px',// default: 'unset'darkmode-js.css
.gluttony-Sword-bsi:after{display:inline-block;padding:0.25em0.5em;font-size:90%;font-weight:600;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:0.4rem;content:"Light";color:#212529;background:#ffc83d;}.darkmode--activated.gluttony-Sword-bsi:after{font-weight:normal;content:"Dark";color:#fff;background:#757575;}要するに「jQuary」「Bootstrap」「darkmode-js」本体はCDN読み込み、
『darkmode-js-function.js』は、デフォルトだと右下で邪魔だったので
option設定で左下に動かして＜script＞＜/script＞は別で読み込み、
そのままだと意味不明なので、疑似要素で「Light」「Dark」書きましたみたいな
お手軽ダークモードです。
『Bootstrap Icons』さんや『Bootstrap Toggle』さんというのも
CDNで使えるみたいですので、そちらを使えばもう少し見栄えよくなるかもですね。
Bootstrap Icons
https://icons.getbootstrap.com/icons/toggle-on/
Bootstrap Switch Button
https://gitbrent.github.io/bootstrap4-toggle/
参考
- Darkmode.Jsを使う - Webクリエイターボックス
https://www.webcreatorbox.com/tech/dark-mode
「prefers-color-scheme」ではないので、
スマホのユーザー設定は反映されなさそうですけど、
「prefers-color-scheme」絡めると今度はページ読み込みのたびに、
『Darkmode.Js』がリセットされそうで、結構大変そうだったので今回はやめました。
CSSのfilterプロパティとJavaScriptで手軽にダークモードに切り替える | Free Style
https://blanche-toile.com/web/css-filter-darkmode
メディアクエリ
@media(prefers-color-scheme:dark){:root--dark-setting:darkmode--activated;}みたいにしたらいけそうな気もするのですけど、
たぶんこれからは、SCSSの$変数をメインで使いそうな気がしますので
とりあえずはこんな感じなのでした。