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

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

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

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

スポンサーリンク

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

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

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

ダークモード対応内容

ダークモードに対応させる方法をまとめてみる。ついでに他のカラーテーマにもできるようにしてみる。|夕月悠里|note
経緯 ダークモードに対応したWebサービス、増えてますね。 私もPCとかスマホのテーマはダークにしていて、ダークモードがメインになってます。ずっとダークモード使っていると、白い画面がちょっとずつまぶしくなってきます。 自分が運営しているWebサイトもまぶしいなと感じてきたので、ダークモードに対応させました。その時...

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

当初は、ただ切り替えができればいいかと思い、ダークモード時の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回目から切り替わります。
細かい事なのですが、気になりますよね。

ダークモード注意点

CSSはマーカー系のデザインは視認性が全然変わってくるので、注意が必要です。

通常の場合
ダークモードの表示

マーカーに関しては色と高さを変更しました。

その他の注意点として、広告の表示を合わせるのは難しいかもしれません。
いい方法があれば、教えていただければ助かります。。。!

ダークモード対応したよ。まとめ

元々、黒ベース背景のデザインだったので、対応は簡単でした。
ダークモードの実際の利用者数とかってどうなんですかね?
言うても年配層含め全体的に見たら少ないんじゃないかと思ってます。

訪問者のダークモード対応状況をアナリティクスでも確認できたらいいのですが、たぶん見れない?
その情報もとに広告の設定もできればなんて思ったりします。

とにかく対応して思ったのは、ダークモード云々って言うより、2つのデザインを持つような感じでちょっと嬉しいです。
有機ELのスマホで見た時の黒さはやっぱ、かっこいい。

ダークモードの余談ですが、、

ダークモードにしていたら、いつからか急に入力フォームが黒くなりまして、、、
以下の内容を対応したところ、もとに戻りました!
ありがとうございます!

そういや、クロームでアクロバットを標準のうんたらかんたらにしませんかってでて、「はい」しちゃったなぁって。。。
これ対策で、input要素にCSSで背景色指定が必須なんかなと思いました。

スポンサーリンク
WEB Tips
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました