自サイトのダークモード対応

最近、いろんなサービスやアプリがダークモードに対応していっているので、流れに乗って自サイトもダークモードに対応してみました。

うーん、通常時よりめっちゃおしゃれになった気がする……。

対応方法

メディアクエリ@media (prefers-color-scheme: dark)とカスタムプロパティ（CSS変数）を組み合わせるだけで簡単にできました。

:root {
  --text: #000;
  --bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #fff;
    --bg: #000;
  }
}
body {
  color: #000;
  color: var(--text);
  background-color: #fff;
  background-color: var(--bg);
}

こんな感じでダークモード用の変数は別途@media (prefers-color-scheme: dark)の中で宣言してあげると、OSの設定で切り替えられるようになります。

IE対策

IEはカスタムプロパティとか色々対応してないので、フォールバックのために通常使用する色も一緒に書いてあげると、IEでもちゃんと見れるはず。

body {
  color: #ddd;
  color: var(--text);
  background-color: #fff;
  background-color: var(--bg);
}

IEが使えるPCを持ってなくて確認できないので、ちゃんとできてるかわからないけど…。

まとめ

input要素をどうしようかはちょっと悩んだんですが、だいたいいい感じにできた気がします。

IE用に要素毎に上書くとカスタムプロパティの良さが潰れるので、もういっそIEなんて知らないふりしたほうがいいのかもしれない。

かなめりぜ