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

過剰な期待や必要性ダークモードの詳細や、ダークモードをサポートする方法を学びました。

はじめに

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

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

その後導入されたカラー CRT は、赤、緑、青の蛍光体を使用して複数の色を表示しました。3 つの蛍光体を同時に活性化することで白色を作り出しました。 より高度な WYSIWYG デスクトップ パブリッシングの登場により、仮想ドキュメントを物理的な紙のシートに似せるという考えが広く普及しました。

ここを出発点としたデザイン トレンドであるダーク オン ホワイトは、初期のドキュメント ベースのウェブにも引き継がれています。世界初のブラウザである WorldWideWeb（CSS はまだ開発されていません）では、この方法でウェブページを表示していました。豆知識: 2 番目のブラウザであるラインモード ブラウザ（ターミナル ベースのブラウザ）は、ダークでは緑色でした。最近のウェブページやウェブアプリは通常、明るい背景に暗いテキストを使用して設計されます。この前提は、Chrome などのユーザー エージェント スタイルシートでもハードコードされています。

CRT の時代はもう終わりました。コンテンツの消費と制作は、バックライト付きの LCD 画面や省エネ AMOLED 画面を使用するモバイル デバイスに移行しています。パソコン、タブレット、スマートフォンが小型で持ち運びやすくなったことで、新たな使用パターンが生まれました。 ウェブ ブラウジング、娯楽のためのコーディング、ハイエンド ゲームなどのレジャー タスクは、薄暗い環境では営業時間外に行われることがよくあります。夜になると、ベッドでデバイスを楽しんでいる人もいます。 暗闇でデバイスを使用する人が多いほど、「明るめ」のルーツに立ち戻るという考え方が強くなります。

ダークモードのメリット

見た目上の理由からダークモードに切り替える

なぜダークモードが好きなのかと尋ねられた場合、最も多い回答は「目に優しい」、次に「エレガントで美しい」です。Apple のダークモードに関するデベロッパー向けドキュメントに次のように明記されています。「明るい外観と暗い外観のどちらを選択するかは、ほとんどのユーザーにとって見た目の美しさであり、周囲の明るさの状況とは関係ありません。」

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

ロービジョンの方など、実際にダークモードを必要にして別のユーザー補助ツールとして使用するユーザーもいます。このようなユーザー補助ツールが初めて見つかったのは、System 7 の CloseView 機能で、白地に黒色と黒地に白色の切り替えボタンがありました。システム 7 はカラーをサポートしていましたが、デフォルトのユーザー インターフェースはまだモノクロでした。

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

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

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

最後に、ダークモードは、AMOLED 画面で大量のエネルギーを節約できることがわかっています。YouTube などの人気の Google アプリに焦点を当てた Android の事例紹介では、最大 60% の電力節約が可能であることが示されています。以下の動画では、これらの事例の詳細とアプリごとの節電内容について説明しています。

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

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

通常、ダークモードまたはダークモードをサポートしているオペレーティング システムには、設定のいずれかでそれらを有効にするオプションがあります。macOS X では、システム設定の [General] セクションの [Appearance]（スクリーンショット）にあります。Windows 10 では、[Colors] セクションに [Choose your color] が表示されます（スクリーンショット）。Android Q では、[ディスプレイ] の [ダークモード] の切り替えスイッチ（スクリーンショット）が表示されます。iOS 13 では、設定の [ディスプレイと明るさ] セクションで [デザイン] を変更できます（スクリーンショット）。

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

本題に入る前に、理論をもう一つだけ。メディアクエリを使用すると、作成者はレンダリングされるドキュメントに関係なく、ユーザー エージェントまたは表示デバイスの値や機能をテストしてクエリできます。ドキュメントや、HTML や JavaScript などのさまざまなコンテキストや言語に条件付きでスタイルを適用するために、CSS の @media ルールで使用されます。メディアクエリ レベル 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 は、Chrome と Edge のバージョン 76 以降、Firefox のバージョン 67 以降、Safari のバージョン 12.1 以降（macOS の場合）、および Safari のバージョン 13 以降（iOS の場合）で、パソコンとモバイル（利用可能な場合）の両方でサポートされています。その他のブラウザについては、サポート表は使用できますかを確認してください。

リクエスト時にユーザー設定を確認する

Sec-CH-Prefers-Color-Scheme Client Hints ヘッダーを使用すると、サイトはリクエスト時に必要に応じてユーザーのカラーパターンの設定を取得できます。これにより、サーバーは適切な 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 は任意の選択であり、デフォルトのフォールバック エクスペリエンスもダークにできます）。スタイル設定されていないコンテンツがフラッシュすることを避けるため、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 で行うことができます。以下に実際のスタイルの抜粋を示しますが、全体的なアイデアを伝えるのに十分です。-⁠-⁠color と -⁠-⁠background-color の 2 つの変数を宣言します。これらの変数は基本的に、ダーク オン ライトとライト オン ダークのベースライン テーマを作成します。

/* 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 Adjust Module レベル 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.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

Chromium 93 と Safari 15 では、meta テーマカラー要素の media 属性を使用して、メディアクエリに基づいて色を調整できます。最初に一致したものが選択されます。たとえば、ライトモードとダークモード用に 1 つの色を設定できます。このドキュメントの執筆時点では、これらをマニフェストで定義することはできません。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 コマンドを実行して、[Emulate CSS media featurepreferreds-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 プロパティの値を表す CSS キーワード currentColor を利用できます。これにより、デフォルトでは値を受け取らないプロパティで color 値を使用できます。便利なことに、currentColor を SVG の fill 属性または stroke 属性の値として使用している場合は、代わりに色プロパティから継承された値からその値を取得します。さらに良いことに、これは <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);
}

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

一般的に、読み込みのパフォーマンス上の理由から、<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>

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

まとめ

ダークモードの使用とサポートが楽しくなり、新しいデザインの道が開かれます。 サイト訪問者によっては、サイトを適切に処理できないことと、ユーザーが満足できるかを分ける場合があります。いくつか注意点があり、入念なテストはもちろん必要ですが、ダークモードは、すべてのユーザーを大切にしていることを示す絶好の機会です。この投稿で紹介しているベスト プラクティスと、<dark-mode-toggle> カスタム要素などのヘルパーを活用することで、優れたダークモードを自信を持って作成できるようになります。作成したコンテンツ、この投稿が役に立ったかどうか、改善案などがありましたら、Twitter でお知らせください。 最後までお読みいただきありがとうございました。🌒

関連リンク

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

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

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

• color-scheme CSS プロパティとメタタグ
• Chrome プラットフォームのステータス ページ
• Chromium のバグ
• CSS 色調整モジュール レベル 1 の仕様
• メタタグと CSS プロパティに関する CSS WG GitHub の問題
• メタタグに関する HTML WHATWG GitHub の問題

一般的なダークモードのリンク:

• マテリアル デザイン - ダークモード
• ウェブ インスペクタのダークモード
• WebKit のダークモードのサポート
• Apple ヒューマン インターフェース ガイドライン - ダークモード

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

• ダークモードの「supported-color-schemes」の実際の機能は何ですか？🤔
• やみくもに！🌚? たぶん...
• ダークモード用の再色付け

謝辞

prefers-color-scheme メディア機能、color-scheme CSS プロパティ、関連するメタタグは、Rune Lillesveen の実装作業です。Rune は CSS Color Adjust Module Level 1 仕様の共同編集者でもあります。この記事を徹底的にレビューしてくれた Lukasz Zbylut、Rowan Merewood、Chirag Desai、Rob Dodson に感謝します 🙏?読み込み方法は Jake Archibald が考案したものです。Emilio Cobos Havelvarez は、prefers-color-scheme の正しい検出方法を紹介しました。 参照されている SVG と currentColor に関するヒントは、Timothy Hatcher によるものです。最後に、この記事の推奨案の策定に役立った、さまざまなユーザー調査に匿名で参加された多くの皆様に感謝いたします。ヒーロー画像（作成者: Nathan Anderson）。