bug(MatMenu): M3 Theme --mat-menu-container-color is not defined

[godind]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

After generating M3 theme with ng generate @angular/material:m3-theme and doing the basic project setup. Menu components have transparent background colour.

Reproduction

StackBlitz link: Can't make StackBlitz work with Angular 18...

Theme configuration

styles.scss

// Material 3 styles file.
// Proceed with caution if making changes to this file.

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

@include mat.core();

// Import the Material Design typography and color palettes
@import './themes/base-m3-theme.scss';


:root {
 // Apply all component css dark theme by default
 @include mat.all-component-themes($dark-theme);
 @include mat.system-level-colors($dark-theme);
 @include mat.system-level-typography($dark-theme);
 @include mat.typography-hierarchy($dark-theme);
}

html,
body,
app-root {
 height: 100%;
}

body {
 margin: 0;
 touch-action: none;
}

app-root {
 display: flex;
 flex-direction: column;
 align-items: stretch;
}

base-m3-theme.scss

// Material 3 styles file.
// Proceed with caution if making changes to this file.

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

// Note: Color palettes are generated from primary: #347EFF, secondary: #bfc6dc, tertiary: #D0A600, neutral: #76777d
$_palettes: (
 primary: (
 0: #000000,
 10: #001944,
 20: #002d6d,
 25: #003783,
 30: #00429a,
 35: #004db1,
 40: #0058c9,
 50: #1e71f1,
 60: #548dff,
 70: #84aaff,
 80: #afc6ff,
 90: #d9e2ff,
 95: #edf0ff,
 98: #faf8ff,
 99: #fefbff,
 100: #ffffff,
 ),
 secondary: (
 0: #000000,
 10: #001a42,
 20: #002e6b,
 25: #003880,
 30: #13448f,
 35: #24509b,
 40: #335ca8,
 50: #4e76c3,
 60: #6990df,
 70: #84aafc,
 80: #aec6ff,
 90: #d8e2ff,
 95: #edf0ff,
 98: #faf9ff,
 99: #fefbff,
 100: #ffffff,
 ),
 tertiary: (
 0: #000000,
 10: #241a00,
 20: #3d2f00,
 25: #4a3900,
 30: #584400,
 35: #665000,
 40: #745b00,
 50: #927300,
 60: #b08c00,
 70: #d0a600,
 80: #eec12c,
 90: #ffe08b,
 95: #ffefcd,
 98: #fff8f1,
 99: #fffbff,
 100: #ffffff,
 ),
 neutral: (
 0: #000000,
 10: #001a40,
 20: #002f68,
 25: #00397c,
 30: #0b458e,
 35: #1f519b,
 40: #2f5da8,
 50: #4b76c2,
 60: #6690de,
 70: #81abfb,
 80: #acc7ff,
 90: #d7e2ff,
 95: #edf0ff,
 98: #f9f9ff,
 99: #fefbff,
 100: #ffffff,
 ),
 neutral-variant: (
 0: #000000,
 10: #191b23,
 20: #2e3038,
 25: #393b43,
 30: #44464f,
 35: #50525a,
 40: #5c5e67,
 50: #757780,
 60: #8f9099,
 70: #a9abb4,
 80: #c5c6d0,
 90: #e1e2ec,
 95: #eff0fa,
 98: #faf8ff,
 99: #fefbff,
 100: #ffffff,
 ),
 error: (
 0: #000000,
 10: #410002,
 20: #690005,
 25: #7e0007,
 30: #93000a,
 35: #a80710,
 40: #ba1a1a,
 50: #de3730,
 60: #ff5449,
 70: #ff897d,
 80: #ffb4ab,
 90: #ffdad6,
 95: #ffedea,
 98: #fff8f7,
 99: #fffbff,
 100: #ffffff,
 ),
);

$_rest: (
 secondary: map.get($_palettes, secondary),
 neutral: map.get($_palettes, neutral),
 neutral-variant: map.get($_palettes, neutral-variant),
 error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

// Define the theme object.
$light-theme: mat.define-theme((
 color: (
 theme-type: light,
 primary: $_primary,
 tertiary: $_tertiary,
 use-system-variables: true,
 ),
 typography: (
 use-system-variables: true,
 ),
 density: (
 scale: 0,
 ),
));

$dark-theme: mat.define-theme((
 color: (
 theme-type: dark,
 primary: $_primary,
 tertiary: $_tertiary,
 use-system-variables: true,
 ),
 typography: (
 use-system-variables: true,
 ),
 density: (
 scale: 0,
 ),
));

Expected Behavior

The menu background should use material built-in menu colours.

Actual Behavior

Transparent menu background.

Environment

 _ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 18.0.4
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 18.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1800.4
@angular-devkit/build-angular 18.0.4
@angular-devkit/core 18.0.4
@angular-devkit/schematics 18.0.4
@angular/cli 18.0.4
@schematics/angular 18.0.4
ng-packagr 18.0.0
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.4

• CDK/Material: "@angular/cdk": "^18.0.3", "@angular/material": "^18.0.3"
• Browser(s): Chrome and Safari latest
• Operating System: macOS Sonoma 14.5

[crisbeto]

It looks like the neutral palette is incomplete which was fixed in version 18.0.3 by #29231. I just tried it against a new project and it worked properly. Can you double-check that you're using @angular/material at 18.0.3 or above? You may have to clear your node_modules and install from scratch. For reference, here's the theme I got when I generated it from the same colors (note the neutral palette specifically):

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

// Note: Color palettes are generated from primary: #347EFF, secondary: #bfc6dc, tertiary: #D0A600, neutral: #76777d
$_palettes: (
 primary: (
 0: #000000,
 10: #001944,
 20: #002d6d,
 25: #003783,
 30: #00429a,
 35: #004db1,
 40: #0058c9,
 50: #1e71f1,
 60: #548dff,
 70: #84aaff,
 80: #afc6ff,
 90: #d9e2ff,
 95: #edf0ff,
 98: #faf8ff,
 99: #fefbff,
 100: #ffffff,
 ),
 secondary: (
 0: #000000,
 10: #001a42,
 20: #002e6b,
 25: #003880,
 30: #13448f,
 35: #24509b,
 40: #335ca8,
 50: #4e76c3,
 60: #6990df,
 70: #84aafc,
 80: #aec6ff,
 90: #d8e2ff,
 95: #edf0ff,
 98: #faf9ff,
 99: #fefbff,
 100: #ffffff,
 ),
 tertiary: (
 0: #000000,
 10: #241a00,
 20: #3d2f00,
 25: #4a3900,
 30: #584400,
 35: #665000,
 40: #745b00,
 50: #927300,
 60: #b08c00,
 70: #d0a600,
 80: #eec12c,
 90: #ffe08b,
 95: #ffefcd,
 98: #fff8f1,
 99: #fffbff,
 100: #ffffff,
 ),
 neutral: (
 0: #000000,
 4: #000a1a,
 6: #001026,
 10: #001a40,
 12: #001e48,
 17: #00295c,
 20: #002f68,
 22: #003370,
 24: #003778,
 25: #00397c,
 30: #0b458e,
 35: #1f519b,
 40: #2f5da8,
 50: #4b76c2,
 60: #6690de,
 70: #81abfb,
 80: #acc7ff,
 87: #cadaff,
 90: #d7e2ff,
 92: #e0e8ff,
 94: #e9edff,
 95: #edf0ff,
 96: #f1f3ff,
 98: #f9f9ff,
 99: #fefbff,
 100: #ffffff,
 ),
 neutral-variant: (
 0: #000000,
 10: #191b23,
 20: #2e3038,
 25: #393b43,
 30: #44464f,
 35: #50525a,
 40: #5c5e67,
 50: #757780,
 60: #8f9099,
 70: #a9abb4,
 80: #c5c6d0,
 90: #e1e2ec,
 95: #eff0fa,
 98: #faf8ff,
 99: #fefbff,
 100: #ffffff,
 ),
 error: (
 0: #000000,
 10: #410002,
 20: #690005,
 25: #7e0007,
 30: #93000a,
 35: #a80710,
 40: #ba1a1a,
 50: #de3730,
 60: #ff5449,
 70: #ff897d,
 80: #ffb4ab,
 90: #ffdad6,
 95: #ffedea,
 98: #fff8f7,
 99: #fffbff,
 100: #ffffff,
 ),
);

$_rest: (
 secondary: map.get($_palettes, secondary),
 neutral: map.get($_palettes, neutral),
 neutral-variant: map.get($_palettes, neutral-variant),
 error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
 color: (
 theme-type: light,
 primary: $_primary,
 tertiary: $_tertiary,
 ),
));

[godind]

Hi,

I had generated the theme with 18.0.2 and did upgrade to with 18.0.3. Rerunning theme generation did not fix it but your recommendation to clear node_modules and reinstalling did fix it.

Thank you!

[e-oz]

This bug is easy to reproduce if you answer "yes" to the question Do you want to use system-level variables in the theme? and forget to add

@include mat.system-level-colors($light-theme);

[godind]

@e-oz material 8.0.4 fixed it for me. You have to delete nodes_modules and npm i and rebuild to fix it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}