WEBページをダークモードに対応させ、切り替えスイッチを設置する

今さらではありますが、対応しました。
ダークモードに。

個人的には特に見やすいとも思わないダークモード。
なんでも明るい印象が好きなので、別にいいかって思ってました。

でも、有機ELもやけど、改めて黒を見直すと、かっこいいですよね。
ってことで、対応してみました。

このサイトのダークモード切り替え方法
ダークモード対応内容
1. 読み込み時にチェックボックスをcheckedにする
ダークモード注意点
ダークモード対応したよ。まとめ
ダークモードの余談ですが、、

このサイトのダークモード切り替え方法

単純にOSの設定でダークモードにされている方は、メインのコンテンツ箇所の背景が黒くなっているはず。

とりあえず、ダークモードの表示に変更する場合は、画面上部の切り替えスイッチ（月のマーク）、を押してもらえると切り替わるはず。
スマホ表示時は右側サイドバー展開で、上部にボタンがあるはず！

ダークモード対応内容

ダークモードに対応させる方法をまとめてみる。ついでに他のカラーテーマにもできるようにしてみる。｜夕月悠里

経緯ダークモードに対応したWebサービス、増えてますね。私もPCとかスマホのテーマはダークにしていて、ダークモードがメインになってます。ずっとダークモード使っていると、白い画面がちょっとずつまぶしくなってきます。自分が運営しているWe...

上記のページ、そのまま拝借させていただきました。
ありがとうございます！

当初は、ただ切り替えができればいいかと思い、ダークモード時のclassをjavascriptで付与して表示を変えるように作成したのですが、それだとページ遷移した時に、端末のOSでのダーク―モードの設定状況に沿った表示に戻ってしまうので、上記のリンクを参考にしローカルストレージに設定を保存する形を拝借しました。

僕が追加した内容としては、CSSはもちろんですが、inputタグのオン・オフに、labelタグを使ってます。

<label for="btn-dark-mode" class="theme-change"></label>

読み込み時にチェックボックスをcheckedにする

22.03.29追記

このサイトだとダークモードにした状態で、新しいページを開き、切り替えスイッチを押すと、1回目の押下時は切り替わらず、2回目押下で切り替わる状態でした。

というのも、
チェックボックスにチェックが入っている状態＝ダークモードなのですが、
ページを開いた時はチェックボックスにチェックが入っておらず、空押しみたいな状態になってました。。。

なので、ローカルストレージに記録している内容がダークモードの場合、以下のチェックボックスにチェックを入れる処理を追加しました。

if(localStorage.getItem('dark-mode-settings')==='dark') {
    document.body.classList.add("dark-mode");
    document.getElementById("btn-dark-mode").checked = true; //←追加した内容
}

これで、このサイト場合、ダークモードで他ページに遷移してから切り替えスイッチを押しても、1回目から切り替わります。
細かい事なのですが、気になりますよね。