如何修改棱角材质主题主色

Question

我创建了一个新的angular5项目，在该项目上，我将angular material用于前端组件(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。

如果使用角度CLI，请在styles数组中将styles.css更改为styles.scss:

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

>

在样式的顶部导入~@Angular/Material/Theming.scss:

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

之后，在styles.scss中添加@include mat-core()，理想情况下是在导入行之后：

@include mat-core();

然后，为应用程序定义一些变量(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);

对于所有调色板，请访问源代码(_palette.scss)。

此外，请参阅Material.io指南中的调色板。

接下来，为应用程序的主题定义另一个变量，并将主题包含为Angulator-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);

你完蛋了！

这里有一些完整的源代码供您复制：）

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的知识，请查看官方文档！