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

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

はじめに

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

<ph type="x-smartling-placeholder">
</ph> グリーン スクリーンのパソコン モニター
グリーン スクリーン(ソース

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

<ph type="x-smartling-placeholder">
</ph> 白地に濃い色のワープロ
Dark-on-white(出典

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

<ph type="x-smartling-placeholder">
</ph> WorldWideWeb ブラウザに表示されたダークオンホワイトのウェブページ
The WorldWideWeb browser(出典

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

<ph type="x-smartling-placeholder">
</ph> ベッドで横になるときに使用するスマートフォン
ベッドの中で使用するスマートフォン(出典: Unsplash)

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

ダークモードを選ぶ理由

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

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

で確認できます。 <ph type="x-smartling-placeholder">
</ph> CloseView を Mac OS System 7 と
System 7 CloseView(ソース

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

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

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

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

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

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

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

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

<ph type="x-smartling-placeholder">
</ph> Android Q のダークモード設定
Android Q のダークモード設定

ダークモードまたはダークモードをサポートするオペレーティング システム 通常は、設定のいずれかの場所で有効にできます。 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 以降)。 その他のブラウザについては、サポート テーブルを使用できるかをご確認ください。

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

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

ダークモードの活用例

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

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

読み込み方法

後者の 2 つの light.cssdark.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.csslight.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.csslight.css を読み込む理由 ダークモードを切り替えて、ページを再読み込みしてみてください。 まだ一致しない特定のスタイルシートが読み込まれますが、優先度が最も低いため、 今すぐサイトに必要なリソースと競合しないようにできます。

で確認できます。 <ph type="x-smartling-placeholder">
</ph> ライトモードで、ダークモードの CSS が最も低い優先度で読み込まれる仕組みを示すネットワーク読み込み図
ライトモードのサイトが、最も低い優先度でダークモードの CSS を読み込みます。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> ダークモードで、ライトモードの CSS が最も低い優先度で読み込まれる仕組みを示すネットワーク読み込み図
ダークモードのサイトが、最も低い優先度でライトモードの CSS を読み込みます。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> デフォルトのライトモードで、ダークモードの 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 に変更しましたが、ヒーロー画像の外観も若干異なります。 自分のユーザー調査 調査対象者の大多数が ダークモードをオンにすると、やや鮮明で明るい画像が好まれます。 これを再配色と呼びます。

<ph type="x-smartling-placeholder">
</ph> ダークモードで少し暗めのヒーロー画像。 <ph type="x-smartling-placeholder">
</ph> ダークモードで少し暗めのヒーロー画像。
で確認できます。
<ph type="x-smartling-placeholder">
</ph> ライトモードの通常のヒーロー画像。 <ph type="x-smartling-placeholder">
</ph> ライトモードの通常のヒーロー画像。

再色付けは、画像の 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 状態の両方に存在する必要があります。

<ph type="x-smartling-placeholder">
</ph> ダークモードではアイコンが反転します。 <ph type="x-smartling-placeholder">
</ph> ダークモードではアイコンが反転します。
で確認できます。
<ph type="x-smartling-placeholder">
</ph> ライトモードの通常のアイコン。 <ph type="x-smartling-placeholder">
</ph> ライトモードの通常のアイコン。

ここでも、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>

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

ダークモードからライトモード(またはその逆)への切り替えもスムーズです。 colorbackground-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>
<ph type="x-smartling-placeholder">
</ph> ダークモードに切り替わります。
ライトモードで <dark-mode-toggle>
で確認できます。
<ph type="x-smartling-placeholder">
</ph> ダークモードに切り替わります。 <ph type="x-smartling-placeholder">
</ph> ダークモードで <dark-mode-toggle>

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

まとめ

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

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

color-scheme メタタグと CSS プロパティのリソース:

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

この投稿の背景研究記事:

謝辞

prefers-color-scheme メディア機能(color-scheme CSS プロパティ) および関連するメタタグは 👏? Rune Lillesveen の実装作業です。 Rune は、CSS Color Adjust Module Level 1 仕様の共同編集者でもあります。 どうぞよろしくお願いいたします 🙏? Lukasz ZbylutRowan Merewood 氏、 Chirag Desai 氏 および Rob Dodson 記事の詳細を確認しています 読み込み戦略は、Jake Archibald が考案したものです。 Emilio Cobos ロールバレスからは、正しい prefers-color-scheme 検出方法を教えてくれました。 参照先 SVG と currentColor を使ったヒントの提供元 Timothy Hatcher。 最後に、さまざまなユーザー調査に匿名で参加していただきましたことに感謝します。 を参考にしました。 ヒーロー画像作成者: Nathan Anderson