颜色与主题

2018-05-24 17:39 更新

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


相关资源

Material Design 颜色规范


主色和强调色

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 等效。

www.mdui.org - 背景色示例

在线运行

所有可用的背景色类名全部列在下方的“颜色参考表”中。


文本颜色

文本颜色类名为 mdui-text-color-[color]-[degree] 。

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

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

www.mdui.org - 文本色示例

在线运行

此外,MDUI 还提供了带不透明度的黑色和白色的文本和图标颜色。

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

www.mdui.org - 暗色文本色示例www.mdui.org - 亮色文本色示例


主题颜色

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 即可把整个页面包括组件设置为深色背景。

此外,在页面中使用下列类,这些类的颜色会根据主题色进行变化,浅色主题时显示为深色,深色主题时显示为浅色。

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

你可以点击官方文档右上角的色板图标,来预览主题切换的效果。


颜色参考表

www.mdui.org - red 色板www.mdui.org - pink 色板www.mdui.org - purple 色板www.mdui.org - deep-purple 色板www.mdui.org - indigo 色板www.mdui.org - blue 色板www.mdui.org - light-blue 色板www.mdui.org - cyan 色板www.mdui.org - teal 色板www.mdui.org - green 色板www.mdui.org - light-green 色板www.mdui.org - lime 色板www.mdui.org - yellow 色板www.mdui.org - amber 色板www.mdui.org - orange 色板www.mdui.org - deep-orange 色板www.mdui.org - brown 色板www.mdui.org - grey 色板www.mdui.org - blue-grey 色板black
























以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号