Widely available 全主要ブラウザで対応済み。ダークモード実装の標準的な方法。

prefers-color-scheme

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求した配色が明色か暗色かを検出するために使用します。 ユーザーはオペレーティングシステムの設定（ライトモードやダークモードなど）やユーザーエージェントの設定で、この設定を示す場合があります。

ダークモードテーマ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.prefers-color-scheme
76
79
67
12.1
76
13
CSS @ ルール
prefers-color-scheme.respects-inherited-scheme
非標準

親から継承された「配色」を尊重します
129
129
105
129
その他
http.headers.Sec-CH-Prefers-Color-Scheme
実験的

The HTTP Sec-CH-Prefers-Color-Scheme request header is a media feature client hint which provides the user's preference for light or dark color themes. A user indicates their preference through an operating system setting (for example, light or dark mode) or a user agent setting.
93
93
93
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (129)
実装メモ
  • SVG 画像のみをサポートし、iframe はサポートしません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (129)
実装メモ
  • SVG 画像のみをサポートし、iframe はサポートしません。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (129)
実装メモ
  • SVG 画像のみをサポートし、iframe はサポートしません。

基本構文

CSS 
:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
}

ライブデモ

lightmode

prefers-color-scheme lightmode demo.

プレビュー全画面表示

darkmodesupport

prefers-color-scheme darkmodesupport demo.

プレビュー全画面表示

cardexample

prefers-color-scheme cardexample demo.

プレビュー全画面表示

実務での使いどころ

  • 自動ダークモード

    OSのダークモード設定に連動して自動的にサイトの配色を切り替える。

  • テーマ対応画像

    ダークモード時にロゴや図解を暗い背景に適した色合いに切り替える。

注意点

  • ダークモードでは画像やシャドウの見え方が変わるため、各要素の視認性を個別に確認する。

アクセシビリティ

  • ダークモード時もテキストと背景のコントラスト比（WCAG AA: 4.5:1 以上）を維持する。

参考リンク