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

prefers-color-scheme

OSのダークモード設定を検出し、サイトの配色を自動的に切り替えることができる。CSS変数と組み合わせることで、ライト・ダークのテーマ切替を効率的に実装できる。ユーザーの好みに自動対応するため、UXの向上に大きく貢献する。

ダークモードテーマ

概要

OSのダークモード設定を検出し、サイトの配色を自動的に切り替えることができる。CSS変数と組み合わせることで、ライト・ダークのテーマ切替を効率的に実装できる。ユーザーの好みに自動対応するため、UXの向上に大きく貢献する。

対応ブラウザ

デスクトップ

Chrome 76+
Edge 79+
Safari 12.1+
Firefox 67+

モバイル

Chrome Android 76+
Safari iOS 13+
Firefox Android 67+

基本構文

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

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

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

実務での使いどころ

  • 自動ダークモード

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

  • テーマ対応画像

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

注意点

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

アクセシビリティ

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

参考リンク