CODEWITHSUNDEEP
angularangular-materialmaterial-designmaterial3
velval
velval

Reputation: 3312

Angular Material 3 theme not including all styles like elevation or color

I have been playing with the new Angular Material 3 design styles from the latest Angular 18.0.0 version as of today. Have tried to follow the documentation here. Below is what I have done so far.

@use '@angular/material' as mat;
@include mat.core();
@include mat.all-component-typographies();

$m3-light-theme: mat.define-theme();

:root {
    @include mat.all-component-themes($m3-light-theme);
}

Most of styles seem to apply. However, this seems to be missing styles like "mat-elevation" and the color attribute on components does not seem to have effect.

If I however create an Material 2 theme like below and add it to my stylesheet then elevation and colors worked.

$app-theme:     mat.m2-define-light-theme((
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    )
   ));

:root {
    @include mat.all-component-themes($app-theme-custom-foreground);
    @include mat.all-component-themes($m3-light-theme);
}

The question is should we include both Material 2 and 3 themes? From the documentation it seems you should only apply the theme you want but the Material 3 way doesn't seem to include everything.

Upvotes: 4

Views: 4350

Answers (3)

Marcelo Moura Gonçalves
Marcelo Moura Gonçalves

Reputation: 1

When you create a customized m3 color theme, the following information comes in the generated code:

// Comment out the line below if you want to use the deprecated color entries. @include mat.color-variants-backwards-compatibility($theme);

If you uncomment it will work. But if 'color' entries are obsolete, what would be the correct way?

Upvotes: 0

Lucas Tesseron
Lucas Tesseron

Reputation: 434

As mentioned, the Example sections of the component documentation have not yet been updated to reflect the M3 changes.

You can find information on how to style your components in the Guides section. In particular, see this paragraph in the theming guide on how to use component color variants.

Here is an example of how to get a primary button, secondary button, and tertiary button, each with a color palette inferred from your theme file.

This can be done after including your M3 theme (using this schematic, for example).

ng generate @angular/material:m3-theme

@use '@angular/material'as mat;
@import 'material-theming';

html {
  // Emit theme-dependent styles for common features used across multiple components.
  @include mat.core-theme($theme);

  // Sass mixins that includes styles for all components in the Mat library
  // (this can lead in unused CSS)
  @include mat.all-component-themes($theme);
}

// Apply primary color variants for button components
.primary-button {
  @include mat.button-color($theme, $color-variant: primary);
}

// Apply secondary color variants for button components
.secondary-button {
  @include mat.button-color($theme, $color-variant: secondary);
}

// Apply tertiary color variants for button components
.tertiary-button {
  @include mat.button-color($theme, $color-variant: tertiary);
}

<button class="primary-button" mat-button>
  primary
</button>
<button class="secondary-button" mat-button>
  secondary
</button>
<button class="tertiary-button" mat-button>
  tertiary
</button>

Here is the relevant part for elevation customization.

Upvotes: 5

vassilis ntovantzis
vassilis ntovantzis

Reputation: 352

You need to include the below, in order to use previous color variant but it's not the same.

:root {
    @include mat.all-component-themes($m3-light-theme);
    @include mat.color-variants-backwards-compatibility($m3-light-theme);
}

Generally the idea is that you need to use classes (mat-primary, mat-accent, mat-warn).

Document needs an update without the color variant because it is misleading. (https://material.angular.io/components/button/overview)

I will update if find another way. But I think this is the way.

Also this is helpful

https://medium.com/@raultonello18/angular-material-m3-dynamic-runtime-colors-6d6d1036d2bb

Upvotes: 1

Related Questions