CSSでダークモード。prefers-color-schemeの使い方と効かないとき。 / メモ / いがわ

CSSでダークモード。prefers-color-schemeの使い方と効かないとき。

2023.12.22 2024.02.03更新。

メディアクエリでダークモード。prefers-color-schemeの使い方と効かないとき。

Contents - 目次

1 prefers-color-schemeとは？
2 prefers-color-schemeの使い方。
3 ダークモードとライトモードの切り替え。
4 prefers-color-schemeが効かないとき。
5 CSS 関連メモ。

prefers-color-schemeとは？

メディアクエリでライトとダークを切り替え。

CSSのメディアクエリで「prefers-color-scheme」を使うと、ライトモードとダークモードを切り替えられる。

ダークモード・ライトモードの切り替えは、スマホの普及によりユーザーの視聴時間が増えたこともあり、OSレベルでは必須的な機能となってきている。

CSSでダークモード。prefers-color-schemeの使い方と効かないとき。

prefers-color-schemeの使い方。

prefers-color-schemeの基本的な概念。

もっともシンプルに切り替える場合は、以下のような書き方でダークモードにできる。

ダークモードの例）

これで、OSがダークモードになっていれば、ブラウザもダークモード化される。

CSS

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

ライトモードの例）

ライトモードの場合は、背景色と文字色の白と黒を入れ替え、次のような記述となる。

CSS

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

ダークモードの例（複数要素に指定。）

色は、CSS変数（カスタムプロパティ）で指定するとあとあと便利。

セレクタでまとめ、複数箇所の色を一度に変更できる。

CSS

@media (prefers-color-scheme: dark) {
:root {
 --dark_color: #333;
 --light_color: #fff;
}
body,
article h2,
aside h3 {
 background-color: var(--dark_color);
 color: var(--light_color);
 }
}

ダークモードとライトモードの切り替え。

darkとlightの切り替え。

ダークモードとライトモードの切り替えボタンを実装する場合は、CSSだけでは難しく、JavaScriptが必要となる。

（※ダークモードにするときは、OSごと（デバイスごと）ダークモード・ダークテーマにするか、プラグインを利用していることも多いと思われるため、ブラウザへのボタンの設置については今回割愛。）

prefers-color-schemeの注意点。

新規サイトはともかく、既存サイトにダークモード用にprefers-color-schemeを実装する場合は、手間がかかる可能性が高い。

例えば下記のようなサイトの場合、ハードルが上がる。

色やデザインに凝っているサイト。
色の管理に、CSS変数（カスタムプロパティ）が使われていないサイト。
他者が作った、不慣れなコードのサイト。

など。

実際にはこのような場合の方が多いと思われる。

なので、工数を確保し、段階的に進めた方が、メンタル的にも作業効率的にも良いはず。

prefers-color-schemeでダークとライトを切り替え。

MDNのコード例。

prefers-color-schemeについてのMDNのコードの例では、以下のようになっている。

（※色の管理はCSS変数（カスタムプロパティ）を使用した方が楽になる。）

CSS

.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

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

prefers-color-schemeが効かないとき。

prefers-color-schemeの設定の問題。

CSSファイルのprefers-color-schemeの設定の問題による原因が想定される。

prefers-color-schemeの記述場所。

「:root」でCSS変数（カスタムプロパティ）を指定する場合、「@media (prefers-color-scheme: dark)」をその下に記述するとうまく機能されないことがある。

!importの有無。

!importを付けなければ値が上書きされないことがある。

括弧のつけ忘れ、コロンとセミコロン、スペルミスなど。

ほか、W3Cによるチェックツールや、エディタの拡張機能などでコードを確認すると、どこで何かが起きているが大体わかる。

参考：W3C CSS 検証サービス

ブラウザの拡張機能の影響。

ブラウザの拡張機能を使用している場合は、一時的にオフにする。

ブラウザのキャッシュの影響。

キャッシュのクリアや、履歴の削除を行う。

キャッシュのクリアのショートカット例。

Chromeの場合。

Mac：「command」 + 「shift」 + 「R」
Win：「Ctrl」 + 「Shift」 + 「R」

閲覧履歴データ削除のショートカット例。

Chromeの場合。

Mac：「command」 + 「shift」 + 「delete」
Win：「Ctrl」 + 「Shift」 + 「Delete」

↑のショートカットで削除の画面が出るので、「データを削除」ボタンを押す。

これらで解決しない場合は、頭やパソコンが疲れている可能性があるので、まずは一晩休んで回復させる。

CSSでダークモード。prefers-color-schemeの使い方と効かないとき。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。