CSS 获取Angular Material主题的颜色方案/调色板用于其他元素

在本文中，我们将介绍如何使用CSS获取Angular Material主题的颜色方案或调色板，并将其应用于其他元素。Angular Material是一种流行的UI组件库，提供了丰富的预定义主题和颜色方案，可以用于快速构建现代化的Web应用程序。

阅读更多：CSS 教程

了解Angular Material主题

Angular Material主题由一组颜色定义组成，可以通过CSS变量或类应用于不同的元素。这些颜色包括主要颜色、辅助颜色、警告颜色和成功颜色等。每种颜色都有多个级别，以提供不同的强调程度。

我们可以通过下面的CSS代码来获取Angular Material主题中的主要颜色和辅助颜色：

/* 获取主要颜色 */
:root {
  --primary-color: mat-color(mat-indigo); } /* 获取辅助颜色 */ :root { --accent-color: mat-color(mat-pink);
}

上述代码中，mat-color函数用于获取Angular Material主题中的颜色。这些颜色在Material Design规范中有明确定义，例如$mat-indigo表示深紫色，$mat-pink表示粉色。

应用颜色到其他元素

获取了Angular Material主题中的颜色之后，我们可以将其应用到其他元素上，以保持整个应用的一致性和协调性。

下面是一个示例，展示了如何使用获取的主要颜色和辅助颜色应用到按钮和文本上：

<button class="primary-button">主要按钮</button>
<button class="accent-button">辅助按钮</button>
<p class="primary-text">这是一个主要文本</p>
<p class="accent-text">这是一个辅助文本</p>

/* 应用主要颜色到按钮 */
.primary-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

/* 应用辅助颜色到按钮 */
.accent-button {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

/* 应用主要颜色到文本 */
.primary-text {
  color: var(--primary-color);
}

/* 应用辅助颜色到文本 */
.accent-text {
  color: var(--accent-color);
}

上述代码中，我们使用var(--主要颜色变量)和var(--辅助颜色变量)的语法将获取的颜色应用到按钮和文本的CSS样式中。通过这种方式，我们可以轻松地将Angular Material主题的颜色应用到其他元素上。

自定义颜色

除了使用预定义的主题颜色外，我们还可以自定义自己的颜色方案或调色板，以满足特定的设计需求。

下面是一个示例，展示了如何定义自定义颜色方案，并将其应用到按钮和文本上：

/* 自定义颜色方案 */
:root {
  --custom-primary-color: #FFC107;
  --custom-accent-color: #F44336;
}

/* 应用自定义颜色到按钮 */
.custom-primary-button {
  background-color: var(--custom-primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

/* 应用自定义颜色到文本 */
.custom-primary-text {
  color: var(--custom-primary-color);
}

上述代码中，我们通过定义--custom-primary-color和--custom-accent-color等自定义CSS变量来创建自定义颜色方案。然后，我们将这些自定义颜色应用到按钮和文本的CSS样式中。