[TOC] 基于CSS的主题使应用程序可以通过加载CSS文件或更改一些CSS属性值来快速自定义颜色。 ## 颜色 Ionic有九种默认颜色，可用于改变许多组件的颜色。每种颜色实际上是多种属性的集合，包括a`shade`和`tint`，在整个Ionic中使用。 可以将颜色应用于Ionic组件，以便使用该`color`属性更改默认颜色。请注意，在下面的按钮中，文本和背景会根据`color`设置进行更改。当`color`按钮上没有设置时，它`primary`默认使用颜色。 ~~~ <ion-button>Default</ion-button> <ion-button color="primary">Primary</ion-button> <ion-button color="secondary">Secondary</ion-button> <ion-button color="tertiary">Tertiary</ion-button> <ion-button color="success">Success</ion-button> <ion-button color="warning">Warning</ion-button> <ion-button color="danger">Danger</ion-button> <ion-button color="light">Light</ion-button> <ion-button color="medium">Medium</ion-button> <ion-button color="dark">Dark</ion-button> ~~~ ### 分层颜色 每种颜色由以下属性：一`base`，`contrast`，`shade`，和`tint`。该`base`和`contrast`颜色还需要一个`rgb`属性，它是同一种颜色，只需在[RGB格式](https://developer.mozilla.org/en-US/docs/Glossary/RGB)。有关为何还需要该属性的说明，请参阅[Alpha问题](https://ionicframework.com/docs/theming/advanced#the-alpha-problem)`rgb`。从下面的下拉列表中选择，查看Ionic提供的所有默认颜色及其变化。 ### 修改颜色 要更改颜色的默认值，应设置该颜色的所有列出的变体。例如，要将辅助颜色更改为，设置以下CSS属性： ~~~ :root { --ion-color-secondary: #006600; --ion-color-secondary-rgb: 0,102,0; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255,255,255; --ion-color-secondary-shade: #005a00; --ion-color-secondary-tint: #1a751a; } } ~~~ 当`secondary`应用于按钮时，不仅是基色使用，但对比色用于文本，以及阴影和色彩按钮的不同状态的颜色。 > 不知道如何从基色中获取变化颜色？试用我们的\[Color Generator\]（/ docs /主题/颜色生成器）来计算所有变体并提供复制/粘贴到应用程序的代码！ 见[CSS变量文档](https://ionicframework.com/docs/theming/css-variables)有关CSS变量的更多信息。 ### 添加颜色 要添加新颜色，请创建一个类，该类使用该颜色的CSS变量定义所有变体。该类应该格式书写的`.ion-color-{COLOR}`地方`{COLOR}`是颜色添加的名称。例如，要添加一个被调用的颜色`favorite`，可以添加以下类： ~~~ .ion-color-favorite { --ion-color-base: #69bb7b; --ion-color-base-rgb: 105,187,123; --ion-color-contrast: #ffffff; --ion-color-contrast-rgb: 255,255,255; --ion-color-shade: #5ca56c; --ion-color-tint: #78c288; } } ~~~ 添加类后，可以在支持该`color`属性的任何Ionic组件上使用该颜色。`favorite`下面是在离子按钮上使用颜色的示例。 ~~~ <ion-button color="favorite">Favorite</ion-button> ~~~ 重要的是要注意，添加上面的类不会自动创建用于应用程序样式表的Ionic CSS变量。这意味着通过添加类`--ion-color-favorite`**不存在**开始的变化`.ion-color-favorite`。这些应单独声明以用于应用程序： ~~~ :root { --ion-color-favorite: #69bb7b; --ion-color-favorite-rgb: 105,187,123; --ion-color-favorite-contrast: #ffffff; --ion-color-favorite-contrast-rgb: 255,255,255; --ion-color-favorite-shade: #5ca56c; --ion-color-favorite-tint: #78c288; } } ~~~ 现在`favorite`颜色可以在CSS中使用类似下面设置`background`和`color`上一个`div`。 ~~~ div { background: var(--ion-color-favorite); color: var(--ion-color-favorite-contrast); } } ~~~ 见[CSS变量文档](https://ionicframework.com/docs/theming/css-variables)有关CSS变量的更多信息。 ## 主题 Ionic提供了几个全局变量，这些变量在整个组件中用于更改整个应用程序的默认主题。以下部分按用法分隔不同的主题变量：[应用程序颜色](https://ionicframework.com/docs/theming/advanced#application-colors)，[步进颜色](https://ionicframework.com/docs/theming/advanced#stepped-colors)。 ### 应用颜色 应用颜色在Ionic的多个地方使用。这些对于轻松创建与品牌匹配的黑暗主题或主题非常有用。 重要的是要注意背景和文本颜色变量还需要以[rgb格式](https://developer.mozilla.org/en-US/docs/Glossary/RGB)设置rgb变量。有关为何还需要该属性的说明，请参阅[Alpha问题](https://ionicframework.com/docs/theming/advanced#the-alpha-problem)`rgb`。 | 名称 | 描述 | | --- | --- | | `--ion-background-color` | 整个应用程序的背景颜色 | | `--ion-background-color-rgb` | 整个app的背景颜色，rgb格式 | | `--ion-text-color` | 整个应用程序的文字颜色 | | `--ion-text-color-rgb` | 整个应用程序的文本颜色，rgb格式 | | `--ion-backdrop-color` | 背景组件的颜色 | | `--ion-overlay-background-color` | 叠加的背景颜色 | | `--ion-border-color` | 边框颜色 | | `--ion-box-shadow-color` | 盒子阴影颜色 | | `--ion-tab-bar-background` | 标签栏的背景 | | `--ion-tab-bar-background-focused` | 聚焦标签栏的背景 | | `--ion-tab-bar-border-color` | 标签栏的边框颜色 | | `--ion-tab-bar-color` | 标签栏的颜色 | | `--ion-tab-bar-color-activated` | 激活Tab的颜色 | | `--ion-toolbar-background` | 工具栏的背景 | | `--ion-toolbar-border-color` | 工具栏的边框颜色 | | `--ion-toolbar-color` | 工具栏中组件的颜色 | | `--ion-toolbar-color-activated` | 工具栏中激活的组件的颜色 | | `--ion-toolbar-color-unchecked` | 工具栏中未选中组件的颜色 | | `--ion-toolbar-color-checked` | 工具栏中已检查组件的颜色 | | `--ion-item-background` | 项目的背景 | | `--ion-item-background-activated` | 激活项目的背景 | | `--ion-item-border-color` | 物品的边框颜色 | | `--ion-item-color` | 项目中组件的颜色 | | `--ion-placeholder-color` | 输入中占位符的颜色 | ### 阶梯色 在探索了定制Ionic主题的不同方法后，我们发现我们不能只使用一种背景或文本颜色。为了暗示整个设计的重要性和深度，我们需要使用不同色调的背景和文本颜色。为了适应这种模式，我们创建了阶梯式颜色。 虽然更新background（`--ion-background-color`）和text（`--ion-text-color`）变量会改变大多数组件的应用程序外观，但某些离子组件可能会在其中显示或断开。应用较暗的主题时，这将更加明显。 在某些组件中，我们使用比背景更暗的阴影或比文本更亮的阴影。例如，项目标题文本可能需要，这比我们的默认文字颜色浅几个。同时，加载组件背景比白色暗，使用。我们使用阶梯式颜色来定义这些微小的变化。在更新应用程序的背景或文本颜色时更新阶梯式颜色非常重要。 默认情况下，离子步进颜色从默认背景颜色值开始并与文本颜色值混合使用越来越高的百分比步骤颜色的完整列表显示在下面的生成器中。 ### 生成阶跃颜色变量 为您的应用创建自定义背景和文字颜色主题。更新下面的背景或文本颜色的十六进制值，然后将生成的代码直接复制并粘贴到您的Ionic项目中。 ## 全局 虽然前面提到的变量对于更改应用程序的颜色很有用，但通常需要在多个组件中使用变量。以下变量在组件之间共享以更改全局填充设置等。 ### 应用程序变量 | 名称 | 描述 | | --- | --- | | `--ion-font-family` | 应用程序的字体系列 | | `--ion-statusbar-padding` | 状态栏填充应用程序的顶部 | | `--ion-safe-area-top` | 调整应用程序顶部的安全区域 | | `--ion-safe-area-right` | 调整应用程序右侧的安全区域 | | `--ion-safe-area-bottom` | 调整应用程序的安全区域嵌入底部 | | `--ion-safe-area-left` | 调整应用程序左侧的安全区域嵌入 | | `--ion-margin` | 调整边距[保证金属性](https://ionicframework.com/docs/layout/css-utilities#element-margin) | | `--ion-padding` | 调整填充[填充属性](https://ionicframework.com/docs/layout/css-utilities#element-padding) | ### 网格变量 | 名称 | 描述 | | --- | --- | | `--ion-grid-columns` | 网格中的列数 | | `--ion-grid-padding-xs` | 为xs断点填充网格 | | `--ion-grid-padding-sm` | 为sm断点填充网格 | | `--ion-grid-padding-md` | 为md断点填充网格 | | `--ion-grid-padding-lg` | 为lg断点填充网格 | | `--ion-grid-padding-xl` | 为xl断点填充网格 | | `--ion-grid-column-padding-xs` | 为xs断点填充网格列 | | `--ion-grid-column-padding-sm` | 为sm断点填充网格列 | | `--ion-grid-column-padding-md` | 为md断点填充网格列 | | `--ion-grid-column-padding-lg` | 为lg断点填充网格列 | | `--ion-grid-column-padding-xl` | 为xl断点填充网格列 | ## 已知限制 ### 阿尔法问题 rgba 对于十六进制颜色的alpha使用尚未完全[支持浏览器](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Browser_compatibility)。的[RGBA（）](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba())函数只接受一个值`R, G, B, A`（红，绿，蓝，阿尔法）格式。以下代码显示传递给的正确值和错误值的示例`rgba()`。 ~~~ /* 这些例子使用相同的颜色：blueviolet */ .broken { --violet: #8a2be2; /* rgba（＃8a2be2，.5） */ color: rgba(var(--violet), .5) /* 错误！不支持十六进制 */ } } .working { --violet-rgb: 138, 43, 226; /* rgba(138, 43, 226, .5) */ color: rgba(var(--violet-rgb), .5) /* 这就对了! */ } ~~~ > 有关如何获取和设置CSS变量的更多信息，请参见\[CSS变量\]（/ docs / theming / css-variables）部分。 Ionic在几个组件中使用具有不透明度（alpha）的颜色。为了使其工作，必须以RGB格式提供这些属性。更改任何以变体结尾的属性时，`-rgb`重要的是它们也以逗号分隔的格式提供，**不带括号**。以下是更改文本和背景颜色的一些示例。 ~~~ :root { /* 这些例子使用相同的颜色：sienna */ --ion-text-color: #a0522d; --ion-text-color-rgb: 160, 82, 45; /* 这些示例使用相同的颜色：lightsteelblue */ --ion-background-color: #b0c4de; --ion-background-color-rgb: 176, 196, 222; } } ~~~ 请注意，RGB格式的颜色与十六进制属性的颜色完全相同，但现在可以使用`rgba()`。例如，`--ion-text-color-rgb`现在可以按以下方式使用 ~~~ body { color: rgba(var(--ion-text-color-rgb), 0.25); } } ~~~