【ダークモード】CSSスタイルを切り替える方法

こんにちはtakosanです。

WindowsにもMacにも、OSの設定でダークテーマが利用できるようになって久しいですね。

今回はそんなダークモードの設定に合わせてwebページのスタイリングを変更させたい場合の便利な方法をご紹介します。

ダークモードOn/Offでスタイルを切り替える方法

結論からいうと、CSSのメディアクエリで一発で判定&出し分けできます。

@media (prefers-color-scheme: dark){
  /* ダークモードのスタイル */
  p{
    color:#fff;
  }
}

こちらのメディアクエリは、

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

MDN web docs

というやつです。ドキュメントはこちら↓

MDN Web Docs

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

これを使うだけで簡単にテーマカラーに対応させたスタイルの切り替えが可能になります。

テーマカラーが「ライト」だったら？

ちなみに、テーマカラーがダークではなく「ライト」だった場合の書き方は下記のようになります。

@media (prefers-color-scheme: light){
  /* テーマカラーが明色の場合 */
  p{
    color:#333;
  }
}

実際のデモ（サンプル）

ダークモードなら背景が黒く文字が白になるはずです。

そうでなければ背景が白く、文字が黒くなるはずです。

See the Pen Untitled by yukiwebcreate (@Yukiwebcreate) on CodePen.

もしよければOSの個人設定からテーマカラーを変更してみてみてください。

まとめ

一行で切り替えができるなんて素敵ですね。

ぼくも初めて知ったときはちょっと感動しました。

OS設定を参照させるだけであれば非常に楽になるので、皆さんも使ってみてくださいね。