在开始介绍Ionic框架中可用的实际元素之前，让我们对Ionic如何为不同元素使用颜色进行一些了解。

离子颜色分类

离子框架为我们提供了一组九种预定义的颜色类别。您可以使用这些颜色，也可以使用自己的样式覆盖它。

下表显示了Ionic提供的默认九种颜色集。在本教程中，我们将使用这些颜色来设置不同的离子元素的样式。现在，您可以检查所有颜色，如下所示-

离子颜色用法

离子对每个元素使用不同的类。例如，标题元素将具有栏类，而按钮将具有按钮类。为了简化用法，我们通过在颜色名称中添加元素类前缀来使用不同的颜色。

例如，要创建蓝色的标题，我们将使用如下的条形镇静–

   ...

同样，要创建灰色按钮，我们将使用如下所示的button-stable类。

   ...

您还可以像其他任何CSS类一样使用Ionic颜色类。现在，我们将用平衡的(绿色)和充满活力的(黄色)颜色设置两个段落的样式。

Paragraph 1...
Paragraph 2...

上面的代码将产生以下屏幕-

当我们使用不同的类创建不同的元素时，我们将在后续章节中详细讨论。

使用CSS自定义颜色

当您想使用CSS更改某些Ionic默认颜色时，可以通过编辑lib / css / ionic.css文件来实现。在某些情况下，这种方法的生产率不是很高，因为每个元素(页眉，按钮，页脚…)都使用自己的样式类。

因此，如果要将“ light”类的颜色更改为橙色，则需要搜索使用该类的所有元素并将其更改。当您要更改单个元素的颜色时，此功能很有用，但对于更改所有元素的颜色却不太实用，因为这会占用太多时间。

使用SASS自定义颜色

SASS(这是–语法很棒的样式表的缩写)提供了一种轻松更改所有元素的颜色的简便方法。如果要使用SASS，请在命令窗口中打开项目，然后键入-

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

这将为您的项目设置SASS。现在，您可以通过打开scss / ionic.app.scss文件并在此行之前键入以下代码来更改默认颜色： @import“ www / lib / ionic / scss / ionic”;

我们将平衡色更改为深蓝色，将激发色更改为橙色。我们上面使用的两个段落现在是深蓝色和橙色。

$balanced: #000066 !default;
$energized: #FFA500 !default;

现在，如果您使用以下示例-

Paragraph 1...
Paragraph 2...

上面的代码将产生以下屏幕-

所有正在使用这些类的离子元素将变为深蓝色和橙色。考虑到您不需要使用Ionic默认颜色类。您始终可以按照自己的方式设置元素的样式。

重要的提示

安装SASS后，将从index.html的标题中删除www / css / style.css文件。如果仍要使用它，则需要手动链接。打开index.html，然后在标题内添加以下代码。