深色模式

简介

此示例演示如何使用深色模式。它展示了 `prefers-color-scheme` 以及为不支持的浏览器用户提供的手动切换。您可以在 https://webdev.ac.cn/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 上编辑示例