スマホやPCをダークモードに設定している方が当ブログを閲覧した時、いい感じにダークに見えるようにしてみた。
レスポンシブ設定と同じ感覚で prefers-color-scheme
を使ってダークモード用の配色をぽちぽち定義した。
@media (prefers-color-scheme: dark) { hogehoge }
ちなみにEdgeはまだ対応していないらしい。
やったことはそれだけなのだけど、配色の指定やバリエーションの数だけ書き加える必要があって、要素の少ない当ブログでもそこそこ面倒に感じた。ていうかもっと効率良い方法ありそう…。
今後スタイルを調整・追加する時には、ちゃんとダークモード・通常(ライト)モード両方で確認しなくてはいけない。ブログに限らず、この辺り楽に管理・運用できるようなUI・配色設計も求められていくのかなと思う。
埋め込んだカード(Twitterとかリンクとか)の配色の変更について良い方法がないか調べたい。
もし変な箇所があったら教えてください!