Dark Mode

Introduction

This sample demonstrates how to use dark mode. It shows both prefers-color-scheme as well as a manual toggle for people on non-supporting browsers. You can read more about prefers-color-scheme in the article https://web.dev/prefers-color-scheme.

Everything adjacent to this checkbox can be styled, leave it here in the DOM tree.

Turn on dark mode

Dark Mode Sample

On browsers that support prefers-color-scheme and report the user prefers dark, just obey and don't give the user an override option, since they clearly state they like dark.
On browsers that support prefers-color-scheme and report the user prefers light or no-preference, offer the option to toggle dark mode manually.
On browsers that don't support prefers-color-scheme, offer the option to toggle dark mode manually.

<input id="dark-mode-checkbox" type="checkbox">
<label id="dark-mode-label" for="dark-mode-checkbox">Turn on dark mode</label>
<div class="wrapper">
  <h1>Dark Mode Sample</h1>
  <ul>
    <li>
      On browsers that support <code>prefers-color-scheme</code> and report the user prefers <code>dark</code>,
      just obey and don't give the user an override option, since they clearly state they like dark.
    </li>
    <li>
      On browsers that support <code>prefers-color-scheme</code> and report the user prefers <code>light</code>
      or <code>no-preference</code>, offer the option to toggle dark mode manually.
    </li>
    <li>
      On browsers that don't support <code>prefers-color-scheme</code>,
      offer the option to toggle dark mode manually.
    </li>
  </ul>
</div>

さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

説明されていない機能ですか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する