prefers-color-scheme: 昔馴染みのダークモード

宣伝し過ぎ？それとも必要性？ダークモードとユーザーのためのサポート方法について学習しましょう！

Jun 27, 2019 — 更新済み Aug 2, 2020

Available in: English, Español, Русский, and 한국어

Thomas Steiner

TwitterGitHubGlitchHomepage

はじめに #

ダークモードが登場する前のダークモード #

ダークモードにおいては、一回りして戻ってきました。パーソナルコンピューターが台頭した当初、ダークモードは選択ではなく、事実でしかありませんでした。モノクロ CRT コンピューターのモニターは、蓄光スクリーン上で電子線を発することによって機能し、初期の CRT で使用されていた蛍光体は緑色でした。テキストは緑、残りの画面は黒で表示されていたため、これらのモデルはグリーンスクリーンを呼ばれていました。

その後登場したカラー CRT は、赤、緑、および青の蛍光体を使用することで表現された多色表示でした。3 色すべての蛍光体を同時に発光することで白を作り出していました。より洗練された WYSIWYG 系デスクトップパブリッシングの登場により、実物の用紙に似せて仮想文書を作成するという考えに人気が集まりました。

これがデザイントレンドとしての白黒の始まりであり、このトレンドは初期のドキュメントベースの Web に引き継がれました。史上初のブラウザであるWorldWideWeb（CSS はまだ発明されていなかったころ）は、この方法で Web ページを表示していました。豆知識: その次に登場した 2 番目のブラウザである Line Mode Browser（ターミナルベースのブラウザ）は、黒背景に緑文字が使用されていました。最近の Web ページと Web アプリは通常、明るい背景に暗いテキストを使用して設計されています。これは、Chrome を含むユーザーエージェントのスタイルシートにもハードコーディングされているベースラインの前提です。

CRT の時代は過ぎ去りました。コンテンツの消費と作成は、バックライト付き LCD または省エネ AMOLED スクリーンを使用するモバイルデバイスにシフトしています。小型で持ち運びに便利なコンピューター、タブレット、スマートフォンによって、使用パターンも新しくなっています。Web サーフ、趣味のコーディング、ハイエンドゲームなどのレジャータスクは、一日の終わりにかけて薄暗い環境で行われることが頻繁です。夜にはベッドに入ってデバイスを楽しむことさえあります。より多くの人が暗い環境でデバイスを使用するにつれ、ライトオンダークのルーツに戻るという考えに人気が集まっているのです。

なぜダークモードなのか #

美的理由によるダークモード #

ダークモードが好きな理由や使用したい理由を尋ねると、最初に*「目に優しい」、次に「エレガントで美しい」という回答に人気が集まります。Appleは、 「ダークモードの開発者向けドキュメント」において「ほとんどのユーザーは、それぞれの美的センスに応じて明るい外観と暗い外観のどちらを有効にするかを選択しており、周囲の照明条件とは関係がない可能性がある」*と明示的に述べています。

アクセシビリティツールとしてのダークモード #

ダークモードを実際に必要とし、それを別のアクセシビリティツールとして使用する人もいます。たとえば、ロービジョンのユーザーなどです。私が見つけたそのようなアクセシビリティツールの最初の出現は、System 7 の CloseView 機能であり、これは白地に黒と黒地に白を切り替えることができました。System 7 はカラーをサポートしていましたが、デフォルトのユーザーインターフェイスは白黒のままでした。

これらの反転ベースの実装は、色が導入されるとその弱点を示しました。Szpiro et.al によるロービジョンユーザーがコンピューティングデバイスにどのようにアクセスしているかに関するユーザー調査では、インタビューしたすべてのユーザーが反転画像を嫌っているが、多くのユーザーが暗い背景に明るい文字表示を好むことがわかりました。Appleは、画像、メディア、および暗い色のスタイルを使用する一部のアプリを除いてディスプレイの色を反転させるスマート反転と呼ばれる機能で、このユーザーの好みに対応しています。

特殊なロービジョンに、デジタル眼精疲労としても知られている、「コンピュータ（デスクトップ、ノートパソコン、タブレットを含む）やその他の電子ディスプレイ（スマートフォンや電子書籍リーダーなど）の使用に関連付けられる目と視覚の複合問題」として定義されるコンピュータビジョン症候群があります。青少年による特に夜間の電子機器の使用によって、睡眠時間の短縮、入眠潜時の長時間化、睡眠不足の増加というリスクが増加するということが提示されています。さらに、ブルーライトへの暴露が概日リズム と睡眠サイクルの調整に関係していることが広く報告 されており、Rosenfield による調査によると、不規則な光の環境は睡眠不足につながる可能性があり、気分やタスクのパフォーマンスに影響を与える可能性があるとされています。こういった悪影響を抑制するには、iOS のナイトシフトや Android のナイトライトといった機能でディスプレイの色温度を調整してブルーライトを削減したり、ダークテーマやダークモードを通じて、一般的に明るい光や不規則な光を避けたりすることができます。

AMOLED 画面でのダークモードによる省電力 #

最後に、ダークモードは AMOLED 画面で多くのエネルギーを節約することが知られています。YouTube などの人気のある Google アプリに焦点を当てた Android のケーススタディでは、電力を最大 60％ 節約できることが示されています。以下の動画では、これらのケーススタディとアプリごとの省電力について詳しく説明されています。

OS でダークモードをアクティブにする #

ダークモードが多くのユーザーにとって非常に重要である理由の背景を説明したので、それをどのようにサポートできるかを確認しましょう。

ダークモードまたはダークテーマをサポートするオペレーティングシステムには、通常、設定のどこかでアクティブ化するオプションがあります。macOS Xでは、システム環境設定の［全般］セクションの［外観］（スクリーンショット）にあり、Windows 10 では、［色］セクションの［色を選択する］（スクリーンショット）にあります。Android Q の場合は、［ディスプレイ］の下の［ダークテーマ］トグルスイッチ（スクリーンショット）にあり、iOS 13 の場合は、設定の［ディスプレイと明るさ］セクションの［外観］（スクリーンショット）で変更できます。

prefers-color-scheme メディアクエリ #

先に進む前に、最後にもう 1 つ理論を説明します。メディアクエリを使用すると、作成者は、レンダリングされるドキュメントに関係なく、ユーザーエージェントまたはディスプレイデバイスをテストし、値または機能をクエリできます。これらは、CSS @media ルールで使用され、条件的にドキュメントにスタイルを適用します。また、HTML や JavaScript など、他のさまざまなコンテキストや言語でも使用されます。Media Queries Level 5 では、いわゆるユーザー設定メディア機能が導入されています。これは、サイトがユーザーの好みのコンテンツ表示方法を検出する方法です。

prefers-color-scheme メディア機能は、ユーザーがページに明るい色または暗い色のテーマを使用するように要求したかどうかを検出するために使用されます。次の値で動作します。

• light: ユーザーが明るいテーマ（明るい背景に暗いテキスト）を持つページを好むことをシステムに通知したことを示します。
• dark: ユーザーが暗いテーマ（暗い背景に明るいテキスト）のページを好むことをシステムに通知したことを示します。

ダークモードのサポート #

ダークモードがブラウザでサポートされているかどうかを確認する #

ダークモードはメディアクエリを通じて報告されるため、メディアクエリ prefers-color-scheme が一致するかどうかを確認することで、現在のブラウザがダークモードをサポートしているかどうかを簡単に確認できます。値を含めていないことに注意してください。ただし、メディアクエリだけが一致するかどうかを純粋に確認してください。

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

執筆時点では、 prefers-color-scheme は、バージョン 76 以降の Chrome と Edge、バージョン 67 以降の Firefox、および macOS のバージョン 12.1 以降と iOS のバージョン 13以降の Safari で、デスクトップとモバイル（利用可能な場合）の両方でサポートされています。他のすべてのブラウザについては、「サポートテーブルを使用できますか」をご覧ください。

リクエスト時にユーザーの好みについて学ぶ #

Sec-CH-Prefers-Color-Scheme クライアントヒントヘッダーを使用すると、サイトはリクエスト時にオプションでユーザーの配色設定を取得できるため、サーバーは適切な CSS をインライン化でき、したがって誤ったカラーテーマのフラッシュを回避できます。

実際のダークモード #

最後に、ダークモードのサポートが実際にどのように見えるかを見てみましょう。「ハイランダー」と同じように、ダークモードでは 1 つしか勝者はありません。ダークかライトのいずれかで、両方となることは絶対になりません！なぜこれを言及しているのでしょうか。この事実は読み込み戦略に　　影響を与えるからです。**ユーザーが現在使用していないモード用の CSS を重要なレンダリングパスでダウンロードするように強制しないでください。**読み込み速度を最適化するために、以下の推奨事項を実践で示すサンプルアプリ用の CSS を 3 つに分割し、重要ではない CSS を延期させています。

• style.css: サイトで広く使用されている一般的なルールを含む
• dark.css: ダークモードに必要なルールのみを含む
• light.css: ライトモードに必要なルールのみを含む

読み込み戦略 #

後者の 2 つ（light.css と dark.css）は、<link media> クエリを使用して条件的に読みこまれます。最初は、すべてのブラウザでは prefers-color-scheme はサポートされないようになっているため（上記のパターンで検出）、デフォルトの light.css ファイルを非常に小さなスクリプトで条件的に挿入される <link rel="stylesheet"> 要素を通じて読み込むことで、動的に処理しています（light は適当に選択したものであり、dark をデフォルトのフォールバックエクスペリエンスに指定することも可能です）。スタイル設定されていないコンテンツのフラッシュを避けるために、light.css が読み込まれるまで、コンテンツを非表示にしています。

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

スタイルシートアーキテクチャ #

私は CSS 変数を最大限に活用しているため、汎用の style.css を汎用とし、すべてのライトモードまたはダークモードのカスタマイズは、他の 2 つの dark.css と light.css ファイルで行っています。以下に実際のスタイルを抜粋していますが、全体的なアイデアを伝えるには十分なはずです。私は 2 つの -⁠-⁠color と -⁠-⁠background-color 変数を宣言しています。これらは基本的にダークオンライトとライトオンダークの基準となるテーマを作成する変数です。

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

私の style.css では、これらの変数を body { … } ルールで使用します。:root CSS疑似クラス（HTML で <html> 要素を表し、具体性が高いことを除けば html セレクターと同一のセレクター）で定義されているため、カスケードダウンし、したがってグローバル CSS を宣言するのに役立ちます。

/* style.css */
:root {
  color-scheme: light dark;
}

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

上記のコードサンプルでは、color-scheme にスペースで区切られた light dark という値があることに気付いたと思います。

これにより、アプリがサポートするカラーテーマがブラウザに通知され、ユーザーエージェントスタイルシートの特別なバリエーションをアクティブ化できるようになります。これは、たとえば、ブラウザに暗い背景と明るいテキストでフォームフィールドをレンダリングさせたり、スクロールバーを調整したり、テーマ対応のハイライトカラーを有効にしたりするのに役立ちます。color-scheme の正確な詳細は、「CSS Color Adjustment Module Level 1」で指定されています。

それ以外のすべては、私のサイトの重要な項目に対して CSS 変数を定義するだけの問題です。ダークモードで作業する場合、意味的にスタイルを整理すると非常に役立ちます。たとえば、変数を -⁠-⁠highlight-yellow ではなく、-⁠-⁠accent-color と呼ぶことを検討してください。これは、「黄色」がダークモードでは実際には黄色ではなかったり、その逆の場合があったりするためです。以下は、私の例で使用しているいくつかの変数の例です。

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

完全な例 #

次の Glitch の埋め込みでは、上記の概念を実践に導入した完全な例を見ることができます。特定のオペレーティングシステムの設定でダークモードに切り替えて、ページがどのように反応するかを確認してください。

読み込みの影響 #

この例で作業して見ると、メディアクエリを介して dark.css と light.css を読み込むする理由がわかるかもしれません。ダークモードを切り替えてページをリロードしてみてください。現在一致していない特定のスタイルシートは引き続き読み込まれますが、優先度が最も低いため、現時点でサイトが必要とするリソースと競合することはありません。

ダークモードの変更への対応 #

他のメディアクエリの変更と同様に、ダークモードの変更は JavaScript を介して適用できます。これを使用して、たとえば、 ページのファビコンを動的に変更したり、Chrome の URL バーの色を決定する <meta name="theme-color"> を変更したりできます。上記の完全な例はこれを実演しており、テーマの色とファビコンの変更を確認するために、別のタブでデモが開くようになっています。

  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkModeMediaQuery.addListener((e) => {
    const darkModeOn = e.matches;
    console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
  });

Chromium 93 と Safari 15 において、この色は、meta テーマカラー要素の media 属性を使ったメディアクエリを基に調整できます。最初に一致するものが選択されます。たとえば、ライトモード用に 1 つの色を使用し、ダークモード用に別の色を使用することができます。この記事の執筆時点では、マニフェストでそれらを定義することはできません。GitHub の w3c/manifest#975 の課題を参照してください。

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

ダークモードのデバッグとテスト #

DevTools で prefers-color-scheme をエミュレートする #

オペレーティングシステム全体の配色を切り替えると、すぐに煩わしくなります。そのため、Chrome DevTools では、現在表示されているタブのみに影響するように、ユーザーの好みの配色をエミュレートできるようになりました。Command メニューを開いて、「Rendering」と入力し、Show Rendering コマンドを実行して、Emulate CSS media feature prefers-color-scheme オプションを変更します。

Puppeteer で prefers-color-scheme をスクリーンショットする #

Puppeteer は、DevTools プロトコルを介して Chrome または Chromium を制御するための高レベル API を提供する Node.js ライブラリです。dark-mode-screenshot を使用すると、ダークモードとライトモードの両方でページのスクリーンショットを作成できる Puppeteer スクリプトが提供されます。このスクリプトは 1 回限りで実行することも、継続的インテグレーション（CI）テストスイートの一部にすることもできます。

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

ダークモードのベストプラクティス #

真っ白なものは避けましょう #

気づいているかもしれませんが、私は真っ白を使用していません。代わりに、周囲の暗いコンテンツに対して光りやにじみがでることを防ぐために、少し暗い白を選択しています。rgb(250, 250, 250) のようにするとうまく機能します。

写真画像の色を染め替えて暗くする #

以下の 2 つのスクリーンショットを比較すると、コアテーマがダークオンライトからライトオンダークに変更されただけでなく、ヒーロー画像もわずかに異なって見えることがわかります。私のユーザー調査によると、調査対象の大多数のユーザーは、ダークモードがアクティブな場合に、鮮やかさと明るさがわずかに劣る画像を好むことがわかっています。私はこれを再色付けと呼んでいます。

再色付けは、画像に CSS フィルターを使用して実行できます。URL に .svg のないすべての画像に一致する CSS セレクターを使用します。これは、ベクター画像（アイコン）に画像（写真）とは異なる再色付け処理を行えることができるという考えです。これについては、次の段落で説明します。もう一度 CSS 変数を使用しているところに注意してください。これにより、後でフィルターを柔軟に変更できます。

再色付けはダークモード、つまり dark.css がアクティブである場合にのみ必要であるため、light.css にはそれに対応するルールはありません。

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

JavaScript を使用してダークモードの再色付け強度をカスタマイズする #

すべてのユーザーが同じではなく、ダークモードのニーズも人によって異なります。上記で説明した再色付け方法に従って、JavaScript を介してグレースケールの強度を変更できるユーザー設定に簡単にすることができます。また 0% に設定することで、再色付けを完全に無効にすることもできます。document.documentElement は、ドキュメントのルート要素への参照を提供することに注意してください。つまり :root CSS 疑似クラスで参照できるのと同じ要素です。

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

ベクトルのグラフィックとアイコンを反転させる #

ベクター画像（私の例ではでは、<img> 要素を介して参照するアイコンとして使用されています）の場合、別の再色付け方法を使用してします。調査によると、ユーザーは写真の反転を好まないことがわかっていますが、ほとんどのアイコンでは非常にうまく機能します。ここでも、CSS 変数を使用して、通常の状態と:hover 状態の反転量を決定しています。

dark.css でのみアイコンを反転し、light.css では反転しないこと、そしてユーザーが選択したモードに応じて、アイコンがわずかに暗くまたは明るく表示されるように、2 つのケースで異なる反転強度を使用していることに注意してください。

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

インライン SVGに currentColor を使用する #

インライン SVG 画像の場合、反転フィルターを使用する代わりに、要素の color プロパティの値を表す currentColor キーワードを利用できます。デフォルトで color 値を受け取らないプロパティで color 値を使用できます。便利なことに、 currentColor が fill または stroke 属性の値として使用される場合、代わりに、color プロパティの継承値からその値を取得します。さらに、これは <svg><use href="…"></svg> でも機能するため、個別のリソースを持つことができ、 currentColor は引き続きコンテキストに適用されます。これはインラインまたは <use href="…"> SVGのみで機能し、画像の src として、または何らかの方法で CSS を介して参照される SVG では機能しないことに注意してください。これは、以下のデモに適用されています。

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

モード間のスムーズな移行 #

color と background-color の両方がアニメーション対応 CSS プロパティであるため、ダークモードからライトモードへの切り替え、またはその逆の切り替えをスムーズに行うことができます。アニメーションの作成は、2 つのプロパティに対して 2 つの transition を宣言するだけです。以下の例は全体的なアイデアを示すものであり、デモで実際に体験することができます。

body {
  --duration: 0.5s;
   --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}

ダークモードでのアートディレクション #

一般に読み込みパフォーマンスの理由で、排他的に <link> 要素の media 属性で prefers-color-scheme を操作することを推奨していますが（スタイルシートのインラインでではなく）、実際に HTML コードで直接インラインで prefers-color-scheme を処理する必要がある場合があります。このような状況になるのがアートディレクションです。Web では、アートディレクションは、ページの全体的な視覚的な見栄えとそれが視覚的にどのように伝達するのか、気分を刺激するのか、機能を強調するのか、そして心理的にターゲットオーディエンスに魅力を与えるのかを操作します。

ダークモードでは、特定のモードで最適な画像と画像の再色付けが不十分でないかを判断するのは設計者の判断です。<picture> 要素と一緒に使用すると、表示する画像の <source> を media 属性に依存させることができます。以下の例では、ダークモードを左半球、ライトモードまたは優先順位が指定されていない場合を右半球に示し、他のすべての場合もデフォルトで右半球に示しています。もちろん、これは純粋に説明の目的でです。デバイスのダークモードを切り替えて、違いを確認してください。

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

ダークモードで、オプトアウトを追加する #

上記の「ダークモードの理由」セクションで説明したように、ダークモードはほとんどのユーザーにとって美的な選択です。そのため、一部のユーザーは実際にはオペレーティングシステムの UI をダークモードにしても、Web ページはを以前と同じように表示することを望んでいる可能性もあります。そこで、prefers-color-scheme を介してブラウザが送信するシグナルに従いつつも、オプションでユーザーがシステムレベルの設定を上書きできるようにすることが、優れたパターンと言えます。

<dark-mode-toggle> カスタム要素 #

もちろん、このためのコードを自分で作成することもできますが、ちょうどこの目的のために私が作成した既製のカスタム要素（Web コンポーネント）を使用することもできます。これは <dark-mode-toggle> と呼ばれ、完全にカスタマイズできるトグル（ダークモード: オン/オフ）またはテーマスイッチャー（テーマ: ライト/ダーク）をページに追加します。以下のデモは、動作中の要素を示しています（上記の他のすべての例でも🤫こっそり挿入しています）。

<dark-mode-toggle
    legend="Theme Switcher"
    appearance="switch"
    dark="Dark"
    light="Light"
    remember="Remember this"
></dark-mode-toggle>