1. ウェブ
  2. HTTP
  3. リファレンス
  4. ヘッダー
  5. Sec-CH-Prefers-Color-Scheme

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Sec-CH-Prefers-Color-Scheme ヘッダー

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

HTTP の Sec-CH-Prefers-Color-Scheme リクエストヘッダーはメディア特性クライアントヒントで、ライトテーマとダークテーマのどちらを推奨するかというユーザーの環境設定を指定します。 ユーザーは、オペレーティングシステムの設定（例えば、ライトモードやダークモードなど）やユーザーエージェントの設定を通じて、自身の環境設定を示します。

サーバーが Accept-CH ヘッダーを介して、Sec-CH-Prefers-Color-Scheme を受け入れることをクライアントにシグナルした場合、クライアントはこのヘッダーを含めて応答し、ユーザーが特定の配色を好むことを示すことができます。これにより、サーバーは、その後レンダリングされるコンテンツをライトモードまたはダークモードで表示するために、画像や CSS などを適切に調整したコンテンツをクライアントに送信することができます。

このヘッダーは、prefers-color-scheme メディアクエリーをモデルにしています。

ヘッダー種別 リクエストヘッダー, クライアントヒント
禁止リクエストヘッダー Yes (Sec- 接頭辞)

使用上のメモ

Sec-CH-Prefers-Color-Scheme ヘッダーを使用すると、サイトはリクエスト時にユーザーの配色設定を取得することができます。これにより、パフォーマンス上の理由から、ユーザーの設定に合わせた CSS をインラインで提供することができるようになります。サーバーが CSS をインラインで記述する場合、レスポンスが具体的な配色設定に合わせて調整されていることを示すために、Sec-CH-Prefers-Color-Scheme を指定する Vary レスポンスヘッダーを含めるのが望ましいでしょう。

このコンテキストにおいてパフォーマンスが重要な考慮事項でない場合は、代わりに prefers-color-scheme メディアクエリーや Window.matchMedia() API を使用して、ユーザーの配色設定を処理することもできます。

Sec-CH-Prefers-Color-Scheme は高エントロピーのヒントであるため、サイト側は適切な Accept-CH レスポンスヘッダーを送信することで、このヒントの受信を明示的に許可する必要があります。理論上、ユーザーの好みがフィンガープリンティングに使用できる可能性があるため、ユーザーエージェントはユーザーのプライバシーを保護するために、意図的に Sec-CH-Prefers-Color-Scheme ヘッダーを省略する場合があります。

構文

http
Sec-CH-Prefers-Color-Scheme: <preference>

ディレクティブ

<preference>

ユーザーエージェントの設定に応じて、コンテンツを「ダーク」にするか「ライト」にするかを示す文字列："light" または "dark"。 この値は、基盤となるオペレーティングシステムの対応する設定に由来することがあります。

例

Sec-CH-Prefers-Color-Scheme の使用

クライアントはサーバーに対して最初のリクエストを送信します。

http
GET / HTTP/1.1
Host: example.com

サーバーは応答し、Accept-CH を通じて、Sec-CH-Prefers-Color-Scheme をクライアントに指示します。この例では Critical-CH も使用されており、Sec-CH-Prefers-Color-Scheme が重要クライアントヒントと考えられていることを示しています。

http
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Color-Scheme
Vary: Sec-CH-Prefers-Color-Scheme
Critical-CH: Sec-CH-Prefers-Color-Scheme

メモ: また、Sec-CH-Prefers-Color-Scheme を Vary に指定し、このヘッダーの値に基づいて（URL が同じであっても）レスポンスを別個にキャッシュすべきであることを示しています。 Critical-CH ヘッダーに掲載されているそれぞれのヘッダーは、Accept-CH および Vary ヘッダーにも存在している必要があります。

クライアントは（以上で Critical-CH が指定されているため）リクエストを自動的に再試行し、Sec-CH-Prefers-Color-Scheme を通じて、コンテンツの表示でダークモードを推奨するユーザーの環境設定があることをサーバーに指示します。

http
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"

サーバーが Accept-CH の対応を終了したことを示すレスポンスが返される場合を除き、クライアントは現在のセッション内のその後のリクエストにこのヘッダーを記載します。

仕様書

仕様書
User Preference Media Features Client Hints Headers
# sec-ch-prefers-color-scheme

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告