Theme colors Material Design vs Angular Material

2
votes

If I refer to Material Design guidelines about Colors, they define :

  1. Primary
  2. Primary Variant
  3. Secondary
  4. Secondary Variant
  5. Background
  6. Surface
  7. Error

Angular material define

  1. Primary
  2. Secondary
  3. Warn

In addition the contrast color in angular is the equivalent of the On* in MDC.

1> In Angular Material background and surface are set to white or black depending of the theme builder function. No access for custom.

[edit] (thanks @G. Tranter): Custom background color here

2> In Angular Material, I can define lighter and darker variant of each of the 3 colors, but I do not have control of where those variants are used ! (unless I manually overwrite each mat-* class...)

I am able to build my theme with two colors (primary and accent). But I don't get the point to define variants if I cannot assign the variants to specific UI elements.

[edit] (thanks @G. Tranter): In Angular Material the use of variants is defined by the component itself.

If I refer to Material design examples (same page linked above) I cannot reproduce the theme with primary, primary variant and secondary for example...

did I miss something ? or does someone can enlighten me about this 2 major restrictions in theming ?

[edit] (thanks @G. Tranter): In Angular Material we can define a second theme (with Primary and Accent colors) that will be applied to a specific CSS class

.item-second-theme {
  @include angular-material-theme($second-theme);
}
1
angular-materialmaterial-design

1 Answers

1
votes

Neither is actually a restriction (at least completely).

You can customize the foreground and background by modifying the theme before you apply it to your application and to Angular Material. See this post. However, it is probably not a great idea from a Material Design point of view to use background and foreground palettes that don't follow the guidelines, so there's usually no reason to not use the default ones in Angular Material.

You can't control how Angular Material components use the variants - that is part of the design of the components themselves. But you can control what those variants are when you create your palettes. For example:

$primary-palette: mat-palette($mat-blue, 500, 100, 700); // default

or

$primary-palette: mat-palette($mat-blue, 700, 300, 900); // darker

And of course you have complete control within your own components as to how shades are used.