css - 如何修改angular material主题主色

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 .

如果您使用的是 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 !