<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

你可以點擊頁面右上角的圖示來設定主題顏色，下面的顏色表的主色、強調色、主題色都會隨之發生變化。

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-text87%100%
mdui-text-color-theme-secondary54%70%
mdui-text-color-theme-disabled38%50%
mdui-text-color-theme-divider12%12%
mdui-text-color-theme-icon54%100%
mdui-text-color-theme-icon-disabled26%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-transparenttransparent

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`	設定停用狀態的圖示顏色。預設為深色，深色主題下為淺色。

從 0.4.3 升級到 1.0.0

Roboto 字型

顏色與主題

相關閱讀

主色和強調色

主色

強調色

背景顏色