OS 設定に沿って Web サイトもダークモード化させる CSS

最近は PC でもスマホでも取り入れられている「ダークテーマ」。OS 設定でダークモードに切り替えると、ウィンドウのカラーテーマが暗くなったりする。

今回は、OS 設定でダークモードを選択した時に、Web サイトもダークモードに合わせてスタイル変更するための CSS の書き方を紹介する。

目次

prefers-color-scheme メディアクエリを使用する

書き方は簡単で、prefers-color-scheme というメディアクエリを使えば良い。

@media (prefers-color-scheme: light) {
  /* ライトテーマの時のスタイル */
}

@media (prefers-color-scheme: dark) {
  /* ダークテーマの時のスタイル */
}

例えば以下のように実装しておくと、システムがダークテーマの時に暗い感じのサイトにできる。

/* prefers-color-scheme が有効にならない場合はこの設定が効く */
body {
  color: #ccc;
  background: #999;
}

/* 通常は Light テーマと判断される */
@media (prefers-color-scheme: light) {
  body {
    color: #113;
    background: #ffe;
  }
}

/* OS でダークテーマを選択している場合 */
@media (prefers-color-scheme: dark) {
  body {
    color: #f0f0f0;
    background: #161616;
  }
}

実際に以下のサンプルを見てみてほしい。このページを開きながら、OS の設定画面でダークテーマとライトテーマを切り替えてみると、ページの配色も変化していることが分かるだろう。

ベースは @media 未指定で記載しておき、ダークテーマ向けのスタイルを @media (prefers-color-scheme: dark) で上書きすると良いかと思う。

ユーザの利用テーマに合わせて配色を切り替えられるので、よりユーザフレンドリーなサイトにできるだろう。