Prerequsites

Question

我创建了一个新的angular5项目，我在其上使用角度材质作为前端组件（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上面发布的链接。）：

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

Prerequsites

如果您使用的是CSS文件，请将文件扩展名更改为.scss。
如果您正在使用Angular CLI，请在styles数组中将styles.css更改为styles.scss：
```
"styles": [
    "styles.scss" // <- Change to this
]
```

开始使用

导入~@angular/material/theming顶部的styles.scss：
```
@import '~@angular/material/theming`;
```
之后，在@include mat-core()中添加styles.scss，理想情况是在导入行之后：
```
@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);
```
对于所有调色板，请访问source code (_palette.scss）。

另外，请查看Material.io guidelines上的调色板样式。
接下来，为您应用的主题定义另一个变量，并将主题作为参数包含在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);
```
你已经完成了！

完整源代码

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

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"]
...

如何修改角度材质主题的主色

2 个答案:

Prerequsites

开始使用

完整源代码