Angular Material Theme Course Cheat Sheet

angular-material-theme-cheatsheet.md

Angular Material Theming Cheatsheet

Create a theme for a component.

1. Create a new file for theming the component at the same level as the component itself. Call it "{{componentName}}.scss-theme.scss" (From now on called the theme file)
2. Inside the theme file import material theming utils with @use '~@angular/material/theming' as material;
3. Then create a mixing with the name of the component and make it receive a parameter of $theme in order to provide for the theme. @mixin app-banner-theme($theme) {...}.
4. Inside that mixing, add all the neccesary styling for the component. You can access the theme colors like this:

   $theme-colors: material.mat-get-color-config($theme);
   $success-color: map-get($theme-colors, success);
   $background-color: material.mat-color($success-color, lighter);

5. Go to the style.scss file and import the theme file with @use, for example: @use './app/banner/banner.component.scss-theme.scss' as banner;
6. Then we can configure it with our theme like this: @include banner.app-banner-theme($workshop-theme); where workshop-theme is the name of our custom theme

Apply some styling to a component.

1. Inside the theme file, we can set styles for different classes. Here is important to avoid generic names because this styles are global, so the recomendation is to prefix the classes with the component name.

   &.app-banner-warn {
       background-color: material.mat-color($warn-color-palette, lighter);
   }

2. We can now apply some logic to the component to add classes dynamically:

   Given this code inside the component:

   @Input()
   type: 'success' | 'info' | 'warn' | 'none' = 'none';
   
   @HostBinding('class')
   get hostClass() {
       if (this.type !== 'none') {
       return `app-banner-${this.type}`;
       }
   }

   We can now have an attribute called "type" and depending on the value it adds a class "app-banner-{{type}}"

mat-typography

In order to have our custom typography we can use the method mat-typography-config which is included on material/theming to override whatever property we need:

$workshop-typography: material.mat-typography-config(
    $font-family: "'Open Sans', sans-serif;",
    $display-4: material.mat-typography-level(95px, 95px, 300, $letter-spacing: -0.05em)
);

Then we can implement it in the theme as an argument of mat-core:

@include material.mat-core($workshop-typography);

or as another property in the theme (I prefer this way)

$workshop-theme: material.mat-light-theme(
    (
        color: (
            primary: $workshop-primary,
            accent: $workshop-accent
        ),
        typography: $workshop-typography
    )
);

Dark theme

In order to have a dark theme, we can configure it using: mat-dark-theme. The thing is that some components (as App Component) doesn't reflect the change.

So, to solve that, we must style the app component as we style any component.

1. Create a theme file (in this case, called app.components.scss.theme.scss)
2. In the theme file, import Angular Material using @use '~@angular/material/theming' as material;
3. Create a mixing for the component like:

  @mixin app-root-theme($theme) {
    $theme-colors: material.mat-get-color-config($theme);
    $backgrounds: map-get($theme-colors, background);

    app-root {
        .content {
            background-color: material.mat-color($backgrounds, background);
        }
    }
  }

4. Finally, add the component theme in the styles.scss file like this

@use './app/app.component.scss-theme.scss' as root;
...
@include root.app-root-theme($workshop-theme);