暗黑模式

简介

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