c-mdui-a
Version:
A fast way to build an application based on Material Design UI(MDUI).
1,029 lines (1,003 loc) • 121 kB
HTML
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>颜色和主题 - MDUI 开发文档, Material Design 前端框架</title>
<link rel="stylesheet" href="assets/mdui-v0.4.2/css/mdui.min.css"/>
<link rel="stylesheet" href="assets/highlight-9.12.0/styles/github-gist.css"/>
<link rel="stylesheet" href="assets/highlight-9.12.0/styles/railscasts.css"/>
<link rel="stylesheet" href="assets/docs/css/docs.css"/>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
<a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a>
<a href="index.html" class="mdui-typo-title">文档</a>
<div class="mdui-toolbar-spacer"></div>
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
<a href="https://github.com/zdhxiong/mdui" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
</svg>
</a>
</div>
</header>
<div class="mdui-drawer" id="main-drawer">
<div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
<div class="mdui-list-item-content">开始使用</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="download.html" class="mdui-list-item mdui-ripple ">安装</a>
<a href="compatibility.html" class="mdui-list-item mdui-ripple ">兼容性</a>
<a href="jq.html" class="mdui-list-item mdui-ripple ">JavaScript 工具库</a>
<a href="global.html" class="mdui-list-item mdui-ripple ">JavaScript 全局方法</a>
</div>
</div>
<div class="mdui-collapse-item mdui-collapse-item-open">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
<div class="mdui-list-item-content">样式</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="color.html" class="mdui-list-item mdui-ripple mdui-list-item-active">颜色与主题</a>
<a href="font.html" class="mdui-list-item mdui-ripple ">字体</a>
<a href="grid.html" class="mdui-list-item mdui-ripple ">网格布局</a>
<a href="typo.html" class="mdui-list-item mdui-ripple ">排版</a>
<a href="icon.html" class="mdui-list-item mdui-ripple ">图标</a>
<a href="media.html" class="mdui-list-item mdui-ripple ">媒体</a>
<a href="helper.html" class="mdui-list-item mdui-ripple ">辅助类</a>
<a href="shadow.html" class="mdui-list-item mdui-ripple ">阴影</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
<div class="mdui-list-item-content">组件</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="ripple.html" class="mdui-list-item mdui-ripple ">涟漪动画效果</a>
<a href="button.html" class="mdui-list-item mdui-ripple ">按钮</a>
<a href="fab.html" class="mdui-list-item mdui-ripple ">浮动操作按钮</a>
<a href="select.html" class="mdui-list-item mdui-ripple ">下拉选择</a>
<a href="divider.html" class="mdui-list-item mdui-ripple ">分隔线</a>
<a href="panel.html" class="mdui-list-item mdui-ripple ">可扩展面板</a>
<a href="textfield.html" class="mdui-list-item mdui-ripple ">文本框</a>
<a href="selection_control.html" class="mdui-list-item mdui-ripple ">选择控件</a>
<a href="slider.html" class="mdui-list-item mdui-ripple ">滑块</a>
<a href="list.html" class="mdui-list-item mdui-ripple ">列表</a>
<a href="list_control.html" class="mdui-list-item mdui-ripple ">列表控制</a>
<a href="grid_list.html" class="mdui-list-item mdui-ripple ">网格列表</a>
<a href="tab.html" class="mdui-list-item mdui-ripple ">Tab 选项卡</a>
<a href="toolbar.html" class="mdui-list-item mdui-ripple ">工具栏</a>
<a href="appbar.html" class="mdui-list-item mdui-ripple ">应用栏</a>
<a href="drawer.html" class="mdui-list-item mdui-ripple ">抽屉式导航</a>
<a href="bottom_nav.html" class="mdui-list-item mdui-ripple ">底部导航栏</a>
<a href="card.html" class="mdui-list-item mdui-ripple ">卡片</a>
<a href="chip.html" class="mdui-list-item mdui-ripple ">纸片</a>
<a href="tooltip.html" class="mdui-list-item mdui-ripple ">工具提示</a>
<a href="snackbar.html" class="mdui-list-item mdui-ripple ">Snackbar</a>
<a href="table.html" class="mdui-list-item mdui-ripple ">表格</a>
<a href="dialog.html" class="mdui-list-item mdui-ripple ">对话框</a>
<a href="menu.html" class="mdui-list-item mdui-ripple ">菜单</a>
<a href="progress.html" class="mdui-list-item mdui-ripple ">进度指示器</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i>
<div class="mdui-list-item-content">JavaScript 插件</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="collapse.html" class="mdui-list-item mdui-ripple ">Collapse</a>
<a href="headroom.html" class="mdui-list-item mdui-ripple ">Headroom</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
<div class="mdui-list-item-content">资源</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="material_icon.html" class="mdui-list-item mdui-ripple ">Material 图标</a>
</div>
</div>
</div>
</div>
<a id="anchor-top"></a>
<style>
.color-palette{
position: relative;
padding: 0 0 36px 0;
margin: 0;
list-style: none;
font-weight: 500;
font-size: 14px;
}
.color-palette li {
padding: 15px;
}
.color-palette .color-divider {
margin-top: 8px;
}
.color-palette .main-color {
}
.color-palette .main-color .color-name {
display: block;
margin-bottom: 60px;
}
.color-palette .color-hex {
float: right;
text-transform: uppercase;
}
.color-palette .anchor-primary-color {
position: absolute;
top: -72px;
}
.color-palette .anchor-accent-color {
position: absolute;
top: 520px;
}
</style>
<div class="mdui-container doc-container doc-no-cover">
<h1 class="doc-title mdui-text-color-theme">颜色与主题</h1>
<div class="doc-intro mdui-typo">
<p>MDUI 内置了 Material Design 的 19 组主色和 16 组强调色，所有颜色（包括背景色中的文本颜色、文本不透明度）均与 Material Design 官方文档保持一致。</p>
<div class="doc-intro-module">
<h3>相关阅读</h3>
<p><a href="http://www.mdui.org/design/style/color.html" target="_blank">Material Design 设计指南：样式 - 颜色</a></p>
</div>
</div>
<nav class="doc-toc mdui-text-color-theme">
<ul>
<li>
<a data-scroll href="color.html#color">主色和强调色</a>
<ul>
<li><a data-scroll href="color.html#color-primary">主色</a></li>
<li><a data-scroll href="color.html#color-accent">强调色</a></li>
</ul>
</li>
<li><a data-scroll href="color.html#background">背景颜色</a></li>
<li><a data-scroll href="color.html#text">文本颜色</a></li>
<li>
<a data-scroll href="color.html#theme">颜色主题</a>
<ul>
<li><a data-scroll href="color.html#theme-primary">主色</a></li>
<li><a data-scroll href="color.html#theme-accent">强调色</a></li>
<li><a data-scroll href="color.html#theme-layout">深色背景主题</a></li>
</ul>
</li>
<li><a data-scroll href="color.html#palette">颜色参考表</a></li>
<li>
<a data-scroll href="color.html#class">CSS 类名列表</a>
<ul>
<li><a data-scroll href="color.html#class-theme">设置主题</a></li>
<li><a data-scroll href="color.html#class-background">背景色</a></li>
<li><a data-scroll href="color.html#class-text">文本色</a></li>
</ul>
</li>
</ul>
</nav>
<div class="doc-cover"></div>
<div class="doc-chapter">
<div class="mdui-typo">
<h2 class="doc-chapter-title doc-chapter-title-first mdui-text-color-theme">主色和强调色 <a class="doc-anchor" id="color"></a></h2>
<p>Material Design 中的颜色分为主色（Primary）和强调色（Accent），每种颜色有多种不同的饱和度。</p>
<p>后面文档的 CSS 类名中，用 <code>[color]</code> 表示颜色名，<code>[degree]</code> 表示饱和度。</p>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">主色 <a class="doc-anchor" id="color-primary"></a></h4>
<p>主色共有 19 种颜色，包括：</p>
<div class="mdui-row-xs-2 mdui-row-sm-3 mdui-row-md-4 mdui-row-lg-6">
<div class="mdui-col">
<span class="doc-color-circle mdui-color-red mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-red">red</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-pink mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-pink">pink</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-purple mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-purple">purple</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-deep-purple mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-deep-purple">deep-purple</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-indigo mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-indigo">indigo</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-blue mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-blue">blue</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-light-blue mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-light-blue">light-blue</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-cyan mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-cyan">cyan</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-teal mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-teal">teal</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-green mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-green">green</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-light-green mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-light-green">light-green</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-lime mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-lime">lime</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-yellow mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-yellow">yellow</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-amber mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-amber">amber</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-orange mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-orange">orange</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-deep-orange mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-deep-orange">deep-orange</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-brown mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-brown">brown</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-grey mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-grey">grey</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-blue-grey mdui-m-r-1"></span>
<a data-scroll href="color.html#primary-color-blue-grey">blue-grey</a>
</div>
</div>
<p></p>
<p>主色每种颜色都有 10 种饱和度：</p>
<div class="mdui-row-xs-2 mdui-row-sm-3 mdui-row-md-4 mdui-row-lg-6">
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-50 mdui-m-r-2"></span>50
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-100 mdui-m-r-2"></span>100
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-200 mdui-m-r-2"></span>200
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-300 mdui-m-r-2"></span>300
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-400 mdui-m-r-2"></span>400
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-500 mdui-m-r-2"></span>500
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-600 mdui-m-r-2"></span>600
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-700 mdui-m-r-2"></span>700
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-800 mdui-m-r-2"></span>800
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-900 mdui-m-r-2"></span>900
</div>
</div>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">强调色 <a class="doc-anchor" id="color-accent"></a></h4>
<p>强调色共有 16 种颜色，包括：</p>
<div class="mdui-row-xs-2 mdui-row-sm-3 mdui-row-md-4 mdui-row-lg-6">
<div class="mdui-col">
<span class="doc-color-circle mdui-color-red-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-red">red</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-pink-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-pink">pink</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-purple-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-purple">purple</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-deep-purple-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-deep-purple">deep-purple</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-indigo-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-indigo">indigo</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-blue-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-blue">blue</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-light-blue-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-light-blue">light-blue</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-cyan-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-cyan">cyan</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-teal-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-teal">teal</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-green-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-green">green</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-light-green-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-light-green">light-green</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-lime-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-lime">lime</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-yellow-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-yellow">yellow</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-amber-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-amber">amber</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-orange-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-orange">orange</a>
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-deep-orange-accent mdui-m-r-1"></span>
<a data-scroll href="color.html#accent-color-deep-orange">deep-orange</a>
</div>
</div>
<p></p>
<p>强调色每种颜色都有 4 种饱和度：</p>
<div class="mdui-row-xs-2 mdui-row-sm-3 mdui-row-md-4 mdui-row-lg-6">
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-a100 mdui-m-r-2"></span>a100
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-a200 mdui-m-r-2"></span>a200
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-a400 mdui-m-r-2"></span>a400
</div>
<div class="mdui-col">
<span class="doc-color-circle mdui-color-theme-a700 mdui-m-r-2"></span>a700
</div>
</div>
</div>
<div class="mdui-typo">
<h2 class="doc-chapter-title mdui-text-color-theme">背景颜色 <a class="doc-anchor" id="background"></a></h2>
<p>背景颜色类名为 <code>.mdui-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-<span mdui-tooltip="{content: '颜色饱和度'}">[degree]</span></code>。它在设置背景色的同时，还设置了背景色中的文本颜色和文本不透明度。</p>
<p>此外主色和强调色都有一个默认的背景颜色类：
<ul>
<li><code>.mdui-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span></code> 和 <code>.mdui-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-500</code> 等效。</li>
<li><code>.mdui-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-accent</code> 和 <code>.mdui-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-a200</code> 等效。</li>
</ul>
</p>
</div>
<div class="doc-example">
<div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="color/demo1.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo">
<div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-lg-4">
<div class="mdui-col">
<div class="mdui-color-blue-200 doc-box-padding">mdui-color-blue-200</div>
</div>
<div class="mdui-col">
<div class="mdui-color-blue doc-box-padding">mdui-color-blue</div>
</div>
<div class="mdui-col">
<div class="mdui-color-pink-accent doc-box-padding">mdui-color-pink-accent</div>
</div>
<div class="mdui-col">
<div class="mdui-color-pink-a200 doc-box-padding">mdui-color-pink-a200</div>
</div>
</div>
</div>
<pre class="doc-example-code"><code class="lang-html"><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></code></pre>
</div>
<div class="mdui-typo">
<p>所有可用的背景色类名全部列在下方的 <a data-scroll href="color.html#palette">颜色参考表</a> 中。</p>
</div>
<div class="mdui-typo">
<h2 class="doc-chapter-title mdui-text-color-theme">文本颜色 <a class="doc-anchor" id="text"></a></h2>
<p>文本颜色类名为 <code>mdui-text-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-<span mdui-tooltip="{content: '颜色饱和度'}">[degree]</span></code> 。</p>
<p>此外主色和强调色都有一个默认的文本颜色类：</p>
<ul>
<li><code>.mdui-text-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span></code> 和 <code>.mdui-text-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-500</code> 等效。</li>
<li><code>.mdui-text-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-accent</code> 和 <code>.mdui-text-color-<span mdui-tooltip="{content: '颜色名'}">[color]</span>-a200</code> 等效。</li>
</ul>
</div>
<div class="doc-example">
<div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="color/demo2.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo">
<div class="mdui-text-color-blue-900 doc-box-padding">mdui-text-color-blue-900</div>
<div class="mdui-text-color-blue doc-box-padding">mdui-text-color-blue</div>
<div class="mdui-text-color-blue-a200 doc-box-padding">mdui-text-color-blue-a200</div>
<div class="mdui-text-color-blue-accent doc-box-padding">mdui-text-color-blue-accent</div>
</div>
<pre class="doc-example-code"><code class="lang-html"><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></code></pre>
</div>
<div class="mdui-typo">
<p>此外，MDUI 还提供了带不透明度的黑色和白色的文本和图标颜色。</p>
<ul>
<li><code>.mdui-text-color-black-*</code> 用于浅色背景。</li>
<li><code>.mdui-text-color-white-*</code> 用于深色背景。</li>
</ul>
</div>
<div class="doc-example">
<div class="doc-example-demo">
<div class="mdui-row-xs-1 mdui-row-md-2">
<div class="mdui-col">
<ul class="color-palette">
<li class="mdui-color-grey-100 mdui-text-color-black-text">
<span>mdui-text-color-black-text</span>
<span class="color-hex">87%</span>
</li>
<li class="mdui-color-grey-100 mdui-text-color-black-secondary">
<span>mdui-text-color-black-secondary</span>
<span class="color-hex">54%</span>
</li>
<li class="mdui-color-grey-100 mdui-text-color-black-disabled">
<span>mdui-text-color-black-disabled</span>
<span class="color-hex">38%</span>
</li>
<li class="mdui-color-grey-100 mdui-text-color-black-divider">
<span>mdui-text-color-black-divider</span>
<span class="color-hex">12%</span>
</li>
<li class="mdui-color-grey-100 mdui-text-color-black-icon">
<span>mdui-text-color-black-icon</span>
<span class="color-hex">54%</span>
</li>
<li class="mdui-color-grey-100 mdui-text-color-black-icon-disabled">
<span>mdui-text-color-black-icon-disabled</span>
<span class="color-hex">26%</span>
</li>
</ul>
</div>
<div class="mdui-col">
<ul class="color-palette">
<li class="mdui-color-grey-900 mdui-text-color-white-text">
<span>mdui-text-color-white-text</span>
<span class="color-hex">100%</span>
</li>
<li class="mdui-color-grey-900 mdui-text-color-white-secondary">
<span>mdui-text-color-white-secondary</span>
<span class="color-hex">70%</span>
</li>
<li class="mdui-color-grey-900 mdui-text-color-white-disabled">
<span>mdui-text-color-white-disabled</span>
<span class="color-hex">50%</span>
</li>
<li class="mdui-color-grey-900 mdui-text-color-white-divider">
<span>mdui-text-color-white-divider</span>
<span class="color-hex">12%</span>
</li>
<li class="mdui-color-grey-900 mdui-text-color-white-icon">
<span>mdui-text-color-white-icon</span>
<span class="color-hex">100%</span>
</li>
<li class="mdui-color-grey-900 mdui-text-color-white-icon-disabled">
<span>mdui-text-color-white-icon-disabled</span>
<span class="color-hex">30%</span>
</li>
</ul>
</div>
</div>
</div>
<pre class="doc-example-code"><code class="lang-html"></code></pre>
</div>
<div class="mdui-typo">
<h2 class="doc-chapter-title mdui-text-color-theme">主题颜色 <a class="doc-anchor" id="theme"></a></h2>
<p>MDUI 提供了主题功能，只需在 body 中加几个类即可实现主题切换功能，可切换的包括主色、强调色和背景色。</p>
<p>MDUI 的大部分组件都有默认颜色，设置了主题颜色后，这些组件也将用主题颜色替换默认颜色。</p>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">主色 <a class="doc-anchor" id="theme-primary"></a></h4>
<p>在 body 中添加类 <code>.mdui-theme-primary-<span mdui-tooltip="{content: '颜色名'}">[color]</span></code> 来设置主色。</p>
<p>在页面中使用下列类，这些类的颜色会随着 body 中的主题颜色的变化而变化：</p>
<ul>
<li><code>.mdui-color-theme</code></li>
<li><code>.mdui-color-theme-<span mdui-tooltip="{content: '主色的颜色饱和度'}">[degree]</span></code></li>
<li><code>.mdui-text-color-theme</code></li>
<li><code>.mdui-text-color-theme-<span mdui-tooltip="{content: '主色的颜色饱和度'}">[degree]</span></code></li>
</ul>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">强调色 <a class="doc-anchor" id="theme-accent"></a></h4>
<p>在 body 中添加类 <code>.mdui-theme-accent-<span mdui-tooltip="{content: '颜色名'}">[color]</span></code> 来设置强调色</p>
<p>在页面中使用下列类，这些类的颜色会随着 body 中的主题颜色的变化而变化：</p>
<ul>
<li><code>.mdui-color-theme-accent</code></li>
<li><code>.mdui-color-theme-<span mdui-tooltip="{content: '强调色的颜色饱和度'}">[degree]</span></code></li>
<li><code>.mdui-text-color-theme-accent</code></li>
<li><code>.mdui-text-color-theme-<span mdui-tooltip="{content: '强调色的颜色饱和度'}">[degree]</span></code></li>
</ul>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">主题色 <a class="doc-anchor" id="theme-layout"></a></h4>
<p>在 body 中添加类 <code>.mdui-theme-layout-dark</code> 即可把整个页面包括组件设置为深色背景。</p>
<p>此外，在页面中使用下列类，这些类的颜色会根据主题色进行变化，浅色主题时显示为深色，深色主题时显示为浅色。</p>
<ul>
<li><code>.mdui-text-color-theme-text</code></li>
<li><code>.mdui-text-color-theme-secondary</code></li>
<li><code>.mdui-text-color-theme-disabled</code></li>
<li><code>.mdui-text-color-theme-divider</code></li>
<li><code>.mdui-text-color-theme-icon</code></li>
<li><code>.mdui-text-color-theme-icon-disabled</code></li>
</ul>
</div>
<div class="mdui-typo mdui-m-t-5">
<p class="mdui-p-t-2">你可以点击页面右上角的 <i class="mdui-icon material-icons">color_lens</i> 图标来设置主题颜色，下面的颜色表的主色、强调色、主题色都会随之发生变化。</p>
</div>
<div class="doc-example">
<div class="doc-example-demo">
<div class="mdui-row-xs-1 mdui-row-md-2">
<div class="mdui-col">
<ul class="color-palette">
<li class="mdui-color-theme main-color">
<span class="color-name">Primary（主色）</span>
<span class="color-class">mdui-color-theme</span>
</li>
<li class="mdui-color-theme-50">
<span class="color-class">mdui-color-theme-50</span>
</li>
<li class="mdui-color-theme-100">
<span class="color-class">mdui-color-theme-100</span>
</li>
<li class="mdui-color-theme-200">
<span class="color-class">mdui-color-theme-200</span>
</li>
<li class="mdui-color-theme-300">
<span class="color-class">mdui-color-theme-300</span>
</li>
<li class="mdui-color-theme-400">
<span class="color-class">mdui-color-theme-400</span>
</li>
<li class="mdui-color-theme-500">
<span class="color-class">mdui-color-theme-500</span>
</li>
<li class="mdui-color-theme-600">
<span class="color-class">mdui-color-theme-600</span>
</li>
<li class="mdui-color-theme-700">
<span class="color-class">mdui-color-theme-700</span>
</li>
<li class="mdui-color-theme-800">
<span class="color-class">mdui-color-theme-800</span>
</li>
<li class="mdui-color-theme-900">
<span class="color-class">mdui-color-theme-900</span>
</li>
</ul>
</div>
<div class="mdui-col">
<ul class="color-palette">
<li class="mdui-color-theme-accent main-color">
<span class="color-name">Accent（强调色）</span>
<span class="color-class">mdui-color-theme-accent</span>
</li>
<li class="mdui-color-theme-a100">
<span class="color-class">mdui-color-theme-a100</span>
</li>
<li class="mdui-color-theme-a200">
<span class="color-class">mdui-color-theme-a200</span>
</li>
<li class="mdui-color-theme-a400">
<span class="color-class">mdui-color-theme-a400</span>
</li>
<li class="mdui-color-theme-a700">
<span class="color-class">mdui-color-theme-a700</span>
</li>
<li class="mdui-text-color-theme-text">
<span>mdui-text-color-theme-text</span>
<span class="color-hex doc-visible-light-theme">87%</span>
<span class="color-hex doc-visible-dark-theme">100%</span>
</li>
<li class="mdui-text-color-theme-secondary">
<span>mdui-text-color-theme-secondary</span>
<span class="color-hex doc-visible-light-theme">54%</span>
<span class="color-hex doc-visible-dark-theme">70%</span>
</li>
<li class="mdui-text-color-theme-disabled">
<span>mdui-text-color-theme-disabled</span>
<span class="color-hex doc-visible-light-theme">38%</span>
<span class="color-hex doc-visible-dark-theme">50%</span>
</li>
<li class="mdui-text-color-theme-divider">
<span>mdui-text-color-theme-divider</span>
<span class="color-hex doc-visible-light-theme">12%</span>
<span class="color-hex doc-visible-dark-theme">12%</span>
</li>
<li class="mdui-text-color-theme-icon">
<span>mdui-text-color-theme-icon</span>
<span class="color-hex doc-visible-light-theme">54%</span>
<span class="color-hex doc-visible-dark-theme">100%</span>
</li>
<li class="mdui-text-color-theme-icon-disabled">
<span>mdui-text-color-theme-icon-disabled</span>
<span class="color-hex doc-visible-light-theme">26%</span>
<span class="color-hex doc-visible-dark-theme">30%</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mdui-typo">
<h2 class="doc-chapter-title mdui-text-color-theme">颜色参考表 <a class="doc-anchor" id="palette"></a></h2>
</div>
<div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3 mdui-row-xl-4 mdui-m-t-5">
<div class="mdui-col">
<ul class="color-palette">
<a id="primary-color-red" class="anchor-primary-color"></a>
<li class="mdui-color-red main-color">
<span class="color-name">red（主色）</span>
<span class="color-class">mdui-color-red</span>
<span class="color-hex">#F44336</span>
</li>
<li class="mdui-color-red-50">
<span class="color-class">mdui-color-red-50</span>
<span class="color-hex">#FFEBEE</span>
</li>
<li class="mdui-color-red-100">
<span class="color-class">mdui-color-red-100</span>
<span class="color-hex">#FFCDD2</span>
</li>
<li class="mdui-color-red-200">
<span class="color-class">mdui-color-red-200</span>
<span class="color-hex">#EF9A9A</span>
</li>
<li class="mdui-color-red-300">
<span class="color-class">mdui-color-red-300</span>
<span class="color-hex">#E57373</span>
</li>
<li class="mdui-color-red-400">
<span class="color-class">mdui-color-red-400</span>
<span class="color-hex">#EF5350</span>
</li>
<li class="mdui-color-red-500">
<span class="color-class">mdui-color-red-500</span>
<span class="color-hex">#F44336</span>
</li>
<li class="mdui-color-red-600">
<span class="color-class">mdui-color-red-600</span>
<span class="color-hex">#E53935</span>
</li>
<li class="mdui-color-red-700">
<span class="color-class">mdui-color-red-700</span>
<span class="color-hex">#D32F2F</span>
</li>
<li class="mdui-color-red-800">
<span class="color-class">mdui-color-red-800</span>
<span class="color-hex">#C62828</span>
</li>
<li class="mdui-color-red-900">
<span class="color-class">mdui-color-red-900</span>
<span class="color-hex">#B71C1C</span>
</li>
<a id="accent-color-red" class="anchor-accent-color"></a>
<li class="mdui-color-red-accent main-color color-divider">
<span class="color-name">red（强调色）</span>
<span class="color-class">mdui-color-red-accent</span>
<span class="color-hex">#FF5252</span>
</li>
<li class="mdui-color-red-a100">
<span class="color-class">mdui-color-red-a100</span>
<span class="color-hex">#FF8A80</span>
</li>
<li class="mdui-color-red-a200">
<span class="color-class">mdui-color-red-a200</span>
<span class="color-hex">#FF5252</span>
</li>
<li class="mdui-color-red-a400">
<span class="color-class">mdui-color-red-a400</span>
<span class="color-hex">#FF1744</span>
</li>
<li class="mdui-color-red-a700">
<span class="color-class">mdui-color-red-a700</span>
<span class="color-hex">#D50000</span>
</li>
</ul>
</div>
<div class="mdui-col">
<ul class="color-palette">
<a id="primary-color-pink" class="anchor-primary-color"></a>
<li class="mdui-color-pink main-color">
<span class="color-name">pink（主色）</span>
<span class="color-class">mdui-color-pink</span>
<span class="color-hex">#E91E63</span>
</li>
<li class="mdui-color-pink-50">
<span class="color-class">mdui-color-pink-50</span>
<span class="color-hex">#FCE4EC</span>
</li>
<li class="mdui-color-pink-100">
<span class="color-class">mdui-color-pink-100</span>
<span class="color-hex">#F8BBD0</span>
</li>
<li class="mdui-color-pink-200">
<span class="color-class">mdui-color-pink-200</span>
<span class="color-hex">#F48FB1</span>
</li>
<li class="mdui-color-pink-300">
<span class="color-class">mdui-color-pink-300</span>
<span class="color-hex">#F06292</span>
</li>
<li class="mdui-color-pink-400">
<span class="color-class">mdui-color-pink-400</span>
<span class="color-hex">#EC407A</span>
</li>
<li class="mdui-color-pink-500">
<span class="color-class">mdui-color-pink-500</span>
<span class="color-hex">#E91E63</span>
</li>
<li class="mdui-color-pink-600">
<span class="color-class">mdui-color-pink-600</span>
<span class="color-hex">#D81B60</span>
</li>
<li class="mdui-color-pink-700">
<span class="color-class">mdui-color-pink-700</span>
<span class="color-hex">#C2185B</span>
</li>
<li class="mdui-color-pink-800">
<span class="color-class">mdui-color-pink-800</span>
<span class="color-hex">#AD1457</span>
</li>
<li class="mdui-color-pink-900">
<span class="color-class">mdui-color-pink-900</span>
<span class="color-hex">#880E4F</span>
</li>
<a id="accent-color-pink" class="anchor-accent-color"></a>
<li class="mdui-color-pink-accent main-color color-divider">
<span class="color-name">pink（强调色）</span>
<span class="color-class">mdui-color-pink-accent</span>
<span class="color-hex">#FF4081</span>
</li>
<li class="mdui-color-pink-a100">
<span class="color-class">mdui-color-pink-a100</span>
<span class="color-hex">#FF80AB</span>
</li>
<li class="mdui-color-pink-a200">
<span class="color-class">mdui-color-pink-a200</span>
<span class="color-hex">#FF4081</span>
</li>
<li class="mdui-color-pink-a400">
<span class="color-class">mdui-color-pink-a400</span>
<span class="color-hex">#F50057</span>
</li>
<li class="mdui-color-pink-a700">
<span class="color-class">mdui-color-pink-a700</span>
<span class="color-hex">#C51162</span>
</li>
</ul>
</div>
<div class="mdui-col">
<ul class="color-palette">
<a id="primary-color-purple" class="anchor-primary-color"></a>
<li class="mdui-color-purple main-color">
<span class="color-name">purple（主色）</span>
<span class="color-class">mdui-color-purple</span>
<span class="color-hex">#9C27B0</span>
</li>
<li class="mdui-color-purple-50">
<span class="color-class">mdui-color-purple-50</span>
<span class="color-hex">#F3E5F5</span>
</li>
<li class="mdui-color-purple-100">
<span class="color-class">mdui-color-purple-100</span>
<span class="color-hex">#E1BEE7</span>
</li>
<li class="mdui-color-purple-200">
<span class="color-class">mdui-color-purple-200</span>
<span class="color-hex">#CE93D8</span>
</li>
<li class="mdui-color-purple-300">
<span class="color-class">mdui-color-purple-300</span>
<span class="color-hex">#BA68C8</span>
</li>
<li class="mdui-color-purple-400">
<span class="color-class">mdui-color-purple-400</span>
<span class="color-hex">#AB47BC</span>
</li>
<li class="mdui-color-purple-500">
<span class="color-class">mdui-color-purple-500</span>
<span class="color-hex">#9C27B0</span>
</li>
<li class="mdui-color-purple-600">
<span class="color-class">mdui-color-purple-600</span>
<span class="color-hex">#8E24AA</span>
</li>
<li class="mdui-color-purple-700">
<span class="color-class">mdui-color-purple-700</span>
<span class="color-hex">#7B1FA2</span>
</li>
<li class="mdui-color-purple-800">
<span class="color-class">mdui-color-purple-800</span>
<span class="color-hex">#6A1B9A</span>
</li>
<li class="mdui-color-purple-900">
<span class="color-class">mdui-color-purple-900</span>
<span class="color-hex">#4A148C</span>
</li>
<a id="accent-color-purple" class="anchor-accent-color"></a>
<li class="mdui-color-purple-accent main-color color-divider">
<span class="color-name">purple（强调色）</span>
<span class="color-class">mdui-color-purple-accent</span>
<span class="color-hex">#E040FB</span>
</li>
<li class="mdui-color-purple-a100">
<span class="color-class">mdui-color-purple-a100</span>
<span class="color-hex">#EA80FC</span>
</li>
<li class="mdui-color-purple-a200">
<span class="color-class">mdui-color-purple-a200</span>
<span class="color-hex">#E040FB</span>
</li>
<li class="mdui-color-purple-a400">
<span class="color-class">mdui-color-purple-a400</span>
<span class="color-hex">#D500F9</span>
</li>
<li class="mdui-color-purple-a700">
<span class="color-class">mdui-color-purple-a700</span>
<span class="color-hex">#AA00FF</span>
</li>
</ul>
</div>
<div class="mdui-col">
<ul class="color-palette">
<a id="primary-color-deep-purple" class="anchor-primary-color"></a>
<li class="mdui-color-deep-purple main-color">
<span class="color-name">deep-purple（主色）</span>
<span class="color-class">mdui-color-deep-purple</span>
<span class="color-hex">#673AB7</span>
</li>
<li class="mdui-color-deep-purple-50">
<span class="color-class">mdui-color-deep-purple-50</span>
<span class="color-hex">#EDE7F6</span>
</li>
<li class="mdui-color-deep-purple-100">
<span class="color-class">mdui-color-deep-purple-100</span>
<span class="color-hex">#D1C4E9</span>
</li>
<li class="mdui-color-deep-purple-200">
<span class="color-class">mdui-color-deep-purple-200</span>
<span class="color-hex">#B39DDB</span>
</li>
<li class="mdui-color-deep-purple-300">
<span class="color-class">mdui-color-deep-purple-300</span>
<span class="color-hex">#9575CD</span>
</li>
<li class="mdui-color-deep-purple-400">
<span class="color-class">mdui-color-deep-purple-400</span>
<span class="color-hex">#7E57C2</span>
</li>
<li class="mdui-color-deep-purple-500">
<span class="color-class">mdui-color-deep-purple-500</span>
<span class="color-hex">#673AB7</span>
</li>
<li class="mdui-color-deep-purple-600">
<span class="color-class">mdui-color-deep-purple-600</span>
<span class="color-hex">#5E35B1</span>
</li>
<li class="mdui-color-deep-purple-700">
<span class="color-class">mdui-color-deep-purple-700</span>
<span class="color-hex">#512DA8</span>
</li>
<li class="mdui-color-deep-purple-800">
<span class="color-class">mdui-color-deep-purple-800</span>
<span class="color-hex">#4527A0</span>
</li>
<li class="mdui-color-deep-purple-900">
<span class="color-class">mdui-color-deep-purple-900</span>
<span class="color-hex">#311B92</span>
</li>
<a id="accent-color-deep-purple" class="anchor-accent-color"></a>
<li class="mdui-color-deep-purple-accent main-color color-divider">
<span class="color-name">purple（强调色）</span>
<span class="color-class">mdui-color-deep-purple-accent</span>
<span class="color-hex">#7C4DFF</span>
</li>
<li class="mdui-color-deep-purple-a100">
<span class="color-class">mdui-color-deep-purple-a100</span>
<span class="color-hex">#B388FF</span>
</li>
<li class="mdui-color-deep-purple-a200">
<span class="color-class">mdui-color-deep-purple-a200</span>
<span class="color-hex">#7C4DFF</span>
</li>
<li class="mdui-color-deep-purple-a400">
<span class="color-class">mdui-color-deep-purple-a400</span>
<span class="color-hex">#651FFF</span>
</li>
<li class="mdui-color-deep-purple-a700">
<span class="color-class">mdui-color-deep-purple-a700</span>
<span class="color-hex">#6200EA</span>
</li>
</ul>
</div>
<div class="mdui-col">
<ul class="color-palette">
<a id="primary-color-indigo" class="anchor-primary-color"></a>
<li class="mdui-color-indigo main-color">
<span class="color-name">indigo（主色）</span>
<span class="color-class">mdui-color-indigo</span>
<span class="color-hex">#3F51B5</span>
</li>
<li class="mdui-color-indigo-50">
<span class="color-class">mdui-color-indigo-50</span>
<span class="color-hex">#E8EAF6</span>
</li>
<li class="mdui-color-indigo-100">
<span class="color-class">mdui-color-indigo-100</span>
<span class="color-hex">#C5CAE9</span>
</li>
<li class="mdui-color-indigo-200">
<span class="color-class">mdui-color-indigo-200</span>
<span class="color-hex">#9FA8DA</span>
</li>
<li class="mdui-color-indigo-300">
<span class="color-class">mdui-color-indigo-300</span>
<span class="color-hex">#7986CB</span>
</li>
<li class="mdui-color-indigo-400">
<span class="color-class">mdui-color-indigo-400</span>
<span class="color-hex">#5C6BC0</span>
</li>
<li class="mdui-color-indigo-500">
<span class="color-class">mdui-color-indigo-500</span>
<span class="color-hex">#3F51B5</span>
</li>
<li class="mdui-color-indigo-600">
<span class="color-class">mdui-color-indigo-600</span>
<span class="color-hex">#3949AB</span>
</li>
<li class="mdui-color-indigo-700">
<span class="color-class">mdui-color-indigo-700</span>
<span class="color-hex">#303F9F</span>
</li>
<li class="mdui-color-indigo-800">
<span class