I’m using angular material themes with a default light theme applied and then a dark theme applied if the class .dark-theme is on an element. I’m running into an issue though where angular material components being used don’t inherit this class from parent elements.

Here’s a sample component showing the issue:

<div class="dark-theme">
    <h2>Hello world</h2>
    <div class="menu-button">
        <button
            color="accent"
            mat-icon-button
            [matMenuTriggerFor]="menu"
            aria-label="Dropdown menu of available pages"
        >
            <mat-icon>menu</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <button (click)="log('home clicked')" mat-menu-item>Home</button>
        </mat-menu>
    </div>
</div>

I’m expecting the code above to give the mat-menu component the dark-theme class. If I apply the class directly <mat-menu class="dark-theme" #menu="matMenu"> it works as expected and I see the menu in a dark theme. Furthermore, I tried just giving up and doing that but dynamically assigning the class in my actual component using a BehaviorSubject and service doing [class.dark-theme]="stateService.isDarkModeEnabled()" but this still fails to apply the dark-theme class when the dark mode variable is enabled.