Skip to main content

颜色

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

每种颜色都包含以下属性：base、contrast、shade 和 tint。 base 和 contrast 颜色还需要一个 rgb 属性，该属性是相同的颜色，只是以 rgb格式表示。有关为什么还需要 rgb 属性的解释，请参阅 The Alpha Problem。从下拉菜单中选择以查看 Ionic 提供的所有默认颜色及其变化。

NamePropertyDefault ValueDescription

修改颜色​

🌐 Modifying Colors

要更改颜色的默认值，必须设置该颜色的所有列出变体。例如，要将辅助颜色更改为 #006600，请设置以下 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 应用于按钮时，不仅使用了基础颜色 #006600 ，还使用了对比色 #ffffff 作为文本颜色，同时按钮的不同状态还使用了阴影色 #005a00 和色调 #1a751a 。

note

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

有关 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 组件。下面是将 favorite 颜色用于 Ionic 按钮的示例。

🌐 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);
}

目录