Preferreds-color-scheme: やあ、暗闇、旧友よ

過大評価されているのか、それとも必要不可欠なのか？ダークモードの概要と、ユーザーの利便性を高めるためのダークモードのサポート方法について説明します。

Thomas Steiner

はじめに

注: 私はダークモードの歴史と理論について多くの背景調査を行ってきました。ダークモードの操作のみに関心がある場合は、導入をスキップしてください。

ダークモード前のダークモード

グリーン スクリーン（ソース）

ダークモードは一巡しました。 パソコンの黎明期には、ダークモードは選択の問題ではなく、事実の問題でした。モノクロの CRT コンピュータ モニターは、蛍光スクリーンに電子ビームを照射することで動作し、初期の CRT で使用されていた蛍光体は緑色でした。テキストが緑色で表示され、画面の残りの部分が黒色だったため、これらのモデルは「グリーン スクリーン」と呼ばれることがよくありました。

白地に黒字（ソース）

その後、赤、緑、青の蛍光体を使用して複数の色を表示するカラー CRT が導入されました。3 つの蛍光体を同時に発光させることで、白が作り出されました。より高度な WYSIWYG DTP の登場により、仮想ドキュメントを物理的な用紙に似せるという考え方が一般的になりました。

WorldWideWeb ブラウザ（出典）

白地に黒字というデザイン トレンドはここから始まり、このトレンドは初期のドキュメントベースのウェブに引き継がれました。最初のブラウザである WorldWideWeb（CSS はまだ発明されていませんでした）は、ウェブページをこのように表示していました。豆知識: 2 番目に登場したブラウザである Line Mode Browser（ターミナルベースのブラウザ）は、暗い背景に緑色の文字で表示されていました。最近のウェブページやウェブアプリは、通常、明るい背景に暗いテキストが配置されるように設計されています。この基本的な想定は、Chrome を含むユーザー エージェント スタイルシートにもハードコードされています。

ベッドでスマートフォンを使用

CRT の時代はとうに終わりました。コンテンツの消費と作成は、バックライト付きの LCD または省エネの AMOLED スクリーンを使用するモバイル デバイスに移行しています。小型で持ち運びやすいパソコン、タブレット、スマートフォンが登場したことで、新しい利用パターンが生まれました。ウェブ閲覧、趣味のコーディング、ハイエンド ゲームなどのレジャー タスクは、通常、薄暗い環境で勤務時間外に行われます。夜間にベッドでデバイスを使用する人もいます。暗い場所でデバイスを使用する人が増えるほど、ライトオンダークの原点に戻るという考え方が広まります。

ダークモードのメリット

見た目を良くするためにダークモードを使用する

ダークモードを好む理由やダークモードを希望する理由について尋ねると、最も多い回答は「目に優しい」で、次いで「エレガントで美しい」となっています。Apple は、ダークモードのデベロッパー向けドキュメントで、「ライトモードとダークモードのどちらを有効にするかの選択は、ほとんどのユーザーにとって美的感覚によるものであり、周囲の照明条件とは関係がない可能性があります」と明記しています。

注: ユーザー調査で、ユーザーがダークモードを好む理由や使用方法について詳しくご覧ください。

Mac OS System 7 の CloseView で「白黒反転」モードを使用している様子（出典）

ユーザー補助ツールとしてのダークモード

また、ロービジョンのユーザーなど、ダークモードを必要とし、ユーザー補助ツールとして使用しているユーザーもいます。このようなユーザー補助ツールで最も古いものは、System 7 の CloseView 機能です。この機能には、白地に黒文字と黒地に白文字を切り替えるオプションがありました。System 7 はカラーをサポートしていましたが、デフォルトのユーザー インターフェースは白黒でした。

反転ベースの実装は、色を導入すると弱点が明らかになりました。Szpiro らによるロービジョンの方がコンピューティング デバイスにアクセスする方法に関するユーザー調査では、インタビューを受けたすべてのユーザーが反転画像を嫌っていることがわかりました。しかし、多くのユーザーは暗い背景に明るいテキストを好んでいました。Apple は、このユーザー設定に対応するため、スマート反転という機能を提供しています。この機能は、画像、メディア、暗い色のスタイルを使用する一部のアプリを除き、ディスプレイの色を反転させます。

弱視の特殊な形態として、コンピュータ ビジョン症候群（デジタル眼精疲労とも呼ばれます）があります。これは、「コンピュータ（デスクトップ、ノートパソコン、タブレットなど）やその他の電子ディスプレイ（スマートフォンや電子書籍リーダーなど）の使用に関連する眼と視覚の問題の組み合わせ」と定義されています。青少年の電子デバイスの使用、特に夜間の使用は、睡眠時間の短縮、入眠までの時間の延長、睡眠不足のリスクの増加につながるという提案がなされています。また、ブルーライトへの曝露は、概日リズムと睡眠サイクルの調節に関与していることが広く報告されています。Rosenfield の研究によると、不規則な光環境は睡眠不足につながり、気分やタスクのパフォーマンスに影響を与える可能性があります。こうした悪影響を抑えるには、iOS のナイトシフトや Android の夜間モードなどの機能でディスプレイの色温度を調整してブルーライトを減らすことや、ダークモードやダークテーマで明るい光や不規則な光を避けることが有効です。

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

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

オペレーティング システムでダークモードを有効にする

多くのユーザーにとってダークモードが重要な理由を説明したので、次はダークモードをサポートする方法を見ていきましょう。

Android Q のダークモード設定

ダークモードまたはダークテーマをサポートするオペレーティング システムには、通常、設定のどこかにダークモードまたはダークテーマを有効にするオプションがあります。macOS X では、システム環境設定の [一般] セクションにあり、[外観] と呼ばれています（スクリーンショット）。Windows 10 では、[色] セクションにあり、[色を選択する] と呼ばれています（スクリーンショット）。Android Q では、[ディスプレイ] の [ダークモード] 切り替えスイッチ（スクリーンショット）で設定できます。iOS 13 では、設定の [画面表示と明るさ] セクションで [外観] を変更できます（スクリーンショット）。

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

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

注: ☝️ 確立されたユーザー設定メディア機能は prefers-reduced-motion で、ページ上のモーションを減らしたいというユーザーの希望を検出できます。以前に prefers-reduced-motion についての記事を執筆したことがあります。

prefers-color-scheme メディア機能は、ユーザーがページでライト カラーテーマとダーク カラーテーマのどちらを使用するようリクエストしたかを検出するために使用されます。次の値を使用します。

• light: ユーザーがライトモード（明るい背景に暗い色のテキスト）のページを希望していることをシステムに通知したことを示します。
• dark: ユーザーが、ダークモード（暗い背景に明るい色のテキスト）のページを希望していることをシステムに通知したことを示します。

注: 以前のバージョンの仕様には、3 番目の値 no-preference が含まれていました。これは、ユーザーがシステムに認識されている設定を行っていないことを示すためのものでした。この値を実装したブラウザはなかったため、仕様から削除されました。

ダークモードのサポート

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

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

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

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

注: 古いブラウザにダークモードのサポートを追加するカスタム要素 <dark-mode-toggle> があります。詳しくは、この記事の後半をご覧ください。

リクエスト時にユーザーの好みを学習する

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 をサポートするわけではありません（上記のパターンを使用して検出可能）。そこで、条件付きで挿入された <link rel="stylesheet"> 要素を介してデフォルトの light.css ファイルを読み込むことで、動的に処理しています（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 を汎用的なままに保ち、ライトモードとダークモードのカスタマイズはすべて dark.css と light.css の 2 つのファイルで行うことができます。以下に実際のスタイルの抜粋を示しますが、全体像を把握するには十分でしょう。-⁠-⁠color と -⁠-⁠background-color の 2 つの変数を宣言します。これにより、dark-on-light と light-on-dark のベースライン テーマが作成されます。

/* 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);
}

上記のコードサンプルでは、スペース区切りの値 light dark を持つプロパティ color-scheme があります。

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

注: 🌒 color-scheme の実際の動作について詳しくは、こちらをご覧ください。

それ以外は、サイトで重要な要素の 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 を読み込む理由がわかります。ダークモードを切り替えてページを再読み込みしてみてください。現在一致しない特定のスタイルシートは、優先度が最も低い状態で読み込まれるため、サイトで現在必要なリソースと競合することはありません。

注: 😲 ブラウザが一致しないメディアクエリでスタイルシートをダウンロードする理由について詳しくは、こちらをご覧ください。

ライトモードのサイトでは、優先度が最も低いダークモードの CSS が読み込まれます。

ダークモードのサイトで、優先度が最も低いライトモードの CSS が読み込まれます。

prefers-color-scheme をサポートしていないブラウザでデフォルトのライトモードのサイトが、優先度が最も低いダークモードの CSS を読み込みます。

ダークモードの変更に対応する

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

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

Chromium 93 と Safari 15 以降では、meta テーマカラー要素の media 属性を使用して、メディアクエリに基づいて色を調整できます。最初に一致したものが選択されます。たとえば、ライトモードとダークモードで異なる色を使用できます。このドキュメントの作成時点では、マニフェストでこれらを定義することはできません。w3c/manifest#975 GitHub の問題を参照してください。

<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 では、現在表示されているタブにのみ影響を与える方法で、ユーザーが選択したカラーパターンをエミュレートできるようになりました。コマンド メニューを開き、「Rendering」と入力して Show Rendering コマンドを実行し、[CSS メディア特性 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 つのスクリーンショットを比較すると、コアテーマが dark-on-light から light-on-dark に変更されただけでなく、ヒーロー画像も若干異なっていることがわかります。ユーザー調査の結果、ダークモードが有効になっている場合、回答者の大多数は鮮やかさや明るさがやや低い画像を好むことがわかりました。これを再配色と呼びます。

ダークモードでヒーロー画像が少し暗くなります。

ライトモードの通常のヒーロー画像。

画像の 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 のアイコンは反転させていないことに注目してください。また、:hover では、ユーザーが選択したモードに応じてアイコンが若干暗くまたは明るく見えるように、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 CSS キーワードを活用できます。これにより、デフォルトで 値を受け取らないプロパティで color 値を使用できます。 currentColor が SVG の fill 属性または stroke 属性の値として使用されている場合、代わりに color プロパティの継承された値から値を取得します。さらに、これは <svg><use href="…"></svg> にも適用されるため、リソースを分離しても、currentColor はコンテキスト内で適用されます。これは、インライン SVG または <use href="…"> SVG でのみ機能します。画像の src として参照される SVG や、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);
}

ダークモードの Art direction

一般的に、読み込みパフォーマンスの理由から、<link> 要素の media 属性で prefers-color-scheme のみを使用することをおすすめしますが（スタイルシートでインラインを使用するのではなく）、HTML コードで prefers-color-scheme を直接インラインで使用したい場合もあります。アート ディレクションもその一つです。ウェブでは、アート ディレクションはページの全体的な視覚的表現と、視覚的なコミュニケーション、ムードの刺激、機能の対比、ターゲット オーディエンスへの心理的な訴求を扱います。

ダークモードでは、特定のモードで最適な画像がどれであるか、また、画像の色付けが十分でないかどうかを判断するのは、デザイナーの裁量に委ねられます。<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 はダークモードにしたいが、ウェブページはこれまでどおりに表示したいというユーザーもいます。優れたパターンは、最初はブラウザが prefers-color-scheme を通じて送信するシグナルに準拠し、その後、ユーザーがシステムレベルの設定をオーバーライドできるようにすることです。

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

もちろん、このコードを自分で作成することもできますが、この目的のために作成した既製のカスタム要素（ウェブ コンポーネント）を使用することもできます。<dark-mode-toggle> と呼ばれるもので、完全にカスタマイズ可能な切り替え（ダークモード: オン/オフ）またはテーマ切り替え（テーマ: ライト/ダーク）をページに追加します。次のデモは、要素の動作を示しています（🤫 ちなみに、上記の他の 例にもこっそり追加しています）。

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

ライトモードの <dark-mode-toggle>。

ダークモードの <dark-mode-toggle>。

次のデモで、右上にあるダークモードのコントロールをクリックまたはタップしてみてください。3 番目と 4 番目のコントロールのチェックボックスをオンにすると、ページを再読み込みしてもモードの選択が記憶されることがわかります。これにより、サイト訪問者はオペレーティング システムをダークモードのまま、サイトをライトモードで楽しむことができます。

まとめ

ダークモードのサポートは楽しく、新しいデザインの可能性を広げます。一部のユーザーにとっては、サイトを操作できないか、満足して利用できるかの違いになります。落とし穴もあるため、慎重なテストは必須ですが、ダークモードはすべてのユーザーを大切にしていることを示す絶好の機会です。この記事で紹介したベスト プラクティスと <dark-mode-toggle> カスタム要素などのヘルパーを使用すれば、素晴らしいダークモード エクスペリエンスを自信を持って作成できるはずです。X（旧 Twitter）で、作成した内容や、この投稿が役に立ったかどうか、改善点などをお知らせください。最後までお読みいただきありがとうございました。🌒

関連リンク

prefers-color-scheme メディアクエリのリソース:

• Chrome プラットフォームのステータスのページ
• Chromium バグ
• メディアクエリ レベル 5 の仕様

color-scheme メタタグと CSS プロパティに関するリソース:

• color-scheme CSS プロパティとメタタグ
• Chrome プラットフォームのステータスのページ
• Chromium バグ
• CSS Color Adjustment Module Level 1 仕様
• メタタグと CSS プロパティに関する CSS WG GitHub の問題
• メタタグに関する HTML WHATWG GitHub の問題

ダークモードに関する一般的なリンク:

• マテリアル デザイン - ダークモード
• ウェブ インスペクタのダークモード
• WebKit でのダークモードのサポート
• Apple Human Interface Guidelines - Dark Mode

この記事の背景調査に関する記事:

• ダークモードの「supported-color-schemes」は実際には何をするのですか？🤔
• 闇よ、来たれ！🌚 多分…
• ダークモードの再配色

謝辞

prefers-color-scheme メディア特性、color-scheme CSS プロパティ、関連するメタタグは、👏 Rune Lillesveen の実装作業です。Rune は、CSS Color Adjustment Module Level 1 仕様の共同編集者でもあります。 この記事を徹底的にレビューしてくれた Lukasz Zbylut、Rowan Merewood、Chirag Desai、Rob Dodson に感謝します。読み込み戦略は、Jake Archibald の発案によるものです。Emilio Cobos Álvarez 氏が、正しい prefers-color-scheme 検出方法を教えてくれました。参照 SVG と currentColor を含むヒントは、Timothy Hatcher から提供されました。最後に、この記事の推奨事項の作成にご協力いただいた、さまざまなユーザー調査の多くの匿名参加者に感謝いたします。