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>

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub