顏色與主題

MDUI 內置了 Material Design 的 19 組主色和 16 組強調色，所有顏色（包括背景色中的文本顏色、文本不透明度）均與 Material Design 官方文檔保持一致。

相關資源

Material Design 顏色規(guī)范

主色和強調色

Material Design 中的顏色分為主色（Primary）和強調色（Accent），每種顏色有多種不同的飽和度。

后面文檔的 CSS 類名中，用 [color] 表示顏色名，[degree] 表示飽和度。

主色

主色共有 19 種顏色，包括：

• red
  
• pink
  
• purple
  
• deep-purple
  
• indigo
  
• blue
  
• light-blue
  
• cyan
  
• teal
  
• green
  
• light-green
  
• lime
  
• yellow
  
• amber
  
• orange
  
• deep-orange
  
• brown
  
• grey
  
• blue-grey
  

主色每種顏色都有 10 種飽和度：

• 50
  
• 100
  
• 200
  
• 300
  
• 400
  
• 500
  
• 600
  
• 700
  
• 800
  
• 900
  

強調色

強調色共有 16 種顏色，包括：

• red
  
• pink
  
• purple
  
• deep-purple
  
• indigo
  
• blue
  
• light-blue
  
• cyan
  
• teal
  
• green
  
• light-green
  
• lime
  
• yellow
  
• amber
  
• orange
  
• deep-orange
  

強調色每種顏色都有 4 種飽和度：

• a100
  
• a200
  
• a400
  
• a700
  

背景色

背景顏色類名為 .mdui-color-[color]-[degree]。它在設置背景色的同時，還設置了背景色中的文本顏色和文本不透明度。

此外主色和強調色都有一個默認的背景顏色類：

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

在線運行

所有可用的背景色類名全部列在下方的“顏色參考表”中。

文本顏色

文本顏色類名為 mdui-text-color-[color]-[degree] 。

此外主色和強調色都有一個默認的文本顏色類：

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

在線運行

此外，MDUI 還提供了帶不透明度的黑色和白色的文本和圖標顏色。

• .mdui-text-color-black-* 用于淺色背景。
  
• .mdui-text-color-white-* 用于深色背景。
  

主題顏色

MDUI 提供了主題功能，只需在 body 中加幾個類即可實現(xiàn)主題切換功能，可切換的包括主色、強調色和背景色。

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 即可把整個頁面包括組件設置為深色背景。

此外，在頁面中使用下列類，這些類的顏色會根據(jù)主題色進行變化，淺色主題時顯示為深色，深色主題時顯示為淺色。

• .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
  

你可以點擊官方文檔右上角的色板圖標，來預覽主題切換的效果。

顏色參考表