I have a app at 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

I have a app at https://stackblitz/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

• angular
• sass
• angular-material
• angular-material-theming
• angular19

1 Answer 1

I notice that you are not using the custom theme you created, so I modified the code to use the custom theme.

@use "m3-theme.scss" as custom-theme;
...

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

To configure the customization, please follow the below steps, angular material got new upgrades on version 19 and it makes theming 100 times easier.

1. First visit the documentation page, for you it's mat toolbar - documentation then visit the styling tab.

2. Here at the bottom you will find Tokens supported by toolbar-overrides which contains the tokens for customization of the toolbar. Since we are customizing the background color, we choose container-background-color.

3. Now we have the token name, we can refer the new Theming guide using component tokens then add the mat.<<feature name>>-overrides( method to add the custom styles. To get the theme color I use the mat.get-theme-color and configure the token with this obtained property.

    mat-toolbar {
      @include mat.toolbar-overrides(
        (
          container-background-color:
            mat.get-theme-color($theme-secondary, neutral, 96),
        )
      );
    }
   

After this your have customized your navbar based on a overridden theme.

Full Code:

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

$typography-config: (
  // <- notice!
  plain-family: "Edu AU VIC WA NT Pre",
  // <- notice!
  brand-family: "Edu AU VIC WA NT Pre",
  // <- notice!
); // <- notice!

$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.$magenta-palette,
      tertiary: mat.$violet-palette,
    ),
    typography: $typography-config,
  )
);

$theme-secondary: mat.define-theme(
  (
    color: (
      primary: custom-theme.$primary-palette,
      tertiary: custom-theme.$tertiary-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%;
}

mat-toolbar {
  @include mat.toolbar-overrides(
    (
      container-background-color:
        mat.get-theme-color($theme-secondary, neutral, 96),
    )
  );
}

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

Stackblitz Demo