自動ダークモード

André Cipriani Bandarra

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

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

オリジン トライアルを通じて、ユーザーに対してダークモード アルゴリズムを有効にすることもできます。これにより、自動ダークモードが KPI にどのように影響するかをテストできます。

オリジン トライアルの設定方法については、ドキュメントをご覧ください。AutoDarkMode オリジン トライアルに登録してトークンを取得してください。

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

DevTools を使用

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

  1. その他メニューをクリックします。
  2. [More Tools]、[Rendering] の順に選択します。
  3. [Emulate auto dark mode] オプションで [Enable] を選択します。

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>-<sche>me: 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 の問題で、この件に関するディスカッションをフォローできます。

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

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

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

メタタグを使用する

自動ダークモードを無効にする最初の方法は、ページのヘッダーに次のメタタグを追加することです。メタタグを使用するメリットは、自動ダークモードがまったく適用されなくなることです。これにより、「暗いコンテンツのフラッシュ」が発生する可能性があります。

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

要素ごとのオプトアウト

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

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

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

:root {
  color-scheme: only light;
}

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

自動ダークモードはまだ仕様策定中であり、ダークモード アルゴリズムの結果から、要素のカスタマイズやオプトアウトのためのデベロッパー API まで、実装のあらゆる領域に関するフィードバックを募集しています。

フィードバックをお送りいただくには、さまざまなチャネルをご利用いただけます。

撮影者: Félix Besombes。