menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

颜色与主题

MDUI 内置了 Material Design 的 19 组主色和 16 组强调色,所有颜色(包括背景色中的文本颜色、文本不透明度)均与 Material Design 官方文档保持一致。

主色和强调色

Material Design 中的颜色分为主色(Primary)和强调色(Accent),每种颜色有多种不同的饱和度。

后面文档的 CSS 类名中,用 [color] 表示颜色名,[degree] 表示饱和度。

主色

主色共有 19 种颜色,包括:

主色每种颜色都有 10 种饱和度:

50
100
200
300
400
500
600
700
800
900

强调色

强调色共有 16 种颜色,包括:

强调色每种颜色都有 4 种饱和度:

a100
a200
a400
a700

背景颜色

背景颜色类名为 .mdui-color-[color]-[degree]。它在设置背景色的同时,还设置了背景色中的文本颜色和文本不透明度。

此外主色和强调色都有一个默认的背景颜色类:

  • .mdui-color-[color].mdui-color-[color]-500 等效。
  • .mdui-color-[color]-accent.mdui-color-[color]-a200 等效。

Example
mdui-color-blue-200
mdui-color-blue
mdui-color-pink-accent
mdui-color-pink-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 等效。
Example
mdui-text-color-blue-900
mdui-text-color-blue
mdui-text-color-blue-a200
mdui-text-color-blue-accent
<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-text-color-black-text 87%
  • mdui-text-color-black-secondary 54%
  • mdui-text-color-black-disabled 38%
  • mdui-text-color-black-divider 12%
  • mdui-text-color-black-icon 54%
  • mdui-text-color-black-icon-disabled 26%
  • mdui-text-color-white-text 100%
  • mdui-text-color-white-secondary 70%
  • mdui-text-color-white-disabled 50%
  • mdui-text-color-white-divider 12%
  • mdui-text-color-white-icon 100%
  • mdui-text-color-white-icon-disabled 30%

主题颜色

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 图标来设置主题颜色,下面的颜色表的主色、强调色、主题色都会随之发生变化。

  • Primary(主色) mdui-color-theme
  • mdui-color-theme-50
  • mdui-color-theme-100
  • mdui-color-theme-200
  • mdui-color-theme-300
  • mdui-color-theme-400
  • mdui-color-theme-500
  • mdui-color-theme-600
  • mdui-color-theme-700
  • mdui-color-theme-800
  • mdui-color-theme-900
  • Accent(强调色) mdui-color-theme-accent
  • mdui-color-theme-a100
  • mdui-color-theme-a200
  • mdui-color-theme-a400
  • mdui-color-theme-a700
  • mdui-text-color-theme-text 87% 100%
  • mdui-text-color-theme-secondary 54% 70%
  • mdui-text-color-theme-disabled 38% 50%
  • mdui-text-color-theme-divider 12% 12%
  • mdui-text-color-theme-icon 54% 100%
  • mdui-text-color-theme-icon-disabled 26% 30%

颜色参考表

  • red(主色) mdui-color-red #F44336
  • mdui-color-red-50 #FFEBEE
  • mdui-color-red-100 #FFCDD2
  • mdui-color-red-200 #EF9A9A
  • mdui-color-red-300 #E57373
  • mdui-color-red-400 #EF5350
  • mdui-color-red-500 #F44336
  • mdui-color-red-600 #E53935
  • mdui-color-red-700 #D32F2F
  • mdui-color-red-800 #C62828
  • mdui-color-red-900 #B71C1C
  • red(强调色) mdui-color-red-accent #FF5252
  • mdui-color-red-a100 #FF8A80
  • mdui-color-red-a200 #FF5252
  • mdui-color-red-a400 #FF1744
  • mdui-color-red-a700 #D50000
  • pink(主色) mdui-color-pink #E91E63
  • mdui-color-pink-50 #FCE4EC
  • mdui-color-pink-100 #F8BBD0
  • mdui-color-pink-200 #F48FB1
  • mdui-color-pink-300 #F06292
  • mdui-color-pink-400 #EC407A
  • mdui-color-pink-500 #E91E63
  • mdui-color-pink-600 #D81B60
  • mdui-color-pink-700 #C2185B
  • mdui-color-pink-800 #AD1457
  • mdui-color-pink-900 #880E4F
  • pink(强调色) mdui-color-pink-accent #FF4081
  • mdui-color-pink-a100 #FF80AB
  • mdui-color-pink-a200 #FF4081
  • mdui-color-pink-a400 #F50057
  • mdui-color-pink-a700 #C51162
  • purple(主色) mdui-color-purple #9C27B0
  • mdui-color-purple-50 #F3E5F5
  • mdui-color-purple-100 #E1BEE7
  • mdui-color-purple-200 #CE93D8
  • mdui-color-purple-300 #BA68C8
  • mdui-color-purple-400 #AB47BC
  • mdui-color-purple-500 #9C27B0
  • mdui-color-purple-600 #8E24AA
  • mdui-color-purple-700 #7B1FA2
  • mdui-color-purple-800 #6A1B9A
  • mdui-color-purple-900 #4A148C
  • purple(强调色) mdui-color-purple-accent #E040FB
  • mdui-color-purple-a100 #EA80FC
  • mdui-color-purple-a200 #E040FB
  • mdui-color-purple-a400 #D500F9
  • mdui-color-purple-a700 #AA00FF
  • deep-purple(主色) mdui-color-deep-purple #673AB7
  • mdui-color-deep-purple-50 #EDE7F6
  • mdui-color-deep-purple-100 #D1C4E9
  • mdui-color-deep-purple-200 #B39DDB
  • mdui-color-deep-purple-300 #9575CD
  • mdui-color-deep-purple-400 #7E57C2
  • mdui-color-deep-purple-500 #673AB7
  • mdui-color-deep-purple-600 #5E35B1
  • mdui-color-deep-purple-700 #512DA8
  • mdui-color-deep-purple-800 #4527A0
  • mdui-color-deep-purple-900 #311B92
  • deep-purple(强调色) mdui-color-deep-purple-accent #7C4DFF
  • mdui-color-deep-purple-a100 #B388FF
  • mdui-color-deep-purple-a200 #7C4DFF
  • mdui-color-deep-purple-a400 #651FFF
  • mdui-color-deep-purple-a700 #6200EA
  • indigo(主色) mdui-color-indigo #3F51B5
  • mdui-color-indigo-50 #E8EAF6
  • mdui-color-indigo-100 #C5CAE9
  • mdui-color-indigo-200 #9FA8DA
  • mdui-color-indigo-300 #7986CB
  • mdui-color-indigo-400 #5C6BC0
  • mdui-color-indigo-500 #3F51B5
  • mdui-color-indigo-600 #3949AB
  • mdui-color-indigo-700 #303F9F
  • mdui-color-indigo-800 #283593
  • mdui-color-indigo-900 #1A237E
  • indigo(强调色) mdui-color-indigo-accent #536DFE
  • mdui-color-indigo-a100 #8C9EFF
  • mdui-color-indigo-a200 #536DFE
  • mdui-color-indigo-a400 #3D5AFE
  • mdui-color-indigo-a700 #304FFE
  • blue(主色) mdui-color-blue #2196F3
  • mdui-color-blue-50 #E3F2FD
  • mdui-color-blue-100 #BBDEFB
  • mdui-color-blue-200 #90CAF9
  • mdui-color-blue-300 #64B5F6
  • mdui-color-blue-400 #42A5F5
  • mdui-color-blue-500 #2196F3
  • mdui-color-blue-600 #1E88E5
  • mdui-color-blue-700 #1976D2
  • mdui-color-blue-800 #1565C0
  • mdui-color-blue-900 #0D47A1
  • blue(强调色) mdui-color-blue-accent #448AFF
  • mdui-color-blue-a100 #82B1FF
  • mdui-color-blue-a200 #448AFF
  • mdui-color-blue-a400 #2979FF
  • mdui-color-blue-a700 #2962FF
  • light-blue(主色) mdui-color-light-blue #03A9F4
  • mdui-color-light-blue-50 #E1F5FE
  • mdui-color-light-blue-100 #B3E5FC
  • mdui-color-light-blue-200 #81D4FA
  • mdui-color-light-blue-300 #4FC3F7
  • mdui-color-light-blue-400 #29B6F6
  • mdui-color-light-blue-500 #03A9F4
  • mdui-color-light-blue-600 #039BE5
  • mdui-color-light-blue-700 #0288D1
  • mdui-color-light-blue-800 #0277BD
  • mdui-color-light-blue-900 #01579B
  • light-blue(强调色) mdui-color-light-blue-accent #40C4FF
  • mdui-color-light-blue-a100 #80D8FF
  • mdui-color-light-blue-a200 #40C4FF
  • mdui-color-light-blue-a400 #00B0FF
  • mdui-color-light-blue-a700 #0091EA
  • cyan(主色) mdui-color-cyan #00BCD4
  • mdui-color-cyan-50 #E0F7FA
  • mdui-color-cyan-100 #B2EBF2
  • mdui-color-cyan-200 #80DEEA
  • mdui-color-cyan-300 #4DD0E1
  • mdui-color-cyan-400 #26C6DA
  • mdui-color-cyan-500 #00BCD4
  • mdui-color-cyan-600 #00ACC1
  • mdui-color-cyan-700 #0097A7
  • mdui-color-cyan-800 #00838F
  • mdui-color-cyan-900 #006064
  • cyan(强调色) mdui-color-cyan-accent #18FFFF
  • mdui-color-cyan-a100 #84FFFF
  • mdui-color-cyan-a200 #18FFFF
  • mdui-color-cyan-a400 #00E5FF
  • mdui-color-cyan-a700 #00B8D4
  • teal(主色) mdui-color-teal #009688
  • mdui-color-teal-50 #E0F2F1
  • mdui-color-teal-100 #B2DFDB
  • mdui-color-teal-200 #80CBC4
  • mdui-color-teal-300 #4DB6AC
  • mdui-color-teal-400 #26A69A
  • mdui-color-teal-500 #009688
  • mdui-color-teal-600 #00897B
  • mdui-color-teal-700 #00796B
  • mdui-color-teal-800 #00695C
  • mdui-color-teal-900 #004D40
  • teal(强调色) mdui-color-teal-accent #64FFDA
  • mdui-color-teal-a100 #A7FFEB
  • mdui-color-teal-a200 #64FFDA
  • mdui-color-teal-a400 #1DE9B6
  • mdui-color-teal-a700 #00BFA5
  • green(主色) mdui-color-green #4CAF50
  • mdui-color-green-50 #E8F5E9
  • mdui-color-green-100 #C8E6C9
  • mdui-color-green-200 #A5D6A7
  • mdui-color-green-300 #81C784
  • mdui-color-green-400 #66BB6A
  • mdui-color-green-500 #4CAF50
  • mdui-color-green-600 #43A047
  • mdui-color-green-700 #388E3C
  • mdui-color-green-800 #2E7D32
  • mdui-color-green-900 #1B5E20
  • green(强调色) mdui-color-green-accent #69F0AE
  • mdui-color-green-a100 #B9F6CA
  • mdui-color-green-a200 #69F0AE
  • mdui-color-green-a400 #00E676
  • mdui-color-green-a700 #00C853
  • light-green(主色) mdui-color-light-green #8BC34A
  • mdui-color-light-green-50 #F1F8E9
  • mdui-color-light-green-100 #DCEDC8
  • mdui-color-light-green-200 #C5E1A5
  • mdui-color-light-green-300 #AED581
  • mdui-color-light-green-400 #9CCC65
  • mdui-color-light-green-500 #8BC34A
  • mdui-color-light-green-600 #7CB342
  • mdui-color-light-green-700 #689F38
  • mdui-color-light-green-800 #558B2F
  • mdui-color-light-green-900 #33691E
  • light-green(强调色) mdui-color-light-green-accent #B2FF59
  • mdui-color-light-green-a100 #CCFF90
  • mdui-color-light-green-a200 #B2FF59
  • mdui-color-light-green-a400 #76FF03
  • mdui-color-light-green-a700 #64DD17
  • lime(主色) mdui-color-lime #CDDC39
  • mdui-color-lime-50 #F9FBE7
  • mdui-color-lime-100 #F0F4C3
  • mdui-color-lime-200 #E6EE9C
  • mdui-color-lime-300 #DCE775
  • mdui-color-lime-400 #D4E157
  • mdui-color-lime-500 #CDDC39
  • mdui-color-lime-600 #C0CA33
  • mdui-color-lime-700 #AFB42B
  • mdui-color-lime-800 #9E9D24
  • mdui-color-lime-900 #827717
  • lime(强调色) mdui-color-lime-accent #EEFF41
  • mdui-color-lime-a100 #F4FF81
  • mdui-color-lime-a200 #EEFF41
  • mdui-color-lime-a400 #C6FF00
  • mdui-color-lime-a700 #AEEA00
  • yellow(主色) mdui-color-yellow #FFEB3B
  • mdui-color-yellow-50 #FFFDE7
  • mdui-color-yellow-100 #FFF9C4
  • mdui-color-yellow-200 #FFF59D
  • mdui-color-yellow-300 #FFF176
  • mdui-color-yellow-400 #FFEE58
  • mdui-color-yellow-500 #FFEB3B
  • mdui-color-yellow-600 #FDD835
  • mdui-color-yellow-700 #FBC02D
  • mdui-color-yellow-800 #F9A825
  • mdui-color-yellow-900 #F57F17
  • yellow(强调色) mdui-color-yellow-accent #FFFF00
  • mdui-color-yellow-a100 #FFFF8D
  • mdui-color-yellow-a200 #FFFF00
  • mdui-color-yellow-a400 #FFEA00
  • mdui-color-yellow-a700 #FFD600
  • amber(主色) mdui-color-amber #FFC107
  • mdui-color-amber-50 #FFF8E1
  • mdui-color-amber-100 #FFECB3
  • mdui-color-amber-200 #FFE082
  • mdui-color-amber-300 #FFD54F
  • mdui-color-amber-400 #FFCA28
  • mdui-color-amber-500 #FFC107
  • mdui-color-amber-600 #FFB300
  • mdui-color-amber-700 #FFA000
  • mdui-color-amber-800 #FF8F00
  • mdui-color-amber-900 #FF6F00
  • amber(强调色) mdui-color-amber-accent #FFD740
  • mdui-color-amber-a100 #FFE57F
  • mdui-color-amber-a200 #FFD740
  • mdui-color-amber-a400 #FFC400
  • mdui-color-amber-a700 #FFAB00
  • orange(主色) mdui-color-orange #FF9800
  • mdui-color-orange-50 #FFF3E0
  • mdui-color-orange-100 #FFE0B2
  • mdui-color-orange-200 #FFCC80
  • mdui-color-orange-300 #FFB74D
  • mdui-color-orange-400 #FFA726
  • mdui-color-orange-500 #FF9800
  • mdui-color-orange-600 #FB8C00
  • mdui-color-orange-700 #F57C00
  • mdui-color-orange-800 #EF6C00
  • mdui-color-orange-900 #E65100
  • orange(强调色) mdui-color-orange-accent #FFAB40
  • mdui-color-orange-a100 #FFD180
  • mdui-color-orange-a200 #FFAB40
  • mdui-color-orange-a400 #FF9100
  • mdui-color-orange-a700 #FF6D00
  • deep-orange(主色) mdui-color-deep-orange #FF5722
  • mdui-color-deep-orange-50 #FBE9E7
  • mdui-color-deep-orange-100 #FFCCBC
  • mdui-color-deep-orange-200 #FFAB91
  • mdui-color-deep-orange-300 #FF8A65
  • mdui-color-deep-orange-400 #FF7043
  • mdui-color-deep-orange-500 #FF5722
  • mdui-color-deep-orange-600 #F4511E
  • mdui-color-deep-orange-700 #E64A19
  • mdui-color-deep-orange-800 #D84315
  • mdui-color-deep-orange-900 #BF360C
  • deep-orange(强调色) mdui-color-deep-orange-accent #FF6E40
  • mdui-color-deep-orange-a100 #FF9E80
  • mdui-color-deep-orange-a200 #FF6E40
  • mdui-color-deep-orange-a400 #FF3D00
  • mdui-color-deep-orange-a700 #DD2C00
  • brown(主色) mdui-color-brown #795548
  • mdui-color-brown-50 #EFEBE9
  • mdui-color-brown-100 #D7CCC8
  • mdui-color-brown-200 #BCAAA4
  • mdui-color-brown-300 #A1887F
  • mdui-color-brown-400 #8D6E63
  • mdui-color-brown-500 #795548
  • mdui-color-brown-600 #6D4C41
  • mdui-color-brown-700 #5D4037
  • mdui-color-brown-800 #4E342E
  • mdui-color-brown-900 #3E2723
  •      
  •    
  •    
  •    
  •    
  • grey(主色) mdui-color-grey #9E9E9E
  • mdui-color-grey-50 #FAFAFA
  • mdui-color-grey-100 #F5F5F5
  • mdui-color-grey-200 #EEEEEE
  • mdui-color-grey-300 #E0E0E0
  • mdui-color-grey-400 #BDBDBD
  • mdui-color-grey-500 #9E9E9E
  • mdui-color-grey-600 #757575
  • mdui-color-grey-700 #616161
  • mdui-color-grey-800 #424242
  • mdui-color-grey-900 #212121
  •      
  •    
  •    
  •    
  •    
  • blue-grey(主色) mdui-color-blue-grey #607D8B
  • mdui-color-blue-grey-50 #ECEFF1
  • mdui-color-blue-grey-100 #CFD8DC
  • mdui-color-blue-grey-200 #B0BEC5
  • mdui-color-blue-grey-300 #90A4AE
  • mdui-color-blue-grey-400 #78909C
  • mdui-color-blue-grey-500 #607D8B
  • mdui-color-blue-grey-600 #546E7A
  • mdui-color-blue-grey-700 #455A64
  • mdui-color-blue-grey-800 #37474F
  • mdui-color-blue-grey-900 #263238
  •      
  •    
  •    
  •    
  •    
  • mdui-color-black #000000
  • mdui-color-white #FFFFFF
  • mdui-color-transparent transparent

      CSS 类名列表

      设置主题

      类名 效果 说明
      .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 设置禁用状态的图标颜色。默认为深色,深色主题下为浅色。