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

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

平田 / U-NEXT

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


prefers-color-scheme とは

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


対応ブラウザ

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

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


デモ

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

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


対応方法

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

@media (prefers-color-scheme: dark) {
  body{
    background-color:#000;
    color: #fff;
  }
}
この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
平田 / U-NEXT
デザイナーの平田です。 個人ブログ( https://hirata.blog )とnoteの使い分けに困ってます