MDUI 内置了 Material Design 的 19 组主色和 16 组强调色，所有颜色（包括背景色中的文本颜色、文本不透明度）均与 Material Design 官方文档保持一致。
Material Design 中的颜色分为主色（Primary）和强调色（Accent），每种颜色有多种不同的饱和度。
后面文档的 CSS 类名中，用 [color] 表示颜色名，[degree] 表示饱和度。
背景颜色类名为 .mdui-color-[color]-[degree]。它在设置背景色的同时，还设置了背景色中的文本颜色和文本不透明度。
此外主色和强调色都有一个默认的背景颜色类：
.mdui-color-[color] 和 .mdui-color-[color]-500 等效。.mdui-color-[color]-accent 和 .mdui-color-[color]-a200 等效。<div class="mdui-color-blue-200">mdui-color-blue-200</div>
<div class="mdui-color-blue">mdui-color-blue</div>
<div class="mdui-color-pink-accent">mdui-color-pink-accent</div>
<div class="mdui-color-pink-a200">mdui-color-pink-a200</div>所有可用的背景色类名全部列在下方的 颜色参考表 中。
文本颜色类名为 mdui-text-color-[color]-[degree] 。
此外主色和强调色都有一个默认的文本颜色类：
.mdui-text-color-[color] 和 .mdui-text-color-[color]-500 等效。.mdui-text-color-[color]-accent 和 .mdui-text-color-[color]-a200 等效。<div class="mdui-text-color-blue-900">mdui-text-color-blue-900</div>
<div class="mdui-text-color-blue">mdui-text-color-blue</div>
<div class="mdui-text-color-blue-a200">mdui-text-color-blue-a200</div>
<div class="mdui-text-color-blue-accent">mdui-text-color-blue-accent</div>此外，MDUI 还提供了带不透明度的黑色和白色的文本和图标颜色。
.mdui-text-color-black-* 用于浅色背景。.mdui-text-color-white-* 用于深色背景。MDUI 提供了主题功能，只需在 body 中加几个类即可实现主题切换功能，可切换的包括主色、强调色和背景色。
MDUI 的大部分组件都有默认颜色，设置了主题颜色后，这些组件也将用主题颜色替换默认颜色。
在 body 中添加类 .mdui-theme-primary-[color] 来设置主色。
在页面中使用下列类，这些类的颜色会随着 body 中的主题颜色的变化而变化：
.mdui-color-theme.mdui-color-theme-[degree].mdui-text-color-theme.mdui-text-color-theme-[degree]在 body 中添加类 .mdui-theme-accent-[color] 来设置强调色
在页面中使用下列类，这些类的颜色会随着 body 中的主题颜色的变化而变化：
.mdui-color-theme-accent.mdui-color-theme-[degree].mdui-text-color-theme-accent.mdui-text-color-theme-[degree]在 body 中添加类 .mdui-theme-layout-dark 即可把整个页面包括组件设置为深色背景。
在 body 中添加类 .mdui-theme-layout-auto 即可使整个页面包括组件的背景色根据操作系统的主题自动调整。
此外，在页面中使用下列类，这些类的颜色会根据主题色进行变化，浅色主题时显示为深色，深色主题时显示为浅色。
.mdui-text-color-theme-text.mdui-text-color-theme-secondary.mdui-text-color-theme-disabled.mdui-text-color-theme-divider.mdui-text-color-theme-icon.mdui-text-color-theme-icon-disabled你可以点击页面右上角的 color_lens 图标来设置主题颜色，下面的颜色表的主色、强调色、主题色都会随之发生变化。
| 类名 | 效果 | 说明 |
|---|---|---|
.mdui-theme-primary-[color] | 设置主题中的主色 | 添加到 <body> 元素上 |
.mdui-theme-accent-[color] | 设置主题中的强调色 | 添加到 <body> 元素上 |
.mdui-theme-layout-dark | 设置为深色主题 | 添加到 <body> 元素上 |
| 类名 | 效果 |
|---|---|
.mdui-color-[color] | 设置指定主色的背景色 |
.mdui-color-[color]-accent | 设置指定强调色的背景色 |
.mdui-color-[color]-[degree] | 设置指定颜色和饱和度的背景色 |
.mdui-color-theme | 根据 body 中定义的主色主题设置背景色 |
.mdui-color-theme-accent | 根据 body 中定义的强调色主题设置背景色 |
.mdui-color-theme-[degree] | 根据 body 中定义的主色或强调色主题设置指定饱和度的背景色 |
.mdui-color-black | 设置纯黑背景色 |
.mdui-color-white | 设置纯白背景色 |
.mdui-color-transparent | 设置透明背景色 |
| 类名 | 效果 |
|---|---|
.mdui-text-color-[color] | 设置指定主色的文本色 |
.mdui-text-color-[color]-accent | 设置指定强调色的文本色 |
.mdui-text-color-[color]-[degree] | 设置指定颜色和饱和度的文本色 |
.mdui-text-color-theme | 根据 body 中的主色主题设置文本色 |
.mdui-text-color-theme-accent | 根据 body 中的强调色主题设置文本色 |
.mdui-text-color-theme-[degree] | 根据 body 中的主色或强调色设置指定饱和度的文本色 |
深色文本色，用在浅色背景中：
| 类名 | 效果 |
|---|---|
.mdui-text-color-black | 设置纯黑文本色 |
.mdui-text-color-black-text | 设置主文本的文本色 |
.mdui-text-color-black-secondary | 设置副文本的文本色 |
.mdui-text-color-black-disabled | 设置禁用状态的文本色 |
.mdui-text-color-black-divider | 设置分割线的文本色 |
.mdui-text-color-black-icon | 设置图标的颜色 |
.mdui-text-color-black-icon-disabled | 设置禁用状态的图标颜色 |
浅色文本色，用在深色背景中：
| 类名 | 效果 |
|---|---|
.mdui-text-color-white | 设置纯白文本色 |
.mdui-text-color-white-text | 设置主文本的文本色 |
.mdui-text-color-white-secondary | 设置副文本的文本色 |
.mdui-text-color-white-disabled | 设置禁用状态的文本色 |
.mdui-text-color-white-divider | 设置分割线的文本色 |
.mdui-text-color-white-icon | 设置图标的颜色 |
.mdui-text-color-white-icon-disabled | 设置禁用状态的图标颜色 |
根据主题色变化的深色或浅色文本色：
| 类名 | 效果 |
|---|---|
.mdui-text-color-theme-text | 设置主文本的文本色。默认为深色，深色主题下为浅色。 |
.mdui-text-color-theme-secondary | 设置副文本的文本色。默认为深色，深色主题下为浅色。 |
.mdui-text-color-theme-disabled | 设置禁用状态的文本色。默认为深色，深色主题下为浅色。 |
.mdui-text-color-theme-divider | 设置分割线的文本色。默认为深色，深色主题下为浅色。 |
.mdui-text-color-theme-icon | 设置图标的颜色。默认为深色，深色主题下为浅色。 |
.mdui-text-color-theme-icon-disabled | 设置禁用状态的图标颜色。默认为深色，深色主题下为浅色。 |