暗色模式

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 选择器上设置了 colorbackground-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;
  }
}
MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库