DARK MODE.
ダークモードに対応
ダークモードに対応させよう
私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか!こりゃー私には危険だわってことで夜間の運転はやめました。運転していなくても田舎道のような暗いところでは何も見えませんし、暗いところでスマホを見たらスマホ以外何も見えません。むしろスマホの光も眩しすぎて目が痛いです。
そんなわけで、暗いところで明るい色のアプリやWebサイトを見るのが非常につらく、徐々にダークモードが普及してくれて大変助かっています!!ただ、このOS側で設定できるダークモードに対応しているのは、今の所有名どころのアプリばかり。ふと暗闇でWebサイトを見ると真っ白い背景色がバーンと表示され、目がやられちゃいます。
そこで、前置きが長くなりましたが、Webサイトのダークモードも増やしていこう!と布教すべく、ダークモードに関する説明をしています。
実装のポイント
クラスの切り替え
JavaScriptで.darkクラスをhtml要素(documentElement)にトグルすることで、Tailwind CSSのダークモードを切り替えます。
配色設計
ダークモード時には目に優しい配色を採用し、長時間の閲覧でも疲れにくいデザインを実現しています。
スムーズな遷移
transition効果により、モード切り替え時の色の変化がなめらかで、視覚的に心地よい体験を提供します。