Angular Material 3 theming system - Stack Overflow

admin管理员组

文章数量:1277301

Setting up theming for an application using the Sass APIs introduced in Angular Material v19 is different from prior versions. In Angular Material's v2 theming system, I defined my color palette, my theme, and then applied the theme to specific components, e.g.:

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$blue-grey-palette, 500);
$my-accent: mat.define-palette(mat.$amber-palette, 700, 900, 100);
$my-warn: mat.define-palette(mat.$red-palette, 700, 100, 100);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: mat.define-typography-config(),
  density: 0,
  ),
);

@include mat.tabs-color($my-theme);

If I try to apply this example to Angular Material's v3 theming system, how do I define the specific color values to be used from a given palette?

html {
  @include mat.theme((
    color: (
      theme-type: light,
        primary: mat.$blue-palette,
        tertiary: mat.$red-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}   

本文标签： Angular Material 3 theming systemStack Overflow