时间戳

首页 > 解决方案 > 如何有效地使用 Angular Material 自定义调色板颜色 Angular Material

angular - 如何有效地使用 Angular Material 自定义调色板颜色 Angular Material

问题描述

我正在使用自定义材料调色板。使用其默认阴影、深色阴影、浅色阴影定义了主要和重音调色板，如下所示：

  $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent:  mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn:    mat-palette($md-warn);

/*finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function,*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
/* and finally include the result of calling the angular-material-theme function with our $my-app-theme.*/
@include angular-material-theme($my-app-theme);

问题：

1. 如果我在代码中使用color="primary"或color="accent"设置default颜色阴影，问题是，如何使用我们在主题初始设置中使用的lighter和- 阴影。darker

2.如何使用调色板中的任何其他色调作为primary或accent色调。

标签： angularangular-material2color-palette

解决方案

检查我在下面编写的代码。检查注释行的用法

主题.scss

  $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
  $my-app-accent:  mat-palette($md-lightaccent, 500,900,A100);
  $my-app-warn:    mat-palette($md-warn);

  $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives light theme
  $my-app-dark-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives dark version of the above theme

  //apply this class to any element you want to apply dark theme or set class to <body> so apply it to whole site
  .dark-theme { 
      @include angular-material-theme($my-app-dark-theme);
  }
  @include angular-material-theme($my-app-theme); //default theme

推荐阅读