深色模式

介绍

此示例演示了如何使用深色模式。它同时展示了 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 上编辑示例