CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう！

2021年01月24日

この記事は約1分で読めます。

海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。
きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。
CSSだけでできちゃうんだ！
ダークモードに対応したい時は、下のCSSをコピペして使ってね！

CSS

@media (prefers-color-scheme: dark) {
  // ここにデバイス設定が「ダークモード」の時の記述をします。
  body {
    background: #000;
    color: #fff;
  }
}

CSSのメディアには、レスポンシブでの記述以外にもこんな使い方があるんだ。
ダークテーマの時は「prefers-color-scheme: dark」で、あまり使うことが無いけど元々の明るいテーマの時は「prefers-color-scheme: light」でメディアクエリすれば、デバイスの画面設定と同期できちゃうよ！