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

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.

• 如果您在styles阵列中使用Angular CLI,请更改styles.css为styles.scss:

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

开始吧

1. 导入~@angular/material/theming到您的顶部styles.scss:

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

2. 在此之后,添加@include mat-core()的styles.scss,进口行之后理想:

   @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);
   

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

   另外,请查看Material.io指南中的调色板外观.

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的信息,请查看官方文档!