<meta name="color-scheme" content="">

更新日
仕様 HTML Living Standard / CSS Color Adjustment Module Level 1
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所
内容 無し（空要素）

meta要素に name="color-scheme" を追加すると、文書のカラースキーム（配色）を指定することができます。

この指定は、そのページが対応するカラースキームをブラウザに対して伝えます。ブラウザは、ここで指定されたカラースキームに基づき、ページの背景やテキスト、フォーム部品、スクロールバーなどの既定色を変更する場合があります。


<meta name="color-scheme" content="dark">
属性 値
任意属性
name="" 文書情報の種類 color-scheme ［＋］文書のカラースキーム
任意属性（name を指定している場合は必須）
content="" 文書情報の内容 normal ブラウザの既定のカラースキームを使用
light ライトモードに対応している
dark ダークモードに対応している
only ブラウザがカラースキームを上書きすることを禁止

配色モードについて

ブラウザによっては、配色モード（ライトモードとダークモード）の切り替え機能が備わっている場合があります。（モードではなくテーマと表現されている場合もあります）

参考：ライトモードとダークモード
ライトモード：明るい背景に暗いテキスト、ダークモード：暗い背景に明るいテキスト

ユーザーがこのモードを切り替えると、各部位の既定色が変化することがあります。

例えば、AndroidのChromeでは、アドレスバーの周辺の色が変化することになります。

  • 以下の画像は、左がライトモード、右がダークモードで表示したものです。

左：アドレスバーがライトモードで表示、右：アドレスバーがダークモードで表示、ページ本体はどちらもライトモード的な配色で表示

そして、meta要素でカラースキームを指定すると、ページ本体の配色が切り替わるようになります。以下は、meta要素に dark を指定したページを表示しています。

  • 以下の画像は、左がライトモード、右がダークモードで表示したものです。

左：アドレスバーがライトモードで表示、右：アドレスバーがダークモードで表示、ページ本体はどちらもダークモードで表示

以上は、CSSによる色設定をまったく行っていない場合の変化を表したものです。（ブラウザの既定色の変化となります）

  • ブラウザの種類によっては、変化の仕方が異なる可能性があります。

CSSによって背景色や文字色などを指定している場合は、それらの色設定が優先されることになります。このCSSによる色設定は、メディア特性の prefers-color-scheme を使用してライトモード向けのスタイルとダークモード向けのスタイルに振り分けることができます。

また、アドレスバー周辺の色については、文書のテーマカラーによって変更することが可能です。

カラースキームの指定方法について

カラースキームは、以下のようなパターンで指定することができます。

次の例では、ページはライトモードにしか対応していないので、ライトモードで表示することを推奨しています。

<meta name="color-scheme" content="light">

次の例では、ライトモードで表示することを推奨し、かつ、ブラウザがカラースキームを上書きすることを禁止しています。

<meta name="color-scheme" content="light only">

次の例では、ライトモードで表示することを推奨しつつ、ダークモードで表示することも可能としています。

<meta name="color-scheme" content="light dark">

次の例では、ダークモードで表示することを推奨しつつ、ライトモードで表示することも可能としています。

<meta name="color-scheme" content="dark light">

次の例では、ページはカラースキームを意識して作られていないため、ブラウザの既定のカラースキームで表示することを推奨しています。

<meta name="color-scheme" content="normal">

CSSによる指定との違い

カラースキームは、CSSの color-scheme プロパティでも同じように指定することができます。

以下の2つのコードは、同等の指定を行っています。

:root {
color-scheme: light dark;
}

<meta name="color-scheme" content="light dark">

ただし、CSSによる指定では、そのCSSが読み込まれた後に指定内容が反映されるため、タイムラグが生じてしまう可能性があります。タイムラグが生じると、一瞬ライトモードで表示された後にダークモードに切り替わる、といったようなことが起こり得ます。

meta要素による指定では、CSSの読み込みを待たずに、すぐに反映されることになります。

上記の2つは同時に指定することも可能ですが、その場合は同じ内容の値を指定する必要があります。

使用例

ライトモードとダークモードに対応した上で、light dark を指定した例
  • 対応しているブラウザで配色モードを切り替えると、ページ本体の配色が切り替わります。背景と文字はCSSで設定した色で、ボタンとリンクテキストはブラウザの既定色で表示されます。

<!DOCTYPE html>
<html>
<head>

<meta name="color-scheme" content="light dark">

<title>ライトモードとダークモードに対応</title>

<style>

/* 通常の設定（ライトモードを想定） */
body {
  background-color: #e8fcfc; /* 明るい背景色 */
  color: #283d3d; /* 暗い文字色 */
  padding: 0 0 2000px; /* スクロールバーの表示確認用の設定 */
}

/* ダークモード時の設定 */
@media all and (prefers-color-scheme: dark) {

  body {
    background-color: #1e4747; /* 暗い背景色 */
    color: #f9f9f9; /* 明るい文字色 */
  }

}

/* フォーム部品やリンクテキストの色はブラウザの既定色を使用 */

</style>

</head>
<body>

<h1>ライトモードとダークモードに対応</h1>

<p>これはテストページです。</p>

<p><button type="button">ボタンの内容</button></p>

<p><a href="meta_colorscheme.html">前のページに戻る</a></p>

</body>
</html>
表示例

サンプル画面へ新規ウィンドウで表示