Question

我有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);

我需要在此处声明背景色，然后在整个应用中使用它。由于我将实现浅色和深色主题，因此背景色应该是可配置的。知道如何实现吗？

Answer 1

除了主要，强调和警告调色板外，素材主题还具有前景和背景调色板（如documentation所述）。不过，官方文档上没有任何示例。

关于Github的有关添加这些文档的讨论，我认为下面的comment（也有指向stackblitz示例的链接）可能会帮助您。

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

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

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

1 个答案: