Angular 6 主题：如何设置背景颜色并在整个应用程序中使用答案

【问题标题】：Angular 6 theming : How do i set background color and use in entire appAngular 6 主题：如何设置背景颜色并在整个应用程序中使用
【发布时间】：2019-04-30 15:20:24
【问题描述】：

我有 theme.scss 文件，我在其中设置了如下颜色：

/* mat-palette accepts $palette-name, main, lighter and darker variants */

@import '~@angular/material/theming';
@include mat-core();

$gims-app-primary: mat-palette($mat-blue,500,900,A100);
$gims-app-accent:  mat-palette($mat-yellow, 500, A200, A100);
$gims-app-warn:    mat-palette($mat-red,500,900,A100);

$gims-app-theme: mat-light-theme($gims-app-primary, $gims-app-accent, $gims-app-warn);

@include angular-material-theme($gims-app-theme);

我需要在这里声明一个背景颜色并在整个应用程序中使用它。由于我将实现明暗主题，因此背景颜色应该是可配置的。知道如何实现吗？

【问题讨论】：

标签： css angular sass angular-material themes

【解决方案1】：

除了主要、重音和警告调色板外，材质主题还具有前景和背景调色板（如 documentation 中所述）。不过，官方文档中没有示例。

Github 上有一个关于添加这些文档的讨论，我认为下面的 comment 也有一个 stackblitz 示例的链接，可能会对您有所帮助。

另一种定义颜色并在整个应用程序中通过引用使用它的方法是使用 CSS 变量，如 here 所述。在这种情况下，您可以在 styles.css 文件中包含变量，使用 :root 选择器：

:root {
  --blue-1: #0055AA;
}

【讨论】：