💡 ダークモード対応

2020-09-20 /Development #CSS
この記事は最終更新日から2年以上経過しています。

最近は OS の外観モードの設定をダークにして使ってみているので、自分のブログもダークモードに対応してみました。 OSレベルで切り替えなくても右上のアイコンで切り替え可能です。 実装自体は簡単だと思っていたのですが、案外試行錯誤があったのでメモ。

  • 単純に OS の設定だけで表示を分ける場合、メディアクエリの設定のみでスタイルが切り替えられるので1 CSS Only で簡単にダークモードに対応できるのですが、前述の通り手動でオンオフを切り替える機能もつけてみようと考えだすとちょっと厄介でした
  • 画像も結構面倒2で「要所要所ではモードに応じた画像に切り替えたい」「全ての画像を両方用意するのは嫌」というのがあって、結局力技になるけど shortcode をもにょもにょして対応しました
  • 鮮やかな色系は黒地では見えにくくなり、黒地に淡い色ではあんまり映えない感じになる事も多いのでものによってはいっそグレーにするなどの強い意志が必要
  • 仕事で誰かに聞かれる前に一通り体験しておきたかったのでやってみましたが、完璧を求め出すとまだ人類には早い気がしました

バッドノウハウのまとめで簡単なスライドが作れそうなくらい知見が溜まったわりに仕事では提案できなさそうみたいな悲しい結果に終わりましたが、気をつけなきゃいけない事や選択肢などが把握出来てよかったです(といってもだいたい ここ にまとめられてました)。

あ、でもサイト全体の色を整理する事になるので、ついでに重複している変数の整理とかもできたのは良かった。


  1. prefers-color-scheme は、Chrome 76+、Firefox 67+、Chrome Android 76+、Safari 12.5+ などの主要なブラウザでサポートされています。 ↩︎

  2. grayscale(50%) みたいにするといいよみたいな話も聞きますが、白がそもそも目に痛くてダークモードにしているのに白い画像はグレースケールでは何も変わらないんですよね… ↩︎

Comment
comments powered by Disqus
Profile

石原 悠 / Yu Ishihara

デザインとプログラミングと編み物とヨーグルトが好きです。