深色模式

簡介

此範例示範如何使用深色模式。它同時展示了 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 上編輯範例