深色模式

简介

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