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>

Daha fazla açıklamaya mı ihtiyacınız var?

Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.

Stack Overflow'a git

Açıklanmayan bir özellik mi var?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

Örneği GitHub'ta düzenle