自動ダークモード

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>

要素ごとのオプトアウト

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

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

:root 要素に color-scheme を設定することで、この方法を使用してページ全体を自動ダークモードからオプトアウトすることは引き続き可能です。

:root {
  color-scheme: only light;
}

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

自動ダークモードはまだ仕様が確定されていません。Google は、暗くするアルゴリズムの結果から、要素のカスタマイズとオプトアウトのためのデベロッパー API まで、実装のすべての分野でフィードバックをお待ちしています。

フィードバックは、以下の方法でお送りいただけます。

写真: Félix Besombes。