颜色

Ionic 有九种默认颜色，可用于更改许多组件的颜色。每种颜色实际上是多个属性的集合，包括 shade 和 tint，在整个 Ionic 中使用。

¥Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic.

可以将颜色应用于 Ionic 组件，以便使用 color 属性更改默认颜色。请注意下面的按钮，文本和背景根据 color 设置而变化。当按钮上没有设置 color 时，默认使用 primary 颜色。

¥A color can be applied to an Ionic component in order to change the default colors using the color attribute. Notice in the buttons below that the text and background changes based on the color set. When there is no color set on the button it uses the primary color by default.

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

分层颜色

¥Layered Colors

每种颜色都包含以下属性：a base、contrast、shade 和 tint。base 和 contrast 颜色还需要 rgb 属性，该属性与 RGB 格式中的颜色相同。请参阅阿尔法问题以了解为什么还需要 rgb 属性。从下面的下拉列表中进行选择，查看 Ionic 提供的所有默认颜色及其变化。

¥Each color consists of the following properties: a base, contrast, shade, and tint. The base and contrast colors also require a rgb property which is the same color, just in rgb format. See The Alpha Problem for an explanation of why the rgb property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations.

Name	Property	Default Value	Description

修改颜色

¥Modifying Colors

要更改颜色的默认值，应设置该颜色的所有列出的变体。例如，要将辅助颜色更改为 #006600，请设置以下 CSS 属性：

¥To change the default values of a color, all of the listed variations for that color should be set. For example, to change the secondary color to #006600, set the following CSS properties:

: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 应用于按钮时，不仅使用基色 #006600，而且还使用文本对比色 #ffffff，以及按钮不同状态的阴影 #005a00 和色调 #1a751a 颜色。

¥When secondary is applied to a button, not only is the base color #006600 used, but the contrast color #ffffff is used for the text, along with shade #005a00 and tint #1a751a colors for the different states of the button.

注意

不确定如何从基色中获取变体颜色？尝试我们的颜色生成器，它可以计算所有变化并提供复制/粘贴到应用中的代码！

¥Not sure how to get the variation colors from the base color? Try out our Color Generator that calculates all of the variations and provides code to copy/paste into an app!

有关 CSS 变量的更多信息，请参阅 CSS 变量文档。

¥See the CSS Variables documentation for more information on CSS variables.

添加颜色

¥Adding Colors

通过在 Ionic 组件上设置 color 属性或使用 CSS 进行样式设置，可以添加颜色以供整个应用使用。继续阅读以了解如何手动添加新颜色，或使用下面的新色彩创建器快速生成要复制并粘贴到应用中的新颜色代码。

¥Colors can be added for use throughout an application by setting the color property on an Ionic component, or by styling with CSS. Read on to see how to manually add a new color, or use the New Color Creator below for a quick way to generate the code of a new color to be copy and pasted into an application.

要添加新颜色，请首先为根部颜色的所有变体定义 CSS 变量。例如，要添加名为 favorite 的新颜色，我们可以定义以下变量：

¥To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called favorite, we can define the following variables:

: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;
}

然后，创建一个使用这些 CSS 变量的新类。该类必须以 .ion-color-{COLOR} 格式编写，其中 {COLOR} 是要添加的颜色的名称：

¥Then, create a new class that uses these CSS variables. The class must be written in the format .ion-color-{COLOR} where {COLOR} is the name of the color to add:

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

添加该类后，该颜色可用于任何支持 color 属性的 Ionic 组件。下面是在 Ionic 按钮上使用 favorite 颜色的示例。

¥After the class is added, the color can be used on any Ionic component that supports the color property. An example of using the favorite color on an Ionic button is below.

<ion-button color="favorite">Favorite</ion-button>

在根定义的 CSS 变量也可用于使用 CSS 来设置任何元素的样式：

¥The CSS variables defined at the root can also be used to style any element using CSS:

div {
  background: var(--ion-color-favorite);
  color: var(--ion-color-favorite-contrast);
}

有关设置和使用 CSS 变量的更多信息，请参阅 CSS 变量文档。

¥See the CSS Variables documentation for more information on setting and using CSS variables.

新色彩创建器

¥New Color Creator

通过更改名称和值创建下面的新颜色，然后将下面的代码复制并粘贴到你的项目中。

¥Create a new color below by changing the name and value, then copy and paste the code below into your project.

:root {
	--ion-color-new: #69bb7b;
	--ion-color-new-rgb: 105,187,123;
	--ion-color-new-contrast: #000000;
	--ion-color-new-contrast-rgb: 0,0,0;
	--ion-color-new-shade: #5ca56c;
	--ion-color-new-tint: #78c288;
}

.ion-color-new {
	--ion-color-base: var(--ion-color-new);
	--ion-color-base-rgb: var(--ion-color-new-rgb);
	--ion-color-contrast: var(--ion-color-new-contrast);
	--ion-color-contrast-rgb: var(--ion-color-new-contrast-rgb);
	--ion-color-shade: var(--ion-color-new-shade);
	--ion-color-tint: var(--ion-color-new-tint);
}

分层颜色​

修改颜色​

添加颜色​

新色彩创建器​

目录

分层颜色

修改颜色

添加颜色

新色彩创建器