自動ダークモード

André Cipriani Bandarra

Chrome 96 では、Android の自動ダークテーマのオリジン トライアルが導入されます。 この機能を使用すると、ライトがテーマのサイトに自動生成されたダークモードが適用されます。 ユーザーがオペレーティング システムでダークモードを選択したとき。 ユーザーは、OS レベルまたは Chrome の特定の設定で、ダークモードを無効にできます。

オリジン トライアルに登録する

オリジン トライアルを使用して、ユーザーに対してダークニング アルゴリズムを有効にすることもできます。 これにより、KPI に照らして自動ダークモードのパフォーマンスをテストできます。

ドキュメントで学習する オリジン トライアルの設定方法、 その後、AutoDarkMode オリジン トライアルに登録 トークンを取得します。

デバイスで自動ダークモードをテストする

DevTools を使用

DevTools で自動ダークモードを有効にするには:

  1. その他メニューをクリックします。
  2. [その他のツール]、[レンダリング] の順に選択します。
  3. [自動ダークモードをエミュレート] オプションで [有効にする] を選択します。

Android スマートフォンの場合

Android スマートフォンで自動ダークモードをテストするには:

  1. chrome://flags に移動して、#darken-websites-checkbox-in-theme-setting テストを有効にします。
  2. 次に、その他メニューをタップし、[設定]、[テーマ] の順に選択し、[可能であればダークモードをサイトに適用する] チェックボックスをオンにします。

今後は、明るい色のページはスマートフォンで暗くなります。

要素ごとのカスタマイズ

自動ダークモードではどのような場合でも良好な結果が得られることを目指していますが、 初期の開発者との話し合いでは、特定の要素に ユーザーが希望するデザインに合うように調整できます

このオリジン トライアルでは、 こうしたカスタマイズを行うには、JavaScript を使用してユーザーが自動ダークモードを使用しているかどうかを検出して、必要な要素をカスタマイズします。

自動ダークモードの検出

ユーザーが自動ダークモードを使用しているかどうかを検出するには、次の操作を行います。 background-color を canvas に設定し、カラーパターンをライトに設定した要素を作成します。 計算された背景の色が白（rgb(255, 255, 255)）以外の場合、 自動ダークモードがページに適用されます。

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

多数の要素をカスタマイズする

多数の要素をカスタマイズする必要がある場合、上記のソリューションはスケーリングが難しくなる可能性があります。 別の方法として、ダークモードの自動検出を使用して、ページの本文にマーカー クラスを追加することもできます。

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

次に、必要に応じて CSS を使用して要素をカスタマイズします。

.auto-dark-theme > #my-element {
  border-color: red;
}

要素ごとのカスタマイズ API はまだ開発の初期段階です。 Google は、オプトアウトのためのより表現力豊かな API をデベロッパーに提供できるよう、標準化チームと協力して取り組んでいます。 こちらの GitHub の問題に関する会話をフォローしてください。

自動ダークモードを無効にする方法

ユーザーのデバイスの選択を尊重するだけでなく ダークモードは、バッテリー駆動時間の向上やユーザー補助など、ユーザーにもたらします。 自動ダークモードを無効にする代わりに、 代わりに、独自にキュレートされたダークモードを実装することを強くおすすめします。 ユーザーの選択を尊重し、それらのメリットを維持できます。

独自のダークモードを実装できない場合は 自動ダークモードで生成された結果が満足のいくものでない場合は、 この機能を無効にすることもできますが

メタタグを使用する

自動ダークモードを無効にする方法 1 つ目は、次のメタタグをページのヘッダーに追加することです。 メタタグを使用する利点は、自動ダークモードがまったく適用されなくなることです。 「暗色のコンテンツのフラッシュ」を引き起こす可能性があります。

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

要素ごとのオプトアウト

もう 1 つの方法は、オプトアウトする color-scheme の値を設定することです。 CSS プロパティを only light に設定します。 要素ごとにオプトアウトを使用してページ全体の自動ダークモードをオプトアウトすることもできますが、 この方法の利点は、ページの特定の部分のみをオプトアウトできることです。

#my-element {
  color-scheme: only light;
}

この方法でも、:root 要素のカラーパターンを設定することで、ページ全体を自動ダークモードからオプトアウトできます。

:root {
  color-scheme: only light;
}

フィードバックを送信してください。

自動ダークモードはまだ指定されていません。 実装のあらゆる領域に関するフィードバックをお待ちしています。 要素のカスタマイズとオプトアウトのために、ダークニング アルゴリズムの結果からデベロッパー API に送信されます。

フィードバックをお送りいただけるチャネルは数多くあります。

写真撮影: Félix Besombes