跳至主要内容
版本：v8

颜色

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

可以使用 `color` 属性将颜色应用于 Ionic 组件，以更改默认颜色。请注意，在下面的按钮中，文本和背景根据设置的 `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 格式` 相同，只是颜色不同。 rgb 格式。有关为什么还需要 `rgb` 属性的解释，请参阅 Alpha 问题。从下面的下拉菜单中选择以查看 Ionic 提供的所有默认颜色及其变体。

名称属性默认值描述

修改颜色​

要更改颜色的默认值，应设置该颜色所有列出的变体。例如，要将辅助颜色更改为 #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 颜色用于按钮的不同状态。

注意

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

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

添加颜色​

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

要添加新颜色，首先在根目录中定义该颜色所有变体的 CSS 变量。例如，要添加一个名为 `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;
}

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

.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 按钮的示例。

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

在根目录中定义的 CSS 变量也可以用来使用 CSS 对任何元素进行样式设置

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

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

新颜色创建器​

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

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

内容

编辑此页面