LOGzeudon with はてなブログ

名古屋で働いているWebデザイナーのブログです

当ブログをCSSでダークモード対応してみた

スマホやPCをダークモードに設定している方が当ブログを閲覧した時、いい感じにダークに見えるようにしてみた。

f:id:rokuzeudon:20191230162339g:plain

レスポンシブ設定と同じ感覚で prefers-color-scheme を使ってダークモード用の配色をぽちぽち定義した。

@media (prefers-color-scheme: dark) {
  hogehoge
}

developer.mozilla.org

ちなみにEdgeはまだ対応していないらしい。

やったことはそれだけなのだけど、配色の指定やバリエーションの数だけ書き加える必要があって、要素の少ない当ブログでもそこそこ面倒に感じた。ていうかもっと効率良い方法ありそう…。

今後スタイルを調整・追加する時には、ちゃんとダークモード・通常(ライト)モード両方で確認しなくてはいけない。ブログに限らず、この辺り楽に管理・運用できるようなUI・配色設計も求められていくのかなと思う。

埋め込んだカード(Twitterとかリンクとか)の配色の変更について良い方法がないか調べたい。

もし変な箇所があったら教えてください!