bug(m2-theme): Several variables missing

[angelaki]

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

20.0.6

Description

After upgrading to Angular Material 20.1, I noticed that the menus have a transparent background (no background color set). When checking the reason, I found out that the CSS variable is not applied.

I'm using a theme based on the M2 theme, and I'm not very familiar with themes. But maybe a hint what might have changed here could help me to find out the reason.

Reproduction

Since its a payed theme I cannot paste the whole code here but I could try to create a minimal repro if issue isn't obvious. M2 theming is quite customized by the author so there might probably be many reasons.

Expected Behavior

No breaking change with 20.1 (since none were listed).

Actual Behavior

E.g. all dropdows (menu, select) lost their background color. Guess there might be more if I check for undefined variables.

Environment

Angular CLI: 20.1.0
Node: 22.16.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.1.0
... animations, build, cdk, cli, common, compiler, compiler-cli
... core, forms, material, material-luxon-adapter
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version

@angular-devkit/architect 0.2001.0 (cli-only)
@angular-devkit/core 20.1.0 (cli-only)
@angular-devkit/schematics 20.1.0 (cli-only)
@schematics/angular 20.1.0 (cli-only)
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1

[motabass]

I face a simmilar issue. I used to override the background colors in my theme like this:

$dark-theme: mat.m2-define-dark-theme(
  (
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette
    ),
    typography: $custom-typography-config,
    density: -1
  )
);

$darkColor: map.get($dark-theme, color);
$backgroundDark: map.get($darkColor, background);

$backgroundDark: map.merge(
  $backgroundDark,
  (
    background: #131516,
    card: #2c373b,
    dialog: #2c373b,
    app-bar: #2c373b
  )
);

$darkColor: map.merge(
  $darkColor,
  (
    background: $backgroundDark
  )
);

$dark-theme: map.merge(
  $dark-theme,
  (
    color: $darkColor
  )
);

@include mat.all-component-themes($dark-theme);

This doesn't not work anymore since 20.1. Instead i get the default background colors for dark theme.

I already tried to debug the theme with:

@each $key, $value in $dark-theme {
  @debug $key;
  @debug $value;
}

This showed me there is an additional "background" key on the same level as "color" is, additionally to "color.background". But even if i try to also overwrite this colors of the app-bar and cards stay default.

[achapman009]

Based on the commits it looks like they removed some of the variable values for m2 and are defaulting to system values. This was a breaking change for us as well and should have been clearly documented.

[andrewseguin]

The internal structure and implementation of the theme config was never part of the public API, and in fact it has changed multiple times over the years. Customizing the internals should be considered an unsupported path that shouldn't be relied on.

I'd recommend depending on the component overrides APIs to specify token and theme changes

[motabass]

Well. I never understood why background-colors are not part of the public API but i understand breaking this is not considered an API-Change because it always has been private.

It seems there is no workaround anymore except migrating to M3 altogether...which is not so easy for our project

[andrewseguin]

If you want to continue with another solution that is at risk of changing anytime - you can continue to change the values in the theme config. There's a top-level map _mat-system that is used for the M2 component theme styles instead of the background/foreground colors

[motabass]

Thank you very much for this tipp. This at least enables us to update for now until we are able to migrate to M3 which has a much nicer theming API

[hasokeric]

Let me know what your solution was @motabass

[jwrascoe]

@hasokeric Yes... I too would like to see as I have this problem as well.

@motabass Could you share more details about your solution?

[andrewseguin]

I'm guessing its something like this:

$theme: map.merge(
  $theme,
  _mat-system,
  (
    primary: blue
    surface: black
  )
);

The keys are based on https://github.com/angular/components/blob/main/src/material/core/tokens/m2/_md-sys-color.scss

Again - this is risky, unsupported, and may break in any future update. Our internal theme config structure is not part of the public API but we do get that M2 apps want this sort of customization.

I would strongly recommend considering an update to M3 which has a much easier system for overriding like this

[motabass]

I'm guessing its something like this:

$theme: map.merge(
  $theme,
  _mat-system,
  (
    primary: blue
    surface: black
  )
);

The keys are based on https://github.com/angular/components/blob/main/src/material/core/tokens/m2/_md-sys-color.scss

Again - this is risky, unsupported, and may break in any future update. Our internal theme config structure is not part of the public API but we do get that M2 apps want this sort of customization.

I would strongly recommend considering an update to M3 which has a much easier system for overriding like this

That is exactly what i did now:

$dark-theme: mat.m2-define-dark-theme(
  (
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette
    ),
    typography: $custom-typography-config,
    density: -1
  )
);

$dark-theme: map.merge(
  $dark-theme,
  (
    _mat-system: map.merge(
        map.get($dark-theme, _mat-system),
        (
          background: #131516,
          surface: #2c373b,
          surface-variant: rgb(52, 63, 67),
          inverse-on-surface: rgba(255, 255, 255, 0.87)
        )
      )
  )
);

@include mat.all-component-themes($dark-theme);

and also did this get the desired app-bar color in my light theme:

.light-theme {
  --mat-toolbar-container-background-color: mat.m2-get-color-from-palette($primary-palette, 500);
}

[andrewseguin]

Would it make more sense to simplify that last part:

.light-theme {
  @include mat.toolbar-overrides((
    container-background-color: map.get($primary-palette, 500)
  ));
}

This gives you token-validation and reduces the need to call bespoke m2 APIs just to get a value from the palette

[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.}