I have followed the guide on how to theme your own components, but I cant get that to work.

For this question I have two inquiries:

1. How to get to work the mixins example
2. Shouldn’t it be sufficient to add the property color to modify the background? Then why do I need to do all this?

custom_theme.scss

@use '@angular/material' as mat;
//@use 'palettes/ucsd-theme' as ucsd_theme;

$theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$blue-palette, // ucsd_theme.$light-theme-palette,
    tertiary: mat.$green-palette
  )
));

@include mat.core();
// @include mat.color-variants-backwards-compatibility($theme);

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

_app.component-theme.scss

@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($theme) {
  app-navbar {
    color: mat.get-theme-color($theme, primary);
  }
  mat-toolbar {
    background: mat.get-theme-color($theme, primary-container);
  }
}

@mixin theme($theme) {
  @if mat.theme-has($theme, color) {
    @include color($theme);
  }

  @if mat.theme-has($theme, typography) {
    @include typography($theme);
  }
}

<main>
  <mat-toolbar role="heading"> <!-- color = "primary" -->
    <button mat-icon-button aria-label="Menu icon" color="secondary">
      <mat-icon>menu</mat-icon>
    </button>
    <span>Title</span>
    <span class="spacer"></span>
  </mat-toolbar>
</main>

Style is mentioned in .ts file:

styleUrls: [
    './app.component.css',
    './_app.component-theme.scss'
  ]

The output is more or less like this

The output I would like is like this

This last was achieved by this answer. Code below

Edition of custom_theme.scss and deletion of separate file

@mixin theme($theme) {
  app-navbar {
    color: mat.get-theme-color($theme, primary);
  }
  mat-toolbar {
    background: mat.get-theme-color($theme, primary-container);
  }
}

@include mat.core();

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