【CSS Modules】prefers-color-schemeメディア機能の使い方

prefers-color-schemeメディア機能の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月29日

基本的な使い方

prefers-color-schemeプロパティは、ユーザーがオペレーティングシステムやユーザーエージェント（ブラウザなど）全体で設定している、好ましいカラースキーム（配色テーマ）を検出するために使用されるCSSのメディア特性です。このプロパティを利用することで、ウェブサイトやアプリケーションは、ユーザーのシステム設定に合わせた「ライトモード」や「ダークモード」といった表示テーマを自動的に適用できるようになります。

具体的には、このプロパティはCSSの@mediaルール内で使用されます。例えば、ユーザーがダークモードを好む設定にしている場合、@media (prefers-color-scheme: dark)ブロック内に記述されたスタイルが適用されます。反対に、ライトモードを好む設定の場合には、@media (prefers-color-scheme: light)ブロック内のスタイルが適用されます。これにより、開発者はユーザーの視覚的な好みに合わせた、より快適なユーザーエクスペリエンスを提供することが可能になります。

取りうる値は主にlight（明るい配色が好ましい場合）とdark（暗い配色が好ましい場合）の二つです。この機能は、特に夜間の利用時や、目に優しい表示を求めるユーザーにとって重要であり、アクセシビリティとユーザーインターフェースの柔軟性を向上させる上で非常に役立ちます。システムエンジニアにとって、このプロパティを理解し活用することは、現代のウェブ開発においてユーザー志向のデザインを実現するための基本的な知識となります。

公式リファレンス: prefers-color-scheme

構文(syntax)


1@media (prefers-color-scheme: dark) {
2  body {
3    background-color: #333;
4    color: #eee;
5  }
6}

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

prefers-color-schemeでダークモードを適用する


1/*
2 * prefers-color-schemeの基本的な使い方を示すサンプルコードです。
3 * ユーザーのOSまたはブラウザの設定に基づいて、ウェブページのテーマを切り替えます。
4 * このスタイルは、HTMLの<body>要素に適用することを想定しています。
5 */
6
7/* デフォルトのスタイル（ユーザーがライトモードを好む場合、または設定がない場合） */
8body {
9  background-color: #ffffff; /* 明るい背景色 */
10  color: #333333;    /* 暗い文字色 */
11  font-family: Arial, sans-serif;
12  padding: 20px;
13  transition: background-color 0.3s ease, color 0.3s ease; /* テーマ切り替え時の滑らかなアニメーション */
14}
15
16/* ユーザーがダークモードを好む場合に適用されるスタイル */
17@media (prefers-color-scheme: dark) {
18  body {
19    background-color: #333333; /* 暗い背景色 */
20    color: #ffffff;    /* 明るい文字色 */
21  }
22}

prefers-color-schemeは、CSSのメディアクエリ機能の一つで、ユーザーのオペレーティングシステム（OS）またはブラウザの設定に基づいて、ウェブページの配色テーマを自動的に切り替えるために使用されます。この機能は、ユーザーがライトモード（明るい配色）とダークモード（暗い配色）のどちらを好むかを検出し、それに応じたスタイルを適用します。

この機能自体は関数ではないため、直接的な「引数」や「戻り値」の概念は持ちません。代わりに、@mediaルール内で条件式として使われ、OSやブラウザが現在設定されているカラースキームが指定した値（darkやlightなど）と一致するかどうかを評価します。条件が一致した場合、その@mediaブロック内に記述されたCSSスタイルが適用されます。

サンプルコードでは、まずbody要素に対するデフォルトのスタイルとして、明るい背景色と暗い文字色が設定されています。これは、ユーザーがライトモードを好む場合や、特にカラースキームの設定がない場合に適用されます。次に、@media (prefers-color-scheme: dark)というメディアクエリが定義されています。これは、「ユーザーがダークモードを好む場合」という条件を示し、この条件が満たされた場合にのみ、body要素の背景色と文字色が暗い配色に上書きされます。これにより、ユーザーはOSやブラウザの設定を変更するだけで、ウェブページの見た目を簡単に切り替えることができ、より快適な閲覧体験を提供できます。

このコードは、ユーザーのOSやブラウザのシステム設定（ライトモード・ダークモード）に応じて、ウェブページのテーマを自動で切り替える機能です。

注意点として、このスタイルはCSSだけでテーマを強制的に変更するものではなく、ユーザーのシステム設定に強く依存します。そのため、動作確認を行う際は、ご自身のOSやブラウザの表示設定を「ダークモード」などに実際に変更して試す必要があります。

また、一部の古いブラウザではprefers-color-schemeがサポートされていない場合がありますので、デフォルトのスタイルを最初に記述し、それがサポートされない場合の「フォールバック」として機能させる設計が重要です。もし期待通りにテーマが切り替わらない場合は、ユーザーのOS/ブラウザ設定、ブラウザのサポート状況、またはCSSの記述に誤りがないかをまず確認してください。これは、システム連携におけるよくあるトラブルシューティングの基礎となります。

CSSでカラーテーマを自動切り替える


1/*
2 * prefers-color-scheme メディア特性を使用して、
3 * ユーザーのOS設定に基づいてカラースキームを切り替えるCSSスタイルを定義します。
4 * システムのテーマ設定（ライトモード、ダークモード）に応じて、
5 * 背景色や文字色などのスタイルが自動的に適用されます。
6 */
7
8/* デフォルトのスタイル（ライトモードを基本として設定） */
9body {
10  font-family: sans-serif; /* テキストのフォントを設定 */
11  margin: 20px;           /* ボディの余白を設定 */
12  color: #333;            /* 基本的な文字色（暗い色） */
13  background-color: #f5f5f5; /* 基本的な背景色（明るい色） */
14  transition: background-color 0.3s ease, color 0.3s ease; /* スムーズな切り替え効果 */
15}
16
17/* ユーザーがライトカラースキームを優先する場合のスタイル */
18@media (prefers-color-scheme: light) {
19  body {
20    color: #333;            /* ライトモードでの文字色 */
21    background-color: #f5f5f5; /* ライトモードでの背景色 */
22  }
23}
24
25/* ユーザーがダークカラースキームを優先する場合のスタイル */
26@media (prefers-color-scheme: dark) {
27  body {
28    color: #e0e0e0;          /* ダークモードでの文字色（明るい色） */
29    background-color: #2b2b2b; /* ダークモードでの背景色（暗い色） */
30  }
31}

prefers-color-schemeは、ユーザーのオペレーティングシステム（OS）やブラウザで設定されているカラースキーム（配色）の優先度に応じて、ウェブページのスタイルを自動的に切り替えるためのCSSメディア特性です。この特性は特定の引数や戻り値を持たず、ユーザーの環境設定を直接参照してスタイルを適用します。

提供されたサンプルコードでは、まずウェブページのデフォルトのスタイルとしてライトモード（明るい背景に暗い文字）を基本に設定しています。その上で、@mediaルールを使ってユーザーのカラースキームの優先度を検出しています。

具体的には、ユーザーがOS設定でライトモードを優先している場合（prefers-color-scheme: light）には、明るい背景色と暗い文字色が適用されます。一方、ユーザーがダークモードを優先している場合（prefers-color-scheme: dark）には、暗い背景色と明るい文字色に切り替わるように定義されています。これにより、ウェブサイトはユーザーのOSテーマ設定に合わせた見た目を自動で提供できます。

この特性を活用することで、ユーザーはシステム全体で統一された視覚体験を得ることができ、特に暗い環境下での目の負担軽減にも繋がるため、アクセシビリティとユーザー体験の向上が期待できます。スタイル変更がスムーズに行われるよう、transitionプロパティも併用されています。

prefers-color-schemeは、ユーザーのOS設定（ライト/ダークモード）に応じて自動的にウェブサイトの見た目を切り替えるCSSの機能です。サンプルコードのように、最初にデフォルトのスタイルを定義することは非常に重要です。これにより、この機能に対応していない古いブラウザや、ユーザーが特別な設定をしていない場合でも、適切な表示が保証されます。

また、ライトモードとダークモードの両方で、文字と背景のコントラスト比が視覚的に読みやすいか、アクセシビリティの観点から必ず確認してください。body要素だけでなく、リンクやボタンなど、サイト全体の要素の色も適切に調整し、一貫性のあるデザインを保つように注意しましょう。ユーザーがウェブサイト内でテーマを切り替える機能を設けたい場合は、JavaScriptと連携させる検討も必要です。