ダークモード対応の実装方法（CSS・SCSS・JavaScript）

CSS JavaScript Sass

2025/12/11

2025/11/16

OSやブラウザのダークモード設定に応じてスタイルを切り替える方法をまとめます。CSSのメディアクエリ、SCSSのmixin、JavaScriptのmatchMediaを組み合わせた実装例です。

See the Pen Dark Mode by oheyril (@oheyril) on CodePen.

CSSでのダークモード判定

prefers-color-schemeメディアクエリを使うことで、ユーザー環境がダークモードのときだけスタイルを適用できます。

CSS

@media (prefers-color-scheme: dark) {
  /* ダークモード時に適用するCSS */
}

@media (prefers-color-scheme: dark) {
  /* ダークモード時に適用するCSS */
}

SCSSのmixinを使った管理方法

SCSSでは、ダークモード用スタイルをまとめるためのmixinを作成できます。

SCSS

@mixin dark {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

.example {
  color: #000;

  @include dark {
    color: #fff;
  }
}

@mixin dark {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

.example {
  color: #000;

  @include dark {
    color: #fff;
  }
}

ポイント

@mixin dark内の@contentに、呼び出し元のスタイルが挿入される。
@include dark { … }の中はダークモード時のみ適用される。
複数コンポーネントのダークスタイルを一箇所に整理できるため、保守性が高い。

JavaScriptによるモード検知とクラス付与

JavaScriptのmatchMediaを使うと、現在のモードと、ユーザーがライト／ダーク設定を切り替えた瞬間を検知できます。

JavaScript

const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");

function applyTheme() {
  if (darkQuery.matches) {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }
}

applyTheme();
darkQuery.addEventListener("change", applyTheme);

const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");

function applyTheme() {
  if (darkQuery.matches) {
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
  }
}

applyTheme();
darkQuery.addEventListener("change", applyTheme);

ポイント

darkQuery.matchesで現在のモードを取得。
判定結果に応じて<body>にdarkクラスを付与。
changeイベントでOS設定変更にも自動対応。

CSSとJavaScriptを併用する理由

CSSだけでもダークモード対応は可能ですが、JavaScriptを併用すると以下が柔軟に行えます。

切り替えアニメーションの追加
手動切り替えボタンとの同期
DOM構造の状態変更（アイコン変更など）

まとめ

CSSのprefers-color-scheme、SCSSのmixin、JavaScriptのmatchMediaを組み合わせることで、ユーザー環境に合わせたダークモードを自動的に実装できます。サイトの視認性向上やユーザー体験の改善につながるため、テーマ制作やWebアプリケーション構築で有効な手法です。

#ダークモード

コメントを残す

一覧に戻る