このページは Cloud Translation API によって翻訳されました。

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

過大宣伝または必要性？ダークモードの詳細、ユーザーにとって役立つダークモードをサポートする方法を紹介します。

Thomas Steiner

はじめに

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

ダークモードも使えるようになりました。パーソナルコンピューティングが登場した当時は、ダークモードは選択的なものではありませんでした。しかし、実際のところ、電子ビームを発射するモノクロの CRT パソコンモニター初期の CRT で使われていた蛍光体は緑色でした。文字は緑色、画面の残りの部分は黒色だったため、このようなモデルはグリーンスクリーン。

その後発売されたカラー CRT は、赤、緑、青の蛍光体を使用します。 3 つの蛍光体すべてを同時に活性化することで白色を作り出しました。さらに洗練された WYSIWYG の登場によりデスクトップパブリッシング、仮想ドキュメントを紙の紙によく似たものにするというアイデアが広まりました。

WorldWideWeb ブラウザに表示されたダークオンホワイトのウェブページ — The WorldWideWeb browser（出典）

ここから、デザイントレンドとしてのダークオンホワイトが生まれました。このトレンドは初期のドキュメントベースのウェブの登場です。 Google 史上初のブラウザ、 WorldWideWeb （前述のとおり、 CSS はまだ考案されていない）、ウェブページがこのように表示されます。豆知識: 史上第 2 のブラウザ、 Line Mode Browser（ターミナルベースのブラウザ）が廃止されました。暗いところは緑です。最近では、ウェブページやウェブアプリは通常、ダークテキストを使用してデザインされていますベースラインの前提条件が、ユーザーエージェントスタイルシートでもハードコードされています。 Chrome。

ベッドで横になるときに使用するスマートフォン — ベッドの中で使用するスマートフォン（出典: Unsplash）

CRT の時代は終わりました。コンテンツの視聴と作成はモバイルデバイスに移行しているバックライト LCD を使用または省エネ AMOLED スクリーンを採用。パソコン、タブレット、スマートフォンが小型化され、持ち運びが容易になったことで、新たな使用パターンが生まれました。ウェブブラウジング、コーディング、ハイエンドゲームなどのレジャータスク薄暗い環境で勤務時間外に頻繁に発生します。夜にはベッドの中でデバイスを楽しむ人もいます。暗い場所でデバイスを使う人が増えるほど light-on-dark の原点に戻るアイデアは広く普及します。

ダークモードを選ぶ理由

デザイン上の理由からダークモード

質問を受けたときダークモードが好きまたは使いたい理由最も人気のある回答は「目に優しい」というものでした。その後に「エレガントで美しい」と続きます。同業他社の Apple ダークモードに関するデベロッパー向けドキュメント次のように明示的に書いています。「ライト表示とダーク表示のどちらを有効にするかの選択はほとんどのユーザーにとって美しいものであり、周囲の照明条件には関係ない場合があります。」

で確認できます。 <ph type="x-smartling-placeholder">

CloseView を Mac OS System 7 と — System 7 CloseView（ソース）

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

実際にダークモードを必要とし、別のユーザー補助ツールとして使用する人もいます。たとえばロービジョンのユーザーなどですこのようなユーザー補助ツールが最も早く見つかったのはシステム 7 の CloseView 機能。これには次の切り替えボタンがありました。「黒地に黒」と「黒地に白」という 2 つの画像があります。システム 7 は色をサポートしていましたが、デフォルトのユーザーインターフェースは依然としてモノクロでした。

これらの反転ベースの実装は、色が導入された後の弱点を示しました。 Szpiro 他によるユーザー調査ロービジョンの方がコンピューティングデバイスにアクセスする方法が、インタビューを行ったすべてのユーザーが反転した画像を好まないと回答したことが明らかになりました。暗い背景に明るい色の文字を好む人も多くいます。 Apple は、スマート反転ディスプレイに表示される色が反転します。ただし、画像、メディア、ダークカラースタイルを使用する一部のアプリです

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

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

最後に、ダークモードは電力を大量に節約できることが知られています。 AMOLED 画面人気の Google アプリに焦点を置いた Android の事例紹介 YouTube によると、電力を最大 60% 節約できます。以下の動画では、これらの事例とアプリごとの電力節約について詳しく説明しています。

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

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

ダークモードまたはダークモードをサポートするオペレーティングシステム通常は、設定のいずれかの場所で有効にできます。 macOS X では、システム設定の [全般] セクションの [デザイン] にあります（スクリーンショット）。 Windows 10 では、[色] セクションの [色の選択] に表示されています（スクリーンショット）。 Android Q では、[ディスプレイ] の下に [ダークモード] 切り替えスイッチ（スクリーンショット）が表示されます。 iOS 13 では、デザインを明るさ セクション（スクリーンショット）で確認できます。

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

最後にもう一つ、理論について説明します。メディアクエリ作成者がユーザーエージェントやディスプレイデバイスの値や機能をテストして照会できるようにする関数を呼び出せますこれは、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 以降）。その他のブラウザについては、サポートテーブルを使用できるかをご確認ください。

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

Sec-CH-Prefers-Color-Scheme クライアントヒントヘッダーにより、サイトがリクエスト時に必要に応じてユーザーのカラーパターンの設定を取得できます。サーバーが適切な CSS をインライン化できるため、誤ったカラーテーマの点滅を回避できます。

ダークモードの活用例

最後に、ダークモードのサポートが実際にどのように行われるかを見てみましょう。 Highlanderと同じく、ダークモードではダークとライトのどちらか一方しか存在できませんが、両方は存在できません。ここに記載する理由これは読み込み方法に影響するはずだからです。 クリティカルレンダリングパスで CSS のダウンロードをユーザーに強制しないでください。モードになります 読み込み速度を最適化するために、サンプルアプリの CSS を分割します。次の推奨事項を実践的に示しています。重要性の低い CSS を先送りするために、以下の 3 部に分けて実行します。

style.css: サイトで普遍的に使用されているルールを含めます。
ダークモードに必要なルールのみを含む dark.css。
light.css: ライトモードに必要なルールのみが含まれます。

読み込み方法

後者の 2 つの light.css と dark.css は、 <link media> クエリにより条件付きで読み込まれます。最初は一部のブラウザでは prefers-color-scheme がサポートされていません（上記のパターンを使用して検出可能）、これを動的に処理するために、デフォルトの light.css ファイルを読み込みます。小さなインラインスクリプトに条件付きで挿入された <link rel="stylesheet"> 要素経由（ライトは任意ですが、デフォルトのフォールバックエクスペリエンスとしてダークにすることもできます）。スタイルが設定されていないコンテンツが大量に発生しないようにするには、 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);
}

上記のコードサンプルでは、いくつかのプロパティに color-scheme スペース区切り値 light dark に置き換えます。

アプリがサポートするカラーテーマをブラウザに伝えますユーザーエージェントスタイルシートの特殊なバリアントをアクティブ化できます。これは、たとえば、ブラウザでフォームフィールドをレンダリングさせる場合に便利です。背景が暗く、テキストが明るい場合は、スクロールバーを調整します。テーマに応じたハイライト色を設定できます color-scheme の正確な詳細は次の場所に記載されています。 CSS 色調整モジュールレベル 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 を読み込む理由ダークモードを切り替えて、ページを再読み込みしてみてください。まだ一致しない特定のスタイルシートが読み込まれますが、優先度が最も低いため、今すぐサイトに必要なリソースと競合しないようにできます。

で確認できます。 <ph type="x-smartling-placeholder">

ライトモードで、ダークモードの CSS が最も低い優先度で読み込まれる仕組みを示すネットワーク読み込み図 — ライトモードのサイトが、最も低い優先度でダークモードの CSS を読み込みます。

で確認できます。 <ph type="x-smartling-placeholder">

ダークモードで、ライトモードの CSS が最も低い優先度で読み込まれる仕組みを示すネットワーク読み込み図 — ダークモードのサイトが、最も低い優先度でライトモードの CSS を読み込みます。

で確認できます。 <ph type="x-smartling-placeholder">

デフォルトのライトモードで、ダークモードの CSS が最も低い優先度で読み込まれる様子を示すネットワーク読み込み図 — `prefers-color-scheme` をサポートしていないブラウザでデフォルトのライトモードになっているサイトが、最も低い優先度でダークモードの CSS を読み込みます。

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

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

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 つの色で 1 つの色でもう 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` のエミュレーション

OS 全体のカラーパターンを切り替えるのは Chrome DevTools を使用してユーザーが好みのカラーパターンをエミュレートできます現在表示されているタブにのみ影響します。コマンドメニューを開いて「Rendering」と入力し、Show Rendering コマンドを実行して、[Emulate CSS media featurepreferreds-color-scheme] オプションを変更します。

[CSS メディア機能をエミュレート] のスクリーンショットChrome DevTools の [レンダリング] タブにあるオプション

Puppeteer で `prefers-color-scheme` のスクリーンショットを撮影しています

Puppeteer は Node.js ライブラリです。ハイレベル API を提供し、Chrome や Chromium を DevTools プロトコル。 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 ドキュメントのルート要素への参照を提供します。つまり、P-MAX で参照できる :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 画像の場合は、反転フィルタを使用するのではなく、 currentColorを利用して要素の color プロパティの値を表す CSS キーワード。これにより、デフォルトでは値を受け取らないプロパティで color 値を使用できます。 SVG の値として currentColor が使用されていると便利です。 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 を宣言するだけで、アニメーションを簡単に作成できます。下の例は全体的な流れを表しています。 demo。

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

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

一般に、読み込みのパフォーマンス上の理由から、prefers-color-scheme のみを使用することをおすすめします。 <link> 要素の media 属性内（スタイルシートでインライン化しない）実際に 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>`。

以下のデモで、右上のダークモードコントロールをクリックまたはタップしてみてください。 3 つ目と 4 つ目のコントロールのチェックボックスをオンにすると、ページを再読み込みしても保持されます。オペレーティングシステムをダークモードのまま維持できます。ライトモードではサイトを楽しむかその逆も可能です

まとめ

ダークモードの操作とサポートは楽しく、新たなデザインの道が開かれます。サイト訪問者によっては、これがサイトを処理できないか、そうでないかということの違いが出る可能性があります幸せなユーザーであることですいくつか注意点がありますので慎重にテストする必要がありますダークモードは、すべてのユーザーを大切にしていることをアピールする絶好の機会です。この投稿で紹介したベストプラクティスや <dark-mode-toggle> カスタム要素素晴らしいダークモード環境を作り出す能力に自信を持てるはずです。作成した内容と、この投稿がお役に立ったかどうか、Twitter でお知らせください改善のヒントも得られます最後までお読みいただきありがとうございました。🌒

謝辞

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 ロールバレスからは、正しい prefers-color-scheme 検出方法を教えてくれました。参照先 SVG と currentColor を使ったヒントの提供元 Timothy Hatcher。最後に、さまざまなユーザー調査に匿名で参加していただきましたことに感謝します。を参考にしました。ヒーロー画像作成者: Nathan Anderson

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

はじめに

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

ダークモードを選ぶ理由

デザイン上の理由からダークモード

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

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

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

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

ダークモードのサポート

ブラウザがダークモードに対応しているかどうかを確認する

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

ダークモードの活用例

読み込み方法

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

完全な例

読み込みの影響

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

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

DevTools での prefers-color-scheme のエミュレーション

Puppeteer で prefers-color-scheme のスクリーンショットを撮影しています

ダークモードに関するベスト プラクティス

純白を使わない

写真画像のカラーリング（色や暗さ）を調整

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

ベクター グラフィックとアイコンを反転する

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

モード間のスムーズな遷移

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

ダークモードにする（オプトアウトを追加する）

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

まとめ

関連リンク

謝辞

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

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

DevTools での `prefers-color-scheme` のエミュレーション

Puppeteer で `prefers-color-scheme` のスクリーンショットを撮影しています

ダークモードに関するベストプラクティス

ベクターグラフィックとアイコンを反転する

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

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

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