自動ダークモード

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。