What is a theme in Angular Material and how do you apply one to your app?

A theme defines the colors, typography, and density used across every Angular Material component in your app. You either use one of the prebuilt themes that ship with Angular Material, or define your own custom theme using Sass, then include it once in your project's global styles file.

// styles.scss
@use '@angular/material' as mat;

$my-theme: mat.define-theme();

html {
  @include mat.all-component-themes($my-theme);
}