bug(angular material): css variables get lost when using multiple themes in angular material

[VILLAN3LL3]

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

using light and dark theme leads to lost styles and css variables

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-ajqpjxrh?file=src%2Fmain.ts
Steps to reproduce:

1. press "change theme".
2. check the stylings (tool tip submit button + click on menu button + styling of mat card header, ...)

Expected Behavior

everything is styled properly in light or dark mode

Actual Behavior

some styles don't seem to be set correctly. See for example the menu overlay or the submit button tooltip. It seems that css variables have been lost, for example --mat-menu-container-shape.

Environment

• Angular: ^18.2
• CDK/Material: ^18.2
• Browser(s): n/a
• Operating System (e.g. Windows, macOS, Ubuntu): n/a

[shhdharmen]

I don't think it's an issue, it's how you're applying theme to app-root. You need specifically give background to app-root when changing theme. For example, in your index.html file, you can add class mat-app-background with app-root. Plus app-root should be set to display: block.

[VILLAN3LL3]

Thanks for your quick reply. Your suggestions would fix the card header, but not the overlay issue
https://stackblitz.com/edit/stackblitz-starters-m7wtyfyu?file=src%2Findex.html

[shhdharmen]

It's because overlays are added in body, not in app-root. For example if you add @include mat.all-component-colors($light-theme); after @include mat.all-component-typographies($base-theme);, you will see light-themed tooltip always.

I would suggest to move theming from app-root to body or html.