CSSだけでWebページをダークモード対応。ついにChromeにも対応した prefers-color-scheme が超便利

prefers-color-scheme という設定値を使うことで、Webページをかんたんにダークモード対応させることが可能です。Chromeでも本日公開された76から対応されたので、かんたんに紹介します。こちらもあわせてどうぞ↓。

prefers-color-scheme とは

media queryの1種で、CSS上からユーザーがOSでダークモードをONにしているかどうかを判別できます。たとえば、普段は白い背景のWebページを、ダークモードをONにしているPCから見た場合は黒い背景にする、といった対応が行えます。

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN

対応ブラウザ

Chrome, Firefox, Safari等の主要なPCブラウザは対応が完了しました。ただし、スマートフォンのブラウザはまだまだ非対応です。

https://caniuse.com/#search=prefers-color-scheme

デモ

私のブログをprefers-color-schemeでダークモード対応させています。

WEBA

ダークモードをONにしているPCブラウザからアクセスすると、黒いデザインに変更されます。

対応方法

対応はかなりかんたんです。@media (prefers-color-scheme: dark) {}というブロックを追記し、その中にダークモード時に適応したいCSSを書くだけです。

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