過大評価か、それとも必要不可欠か？ダークモードのすべてと、ユーザーのメリットとなるようにダークモードをサポートする方法を学びましょう。
はじめに
ダークモード前のダークモード
ダークモードが完全にサポートされるようになりました。 パーソナル コンピューティングの黎明期には、ダークモードは選択肢ではなく、事実でした。モノクロの CRT コンピュータ モニターは、蛍光スクリーンに電子ビームを照射することで動作し、初期の CRT で使用されていた蛍光体は緑色でした。テキストが緑色で表示され、画面の残りの部分が黒色だったため、これらのモデルはグリーン スクリーンと呼ばれることがよくありました。
その後導入されたカラー CRT では、赤、緑、青の蛍光体を使用して複数の色が表示されました。3 つの蛍光体を同時に活性化することで、白色を作り出しました。より高度な WYSIWYG DTP の登場により、仮想ドキュメントを物理的な紙に似せるというアイデアが普及しました。
ここから、デザイン トレンドとしての白地に黒が始まり、このトレンドは初期のドキュメント ベースのウェブに引き継がれました。最初のブラウザである WorldWideWeb（CSS はまだ発明されていません）では、ウェブページがこのように表示されていました。興味深いことに、2 番目のブラウザである Line Mode Browser（ターミナルベースのブラウザ）は、暗い背景に緑色の文字でした。最近のウェブページやウェブアプリは、通常、明るい背景に暗いテキストでデザインされています。この基本設定は、Chrome を含むユーザー エージェントのスタイルシートにもハードコードされています。
CRT の時代はとうに終わりました。コンテンツの消費と作成は、バックライト付き LCD または省電力の AMOLED 画面を使用するモバイル デバイスに移行しています。より小型で持ち運びやすいパソコン、タブレット、スマートフォンが登場したことで、新しい利用パターンが生まれました。ウェブ ブラウジング、趣味のコーディング、ハイエンド ゲームなどのレジャー タスクは、多くの場合、勤務時間外に薄暗い環境で行われます。夜間にベッドでデバイスを楽しむ人もいます。 暗い場所でデバイスを使用する人が増えるにつれて、ダークモードの原点に立ち返るという考え方が普及しています。
ダークモードのメリット
見た目の理由でダークモードを使用している
ダークモードを好む理由やダークモードを求める理由を尋ねると、最も多い回答は「目に優しい」で、次に多い回答は「エレガントで美しい」です。Apple は、ダークモードのデベロッパー向けドキュメントで、「ライトモードとダークモードのどちらを有効にするかは、ほとんどのユーザーにとって美的な選択であり、周囲光の条件とは関係がない場合があります」と明記しています。
ユーザー補助ツールとしてのダークモード
また、ダークモードを必要とし、別のユーザー補助ツールとして使用するユーザーもいます。たとえば、ロービジョンのユーザーです。私が確認できた最も古いユーザー補助ツールは、System 7 の CloseView 機能です。この機能には、Black on White と White on Black の切り替えがありました。System 7 はカラーに対応していましたが、デフォルトのユーザー インターフェースは白黒のままでした。
これらの反転ベースの実装は、色が導入されると弱点を示しました。Szpiro らによるロービジョンのユーザーがコンピューティング デバイスにアクセスする方法に関するユーザー調査では、インタビューを受けたすべてのユーザーが反転画像を嫌っていましたが、多くのユーザーが暗い背景に明るいテキストを好んでいました。Apple は、スマート反転と呼ばれる機能でこのユーザー設定に対応しています。この機能は、画像、メディア、暗いカラースタイルを使用する一部のアプリを除き、ディスプレイの色を反転させます。
ロービジョンの特殊な形態として、コンピュータ ビジョン症候群（デジタル眼精疲労とも呼ばれます）があります。これは、「パソコン（デスクトップ、ノートパソコン、タブレットなど）やその他の電子ディスプレイ（スマートフォンや電子書籍リーダーなど）の使用に関連する眼や視力の問題の組み合わせ」と定義されています。青少年が電子機器を使用すると、特に夜間に使用した場合、睡眠時間の短縮、入眠潜時の延長、睡眠不足のリスクが高まることが示唆されています。さらに、ブルーライトへの曝露は、概日リズムと睡眠サイクルの調節に関与していることが広く報告されています。Rosenfield の研究によると、不規則な光環境は睡眠不足につながり、気分やタスクのパフォーマンスに影響を与える可能性があります。こうした悪影響を抑えるには、iOS の Night Shift や Android の夜間モードなどの機能でディスプレイの色温度を調整してブルーライトを減らすことが有効です。また、ダークモードやダークテーマを使用して、明るい光や不規則な光を避けることも効果的です。
AMOLED 画面でのダークモードの省電力
最後に、ダークモードは AMOLED 画面で大量のエネルギーを節約することが知られています。YouTube などの人気のある Google アプリに焦点を当てた Android のケーススタディでは、最大 60% の省電力が可能であることが示されています。以下の動画では、これらのケーススタディとアプリごとの電力節約について詳しく説明しています。
オペレーティング システムでダークモードを有効にする
ダークモードが多くのユーザーにとって重要である理由を説明しました。次に、ダークモードをサポートする方法を確認しましょう。
ダークモードまたはダークテーマをサポートするオペレーティング システムには、通常、設定のどこかにそれを有効にするオプションがあります。macOS X では、システム設定の [一般] セクションに [外観]（スクリーンショット）という名前で表示されます。Windows 10 では、[色] セクションに [色を選択する]（スクリーンショット）という名前で表示されます。Android Q では、[ディスプレイ] の [ダークモード] 切り替えスイッチ（スクリーンショット）で、iOS 13 では、設定の [画面表示と明るさ] セクションの [外観]（スクリーンショット）で変更できます。
prefers-color-scheme メディアクエリ
最後に、理論について少し説明します。メディアクエリを使用すると、作成者は、レンダリングされるドキュメントとは無関係に、ユーザー エージェントまたはディスプレイ デバイスの値や機能をテストしてクエリできます。これらは、CSS の @media ルールでドキュメントに条件付きでスタイルを適用するために使用されるほか、HTML や JavaScript などのさまざまなコンテキストや言語で使用されます。メディアクエリ レベル 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 の macOS バージョン 12.1 以降、iOS バージョン 13 以降で、デスクトップとモバイル（利用可能な場合）の両方でサポートされています。他のすべてのブラウザについては、Can I use support tables のドキュメントをご覧ください。
リクエスト時にユーザーの設定を学習する
Sec-CH-Prefers-Color-Scheme Client Hints ヘッダーを使用すると、サイトはリクエスト時にユーザーのカラーパターンの設定をオプションで取得できます。これにより、サーバーは適切な CSS をインライン化できるため、誤ったカラーテーマがフラッシュされるのを回避できます。
ダークモードの実際
最後に、ダークモードをサポートする実際の例を見てみましょう。 ハイランダーと同様に、ダークモードでは 1 つしか存在できません。ダークモードかライトモードのいずれかであり、両方になることはありません。なぜこの話をしたかというと、この事実は、読み込み戦略に影響を与えるはずです。現在使用していないモードの CSS を、クリティカル レンダリング パスでユーザーに強制的にダウンロードさせないでください。そのため、読み込み速度を最適化するために、重要でない CSS を遅らせるために、次の推奨事項を実際に示すサンプルアプリの CSS を 3 つの部分に分割しました。
style.css。サイトで汎用的に使用される一般的なルールが含まれています。dark.css。ダークモードに必要なルールのみが含まれています。light.css。ライトモードに必要なルールのみが含まれています。
読み込み方法
後者の 2 つ（light.css と dark.css）は、<link media> クエリを使用して条件付きで読み込まれます。当初は、すべてのブラウザが prefers-color-scheme をサポートするわけではありません（上記のパターンを使用して検出可能）。これには、非常に小さなインライン スクリプトで条件付きで挿入された <link rel="stylesheet"> 要素を介してデフォルトの light.css ファイルを読み込むことで、動的に対処します（ライトは任意の選択です。ダークをデフォルトのフォールバック エクスペリエンスにすることもできます）。スタイリングされていないコンテンツの表示を避けるため、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 Adjustment Module Level 1 で指定されています。
あとは、サイトで重要な要素の CSS 変数を定義するだけです。スタイルを意味的に整理すると、ダークモードを操作する際に非常に役立ちます。たとえば、--highlight-yellow ではなく、変数 --accent-color を呼び出すことを検討してください。「yellow」はダークモードでは実際には黄色ではない場合や、その逆の場合があるためです。以下は、この例で使用するその他の変数の例です。
/* 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);
}
完全な例
次の埋め込みデモでは、上記のコンセプトを実践した実証済みの例を確認できます。オペレーティング システムの設定でダークモードを切り替えて、ページの反応を確認します。
影響を読み込んでいます
この例を試してみると、メディアクエリを介して dark.css と light.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 をエミュレートする] オプションを変更します。
![Chrome DevTools の [Rendering] タブにある [Emulate CSS media feature prefers-color-scheme] オプションのスクリーンショット。](https://web.developers.google.cn/static/articles/prefers-color-scheme/image/a-screenshot-the-emulat-f4221ac142773.png?hl=ja)
Puppeteer で prefers-color-scheme のスクリーンショットを撮る
Puppeteer は、DevTools Protocol を介して 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 のアイコンは反転していません。また、: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 はコンテキストに適用されます。これは、インラインまたは <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>
<dark-mode-toggle>（ライトモード）。
<dark-mode-toggle>。
次のデモで、右上にあるダークモードのコントロールをクリックまたはタップしてみてください。 3 番目と 4 番目のコントロールのチェックボックスをオンにすると、ページを再読み込みしてもモードの選択が記憶されます。これにより、訪問者はオペレーティング システムをダークモードに保ちながら、サイトをライトモードで楽しむことができます。また、その逆も可能です。
まとめ
ダークモードのサポートは楽しく、新しいデザインの可能性を広げます。一部の訪問者にとっては、サイトを操作できないか、快適に利用できるかの違いになります。いくつかの落とし穴があり、慎重なテストが不可欠ですが、ダークモードは、すべてのユーザーを大切にしていることを示す絶好の機会です。この投稿で紹介したベスト プラクティスと <dark-mode-toggle> カスタム要素などのヘルパーを使用すれば、優れたダークモード エクスペリエンスを作成できるはずです。作成した内容や、この投稿が役に立ったかどうか、改善のための提案などについて、Twitter でお知らせください。最後までお読みいただきありがとうございました。🌒
関連リンク
prefers-color-scheme メディアクエリのリソース:
color-scheme メタタグと CSS プロパティのリソース:
color-schemeCSS プロパティとメタタグ- Chrome プラットフォーム ステータスのページ
- Chromium のバグ
- CSS Color Adjustment Module Level 1 仕様
- メタタグと CSS プロパティに関する CSS WG GitHub の問題
- メタタグに関する HTML WHATWG GitHub の問題
ダークモードに関する一般的なリンク:
- マテリアル デザイン - ダークモード
- ウェブ インスペクタのダークモード
- WebKit でのダークモードのサポート
- Apple Human Interface Guidelines - ダークモード
この投稿の背景調査に関する記事:
謝辞
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 氏から提供されました。最後に、この記事の推奨事項をまとめるうえで、さまざまなユーザー調査にご協力いただいた多くの匿名の参加者に感謝いたします。