🌬️ 🚚 🤦🏼 ダークモード：こんにちは闇、私の旧友 🕺 🌛 🙏🏿

ダークモードは、ウェブサイトとアプリのデザインにおける主要なトレンドであり続けています。このトピックに関するすばらしい記事を見つけ、翻訳を共有することにしました。ユーザーの意見、ダークモードの実装とサポート、開発者向けの推奨事項については、この記事で詳しく説明しています。あなたはどちら側にいますか？

ただの誇大宣伝または必要性？ダークモードの詳細をご覧ください。ユーザーの利益のためにダークモードのサポートを追加する方法を紹介します。

前書き

このトピックについて、私は膨大な調査を実施し、問題の歴史を研究しました。ダークモードでの作業のみに関心がある場合は、最初のセクションをスキップしてください。

主流になる前のダークモード

グリーンスクリーン（出典）

彼らは歴史が周期的であると言います。ダークモードの状況では、すべてが始まった場所に戻ります。パーソナルコンピュータの初期には、ダークモードが唯一の選択肢でした。モノクロのCRTモニターは、蛍光スクリーンに電子ビームを照射することで機能し、初期のCRTで使用されていた蛍光体は緑色でした。テキストは緑色で表示され、画面の残りの部分は黒色であったため、これらのモデルはしばしば緑色の画面と呼ばれていました。

白地に濃い（ソース）

その後、カラーCRTディスプレイは、赤、緑、青の蛍光体を使用して複数の色を表示し始めました。彼らは、3つの蛍光体すべてを同時に活性化することによって白を作成しました。より現代的なデスクトップパブリッシングとWYSIWYGテクノロジーの出現により、仮想ドキュメントを実際の紙のように見せることができるようになりました。

Browser WorldWideWeb（ソース）

デザインのこの時点で、「ダークオンホワイト」というトレンドが生まれ、ネットワーク上の最初のWebサイトに実装されました。これらはテキストドキュメントのようなものでした。

世界初のブラウザであるWorldWideWeb（CSSがまだ発明されていないと想像してください）は、この方法でWebページをレンダリングしました。おもしろい事実：2番目のラインモードブラウザ（端末ベースのブラウザ）は、暗闇で緑色でした。今日、Webページとアプリケーションは通常、明るい背景に暗いテキストを使用して作成されます。これは一般的に認められていることです。この配色は、Chromeなどの最新のユーザーエージェントのスタイルシートに組み込まれています。..。

スマートフォンの使用（出典）

CRTモニターの時代は過ぎ去りました。現在、バックライト付きLCDまたはエネルギー効率の高いAMOLEDディスプレイを使用するモバイルデバイスで、大量のコンテンツを消費および作成しています。より小さく、より実用的なコンピューター、タブレット、スマートフォンは、ユーザーの行動の新しいパターンをもたらしました。私たちの自由な時間には、ソーシャルネットワーク、楽しみのためのプログラム、またはコンピューターゲームで姿を消します。これは通常、夜の薄暗い照明での仕事の後、または夜寝る前のベッドでさえ起こります。暗闇の中でデバイスを使用する人が増えるほど、ダークモードの人気が高まります。

なぜダークモードを選ぶのですか？

美的理由からダークモードが好きな理由を

尋ねられたとき、最も人気のある答えは「目に心地よい」または「ダークモードは美しい」です。 Appleは、ダークモードの開発者向けドキュメントで、「ほとんどのユーザーにとってダークまたはライトの選択は、美的好みに基づいており、照明条件とは関係がない場合があります」と公然と述べています。人々がダークモードを愛する理由とその使用方法については、この調査で詳細をご覧ください。System 7 CloseView（ソース）障害を持つ人々のためのアクセシビリティツールとしてのダークモード

ダークモードを使用する必要がある人もいます。たとえば、視覚障害のあるユーザーは、アクセシビリティツールとしてダークモードを使用します。私が見つけたアクセシビリティツールとしてのダークモードの最初の使用は、システム7のCloseView機能であり、カラースキームを白地に黒から黒地に白に変更する機能を備えていました。 System 7はカラーインターフェイスをサポートしていましたが、デフォルトのユーザーインターフェイスは白黒でした。

この反転ベースの方法は、インターフェイスの色の数を増やした後、その弱点を示しています。サリットSzpiroや研究者のチームが行った調査を視覚障害者がコンピュータデバイスをどのように扱うかについてのユーザー。その結果、すべての回答者が反転色を好まなかったが、多くの回答者は暗い背景に明るいテキストを好んだことが判明しました。 Appleは、Smart Invertを使用してこのユーザー設定に対応しています。これは、画像、メディア、および暗い色のスタイルを使用する一部のアプリケーションを除いて、ディスプレイの色を変更します。

低視力の特殊な形態は、デジタル眼球緊張としても知られるコンピューター視力症候群です。これらの用語はコンピューター（デスクトップ、ラップトップ、タブレット）やその他の電子機器（スマートフォンや電子書籍）の頻繁な使用に関連するさまざまな視覚の問題。科学者たちは、特に夜間に青年が電子機器を使用すると、睡眠障害、不眠症、睡眠不足症候群のリスクが高まると推測しています。他の研究によると、青色光の影響はサーカディアンリズムの調節に関与していますそして睡眠サイクル、そして不規則な光環境は睡眠不足につながる可能性があり、それは人の気分とタスクを実行する効率に影響を与えます。ディスプレイの色温度を調整して（iOSナイトシフトやAndroidナイトライトなどの機能）、青色光の量を減らすか、ダークテーマまたはモードで一般的に明るい光や不規則な光を防ぐことで、悪影響を制限できます。

AMOLEDディスプレイのダークモードでのエネルギー節約

ダークモードは、AMOLEDディスプレイの電力を大幅に節約することが知られています。YouTubeなどの人気のあるGoogleアプリに関する調査では、エネルギーを最大60％節約できることが証明されています。以下のビデオは、これらの研究と各アプリケーションのエネルギー節約の詳細を提供します。

オペレーティングシステムでダークモードをアクティブにする方法

ダークモードが多くのユーザーにとって非常に重要である理由を説明したので、それをカスタマイズする方法を見てみましょう。

ダーク

モードまたはダークテーマをサポートするAndroidQオペレーティングシステムのダークテーマ設定には、通常、設定でそれらをアクティブ化するオプションがあります。macOS Xでは、これは[システム設定]の[一般]セクションにあり、[外観]（スクリーンショット）と呼ばれます。Windows10では、[色の選択]（スクリーンショット）と呼ばれる[色]の下にあります。Android Qの場合、モードを暗いテーマとして表示（スクリーンショット）に切り替えることができます。iOS13の場合、[表示と明るさ]セクション（スクリーンショット）でインターフェイスの色を変更できます。

- prefers-color-scheme

続ける前にもう少し理論。メディアクエリを使用すると、作成者は、ドキュメントのレンダリングとは関係なく、ユーザーエージェントまたはデバイスの値とプロパティをテストおよびクエリできます。これらはCSSメディアルールで使用され、ドキュメントに条件付きでスタイルを適用し、HTMLやJavaScriptなどの他のコンテキストや言語で使用されます。レベル5のメディアクエリは、いわゆるユーザー優先メディアプロパティを導入します。これは、サイトがユーザーのコンテンツ表示方法を検出するためのシグナルです。使用するアニメーションの量を最小限に抑えるようにユーザーがOSに要求するかどうかを判断するには、prefers-reduced-

motionCSSメディアプロパティセットを使用できます。私はすでに持っています先にprefers-reduced-motionについて書いた。Preferred-color-scheme

CSSメディアプロパティは、オペレーティングシステム上のユーザーが使用するテーマ（明るいまたは暗い）を決定するために使用されます。次の値で動作します。

no-preference：ユーザーがシステムに設定を通知していないことを示します。このキーワードは、論理コンテキストではfalseと評価されます。
light：ユーザーが明るいテーマ（明るい背景に暗いテキスト）のページを好むことをシステムに通知したことを示します。
dark：ユーザーが暗いテーマ（暗い背景に明るいテキスト）のページを好むことをシステムに通知したことを示します。

ダークモードのサポート

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

ダークモードはメディアクエリを介して伝達されるため、prefers-color-schemeメディアクエリが適切かどうかを確認することで、現在のブラウザがダークモードをサポートしているかどうかを簡単に確認できます。値を設定するのではなく、メディアクエリで一致するものをチェックするだけであることに注意してください。

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

執筆時点では、prefers-color-schemeは、バージョン76のChromeとEdge、バージョン67のFirefox、macOSのバージョン12.1のSafari、iOSのバージョン13で、デスクトップとモバイル（利用可能な場合）の両方でサポートされています。他のすべてのブラウザについては、記事「サポートテーブルを使用できますか」を参照してください。古いブラウザにダークモードのサポートを追加

するカスタムの<dark-mode-toggle>要素を使用できます。これについてはさらに書きます。

実際のダークモード

ダークモードのサポートが実際にどのように見えるかを見てみましょう。映画「ハイランダー」のように、結局は暗いか明るいかのどちらかしかありません！なぜ私はこれに焦点を合わせているのですか？この事実はローディング戦略に影響を与えるからです。現在使用されていないモードの重要なレンダリング段階で、ユーザーにCSSのダウンロードを強制しないでください。したがって、読み込み速度を最適化するために、重要ではないCSSの読み込みを遅らせるために、例のCSSを3つの部分に分割しました。

style.cssには、サイト全体で使用される一般的なルールが含まれています
dark.cssには、ダークモードに必要なルールが含まれています
light.cssには、ライトモードにのみ必要なルールが含まれています。

ローディング戦略

最後の2つ、light.cssとdark.cssは、<linkmedia>リクエストを介して選択的にロードされます。

最初は、すべてのブラウザがprefers-color-scheme CSSメディアプロパティ（上記の例にあります）をサポートしているわけではありません。これは、インラインスクリプトの要素を介してデフォルトの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)').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: no-preference), (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で、これらの変数を本文で使用します{...}。これらはCSS疑似クラスで定義されているため：root -HTMLで<html>要素を表し、特異性が高いことを除いてhtmlセレクターと同じセレクター：変数はカスケードされ、グローバルCSS変数の定義が可能になります。

/* style.css */
:root {
  color-scheme: light dark;
}
body {
  color: var(--color);
  background-color: var(--background-color);
}

上記の例では、スペースで区切られた明るい暗い値を持つcolor-schemeプロパティにおそらく気づいたでしょう。このプロパティは、アプリケーションがサポートするカラーテーマをブラウザに通知し、ユーザーエージェントスタイルシートの特別なバリエーションをアクティブ化できるようにします。これは、たとえば、ブラウザが暗い背景と明るいテキストのフォームフィールドを表示できるようにしたり、スクロールバーをカスタマイズしたり、テーマベースのハイライト色を有効にしたりする場合に便利です。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);
}

詳細な分析

次のボックスグリッチでは、実際に上記のすべてを使用する例を見ることができます。オペレーティングシステムの設定でダークモードを切り替えて、ページがどのように反応するかを確認してください。

ダウンロード速度への影響

この例を十分に試してみると、メディアクエリを介してdark.cssとlight.cssをロードする理由がわかります。ダークモードを切り替えてページを再読み込みしてみてください。現在不一致の特定のスタイルシートはまだ読み込まれていますが、優先度が最も低いため、サイトが現在必要としているリソースと競合しません。ブラウザーが不一致のメディアクエリを含むスタイルシートをロード

する理由を調べてください。

明るいウェブサイトは最も優先度の低い

暗いスタイルをロードします：暗いウェブサイトは最も低い優先度の明るいスタイルをロードします：

ブラウザーのスキンが明るいデフォルトのサイトで、prefers-color-schemeがサポートされていない場合、優先度が最も低い暗いスタイルが読み込まれます。

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

他のメディアクエリの変更と同様に、JavaScriptを介してダークモードの変更をサブスクライブできます。これを使用して、たとえば、ページアイコンを動的に変更したり、ChromeのURLバーの色を決定する<meta name = "theme-color">を変更したりできます。上記の例は、実際に説明されている内容を示しています。テーマとアイコンの色の変更を確認するには、別のタブでデモを開きます。

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

ダークモードのベストプラクティス

純粋な白を避ける小さな細部に気づいたかもしれません：私は純粋な白を使用していません。代わりに、周囲の暗いコンテンツが光るのを防ぐために、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は、ドキュメントのルート要素へのリンクを提供することに注意してください。つまり、CSS疑似クラス：rootを使用して参照できるのと同じ要素です。

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

ベクトルとアイコンを反転する

ベクトルグラフィックス（私の場合、アイコンとして使用され、<img>要素を介して参照します）の場合、別の色変更方法を使用します。一方で研究をしている人々は写真反転好きではないことを示し、それはほとんどのアイコンのために非常に適しています。再びCSS変数を使用して、通常の状態と：ホバー状態の反転の程度を決定します。

アイコンは暗いモードで反転している：

ライトモードでのアイコン：

お知らせどのように再び私だけのアイコン反転dark.cssなくlight.css、そしてどのように：ホバー ユーザーが選択したモードに応じて、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キーワードを追加できます。

これにより、デフォルトでカラー値を受け取らないプロパティのカラー値を設定できます。実際、currentColorがSVG塗りつぶしまたはストローク属性の値として使用されている場合、継承されたcolorプロパティからその値を取得します。これは<svg> <use href = "…"> </ svg>でも機能するため、個別のリソースを使用でき、currentColorは引き続きコンテキストに適用されます。これはインラインまたは<usehref = "...">でのみ機能することに注意してくださいSVG。ただし、srcイメージまたはCSSを介して参照されるSVGは対象外です。詳細はこちら。

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

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

色と背景はアニメーション化可能なCSSプロパティであるため、暗い色から明るい色への切り替え、またはその逆の切り替えをスムーズに行うことができます。アニメーションは、2つのプロパティに対して2つの遷移を宣言するのと同じくらい簡単です。例としては、以下の一般的な考えを示しています。

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のみを使用することをお勧めします（スタイルシートではインラインではありません）が、実際にはHTMLでprefers-color-schemeをインラインで使用したい場合があります-コード。装飾はまさにそのような状況です。アーティスティックデザイン-ページの全体的なビジュアルデザイン：サイトがユーザーにどのように影響するか、どのような感情を呼び起こすか。

ダークモードでは、設計者は選択する画像と、画像の色を変更するかどうかを決定する必要があります。適切です。<picture>要素を使用することにより、<source>に表示される画像をメディア属性に依存させることができます。以下の例では、ダークモードの西半球とライトモードの東半球を示しています。設定が指定されていない場合は、とにかく東半球のデフォルトです。もちろん、画像は私の例を示しているだけです。デバイスのダークモードをオンにして、違いを確認します。

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
  <source srcset="eastern.webp" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
  <img src="eastern.webp">
</picture>

ダークモードを無効にする

上記のように、ほとんどのユーザーは自分の好みや美的好みに基づいてダークモードを選択します。一部のユーザーは、OS UIが暗くなり、Webページが以前と同じように表示されることを好みます。アクションプラン：最初にブラウザがprefers-color-schemeを介して送信する信号を待ち、次にユーザーが必要に応じてシステムレベルの設定を上書きできるようにします。

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

もちろん、そのようなコードを自分で作成することもできますが、この目的のために特別に作成した既製の要素（Webコンポーネント）を使用することもできます。これは<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>要素のようなライフハックは、すばらしいダークモードを作成するのに役立ちます。

便利なリンク

優先-カラースキームメディアクエリ：

カラースキームメタタグ：

dark mode:

ダークモード：こんにちは闇、私の旧友

前書き