如何修改angular材质主题主色

Question

我创建了一个新的 angular5 项目，在该项目上我将 angular 材料用于前端组件 (https://material.angular.io/)。到目前为止一切都很好，但主要问题是如何添加自定义主题。我没有在这个项目上使用 scss 编译器，所以我正在做的是将所有 css 组件导入到 style.css 中，如

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~app/components/test/test.component.css";

问题是我不知道如何修改预建主题的基色或为我的主题生成另一个具有其他基色的 css。 如果有人可以帮助我，我将非常感激！

Answer 1

这是关于如何定义自己的主题的非常详细的指南（但您一定要查看上面@br.julien 发布的链接。）：

注意：如果您赶时间，只需向下滚动到此答案的底部即可获取完整的源代码。

先决条件

• 如果您使用的是 CSS 文件，请将文件扩展名更改为 .scss。

• 如果您使用 Angular CLI，请在您的 styles 数组中，将 styles.css 更改为 styles.scss：

  "styles": [
      "styles.scss" // <- Change to this
  ]
  

---

开始使用

1. 在styles.scss 的顶部导入~@angular/material/theming：

   @import '~@angular/material/theming';
   

2. 之后，在styles.scss 中添加@include mat-core()，最好是在导入行之后：

   @include mat-core();
   

3. 然后，为您的应用定义一些变量（primary、accent 和可选的warn），然后将它们分配给名为mat-palette 的函数：

   // I suggest that you should use another prefix, but `my-app` is fine as well
   // Primary colour
   $my-app-primary: mat-palette($mat-indigo);
   // Accent colour
   $my-app-accent: mat-palette($mat-pink, A200, A100, A400);
   

   有关所有调色板，请访问source code (_palette.scss)。

   另外，看看Material.io guidelines 上的调色板是什么样的。

4. 接下来，为您的应用主题定义另一个变量，并将主题作为angular-material-theme 的参数包含（将其放在您上面定义的变量之后）：

   （注意：请选择以下任一选项：）

   轻主题：

   $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
   @include angular-material-theme($my-app-theme);
   

   深色主题：

   $my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent);
   @include angular-material-theme($my-app-theme);
   

5. 大功告成！

完整源代码

这里有一些完整源代码供你复制：)

styles.scss

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

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent: mat-palette($mat-pink, A200, A100, A400);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

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

（哇。只需 8 行代码即可完成所有这些工作。）

无论如何，如果你想了解更多关于 Sass 的信息，请查看官方documentation！

Answer 2

由于您刚刚将 style.css 更改为 style.scss，因此未找到 scss 文件。

您需要更改您在 angular.js 中导入的样式表：

// src/angular.json 
...
"styles": ["src/styles.scss"]
...