STEP_8.md

Quick Jump

• Initial Setup
• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6
• Step 7
• Step 8 <-
• Step 9
• Step 10

Step #8 Task:

Add a dark theme and a menu with a button to toggle the theme:

File: src/theme.scss

@import '~@angular/material/_theming';

@include mat-core();

$primary: mat-palette($mat-red);
$accent: mat-palette($mat-blue);

$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

.dark-theme {
  $dark-primary: mat-palette($mat-light-blue);
  $dark-accent: mat-palette($mat-green);

  $dark-theme: mat-dark-theme($dark-primary, $dark-accent);

  @include angular-material-theme($dark-theme);
}

Notice that we have a button with [matMenuTriggerFor] attribute that points what menu to open, By setting the value menu for that attribute, we find an element with that name which happens to be <mat-menu #menu>, and by clicking the trigger element, the menu would be opened

File: src/app/app.component.html

<div fxLayout="column" fxFlex [class.dark-theme]="isDarkTheme">

  <mat-toolbar color="primary">
    <span>Angular Material</span>

    <!-- Filler that pushes the menu button to the end of the toolbar -->
    <span fxFlex></span>

    <button mat-icon-button [matMenuTriggerFor]="themeMenu">
      <mat-icon>more_vert</mat-icon>
    </button>

  </mat-toolbar>

  <mat-sidenav-container fxFlex fxLayout="row">
    ...
  </mat-sidenav-container>
  
  <mat-menu #themeMenu x-position="before">
    <button mat-menu-item (click)="isDarkTheme = !isDarkTheme">Toggle Theme</button>
  </mat-menu>
</div>

Also notice we're using mat-icon again, but this time we're passing a ligature name that will be resovled out of the Material Icons font that we imported in the styles.css, you can see the full list of icons ligatures here

Add a dark theme default value to false

File: src/app/app.component.ts

import {Component} from '@angular/core';
import {MatIconRegistry} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ...

  isDarkTheme = false;

  ...
}

---

Go to Tutorial Step 9