暗色模式

mdui 的所有组件都支持暗色模式，并且支持根据操作系统的设置自动切换主题。

你可以随时点击文档页面右上角的图标来切换主题，以查看各个组件在不同主题下的显示效果。

如果要使用暗色模式，只需在 <html> 标签上添加 mdui-theme-dark 类即可：

<html class="mdui-theme-dark">

</html>

如果要让主题根据操作系统设置自动切换，只需在 <html> 标签上添加 mdui-theme-auto 类即可：

<html class="mdui-theme-auto">

</html>

也可以在页面的不同部分使用不同的主题。例如下面的示例，在 <html> 上设置暗色模式，但在页面中的一个 <div> 上添加了 mdui-theme-light 类，这样该 div 中的元素将显示为亮色模式，而页面其余部分则为暗色模式：

<html class="mdui-theme-dark">
  <body>
    <div class="mdui-theme-light">
      <!-- 这里是亮色模式 -->
    </div>

    <!-- 这里是暗色模式 -->
  </body>
</html>

除了直接添加 CSS 类外，mdui 还提供了两个函数，可以更便捷的操作主题：

getTheme：获取当前页面、或指定元素上的主题。
setTheme：设置当前页面、或指定元素上的主题。

需要注意的是，mdui 在 :root 及 .mdui-theme-light、.mdui-theme-dark、.mdui-theme-auto 选择器上设置了 color 和 background-color 样式，如果你不喜欢这些默认样式，可以自行进行覆盖。

下面示例将亮色模式下的页面背景设为纯白，文字设为纯黑；且暗色模式下页面背景设为纯黑，文字设为纯白：

:root,
.mdui-theme-light {
  color: #000;
  background-color: #fff;
}

.mdui-theme-dark {
  color: #fff;
  background-color: #000;
}

@media (prefers-color-scheme: dark) {
  .mdui-theme-auto {
    color: #fff;
    background-color: #000;
  }
}

常见问题

动态配色