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>

¿Necesita explicaciones más detalladas?

Si las explicaciones que se encuentran en esta página no responden todas sus preguntas, no dude en comunicarse con otros usuarios de AMP para discutir el caso de uso exacto.

Ir a Stack Overflow

¿Faltó que explicáramos alguna función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Editar ejemplo en GitHub