How should I apply a custom angular material theme?

Question

I have a problem trying to setup a custom Angular Material theme. I'm trying to follow the basic example given in the docs (https://material.angular.io/guide/theming) but keep hitting an error during startup of app : "SassError: Missing argument $accent".

This appears to be trying to highlight the mat-light-theme() call, but as far as I can see I'm following the example file given in docs.

Does this look about right... (I'm hoping to be confident the theme file is right so I can start tracking down issues introduced elsewhere)?

    @import '~@angular/material/theming';
    @import 'mixins/definitions'; // just another scss file

    // Include the common styles for Angular Material. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    // Be sure that you only ever include this mixin once!
    @include mat-core();

    $my-app-primary: mat-palette($mat-indigo); 
    $my-app-accent:  mat-palette($mat-pink, A200, A100, A400);
    $my-app-warn:  mat-palette($mat-red, A200, A100, A400);

    // The warn palette is optional (defaults to red).
    //$candy-app-warn:    mat-palette($mat-red);

    // Create the theme object. A theme consists of configurations for individual
    // theming systems such as `color` or `typography`.
    //$candy-app-theme: mat-light-theme((
    $my-app-theme: mat-light-theme((
        color: (
                primary: $my-app-primary,
                accent: $my-app-accent,
                warn: $my-app-warn
        )
    ));

   @include angular-material-theme($my-app-theme);
   @include mat-core-theme($my-app-theme);
   @include mat-checkbox-theme($my-app-theme);

Some bits that may be relevant from my package.json:

"dependencies": {
...
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/material": "^9.2.4",

...
}

"devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    ...
}

Answer 1

Working example, pay attention to the 'mat-light-theme' line:

@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent:  mat-palette($mat-amber, A200, A100, A400);
$app-warn:    mat-palette($mat-red);
$app-theme:   mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);