深色模式

簡介

此範例示範如何使用深色模式。它展示了 prefers-color-scheme 以及針對不支援瀏覽器使用者的手動切換功能。您可以在 https://web.dev/prefers-color-scheme 文章中閱讀更多關於 prefers-color-scheme 的資訊。

此核取方塊*相鄰*的所有項目都可以設定樣式，請將其保留在 DOM 樹狀結構中。

開啟深色模式

深色模式範例

在支援 prefers-color-scheme 且回報使用者偏好 dark 的瀏覽器上，只需遵循即可，無需為使用者提供覆寫選項，因為他們已明確表示喜歡深色模式。
在支援 prefers-color-scheme 且回報使用者偏好 light 或 no-preference 的瀏覽器上，提供手動切換深色模式的選項。
在不支援 prefers-color-scheme 的瀏覽器上，提供手動切換深色模式的選項。

<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 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例