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>

Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow

An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub