自動ダークモード

アンドレ・チプリアーニ・バンダラ

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

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

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

ドキュメントを参照してオリジン トライアルを設定する方法を確認し、AutoDarkMode オリジン トライアルに登録してトークンを取得します。

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

DevTools の使用

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

  1. その他メニューをクリックします。
  2. [その他のツール]、[レンダリング] の順に選択します。
  3. [Emulate auto ダークモード] オプションで [Enable] を選択します。

Android スマートフォンの場合

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

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

これで、明るい色のページがスマートフォン上で暗くなります。

要素ごとのカスタマイズ

Google は、自動ダークモードが常に適切な結果を生成することを目標としていますが、デベロッパーとの早期の話し合いでは、特定の要素を微調整して目的のデザインに適応させたいという提案がありました。

このオリジン トライアルでは、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>

要素ごとのオプトアウト

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

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

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

:root {
  color-scheme: only light;
}

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

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

フィードバックを送信できるチャネルは多数あります。

写真: Félix Besombes。