Why does the navbar not take the theme I am trying to assign

I have a app at https://stackblitz.com/edit/etnmae-xjweyt and cannot seem to get it to compile much less assign a neutral color to the navbar. I can change it from light to dark mode, but want something other than a light pink as the background.

this is the style, an in the same folder i have my m3-style.scss. I am NOT using any Material 2 styling, strictly Material 3, so I don't need backward compatability.

enter code here

@use 'sass:map';
@use '@angular/material' as mat;
@use 'm3-theme.scss';

$typography-config: (
plain-family: 'Edu AU VIC WA NT Pre',
brand-family: 'Edu AU VIC WA NT Pre',
); !

$typography-config-secondary: (
plain-family: Roboto,
brand-family: Open Sans,
bold-weight: 900,
medium-weight: 500,
regular-weight: 300,
);

$theme: mat.define-theme(
(
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: $typography-config,
)
);

$theme-secondary: mat.define-theme(
(
color: (
primary: mat.$violet-palette,
tertiary: mat.$magenta-palette,
),
typography: $typography-config-secondary,
)
);

body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
margin: 0;
padding: 30px;
height: 100%;

@include mat.all-component-themes($theme);
@include mat.toolbar-theme($theme-secondary);
}

html {
height: 100%;
}
//THIS Is what I am trying to use for the toolbar and I have a toolbar theme above that doesn't work either
mat-toolbar {
background-color: mat-color($neutral, 900); // Adjust the shade as needed
}

@include mat.core();
@include mat.typography-hierarchy($theme); // <- notice!


Any assistance would be appreciated

Thanks

Continue reading...