mat-menu theme color not changing - css

Question

I have got my themes all working perfectly, but for some reason my mat-menu will only get themed on whatever default is called and not otherwise.
So for its theme to not be broken I have to call
#include angular-material-theme($dark-theme);
right at the top of my styles.scss and then have my custom classes that I set, which my light is loaded by default as shown here:
import {OverlayContainer} from "#angular/cdk/overlay";
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit, AfterViewInit {
title:string = "Callum.Tech";
themeClass: string = "light-theme";
overlay;
constructor(
private overlayContainer: OverlayContainer
) {
this.overlay = overlayContainer;
}
setDarkTheme(): void {
this.themeClass = "dark-theme";
}
setLightTheme(): void {
this.themeClass = "light-theme";
}
ngOnInit() {
this.overlay.themeClass = this.themeClass;
}
}
Everything else will re-theme and work fine without calling the start include I mentioned but mat-menu will throw a fit and only use the first theme its fed on the site launching, and doesnt change with the rest of the theme.
Here is what it looks like with the dark theme called at the start of styles.scss and the light theme loaded like normal
And here is the dark theme chosen, but the dark theme not called at the start of styles.scss:

Answer 1

In the breaking changes for 2.0.0-beta.11:
overlay: Now that the Overlay is part of the cdk rather than Angular Material directly, the themeClass property has been removed. To add a class to the overlay for theming, you can do
overlayContainer.getContainerElement().classList.add('my-theme-class');
So, you can change your code as follows:
constructor(
private overlayContainer: OverlayContainer
) {
this.overlay = overlayContainer.getContainerElement();
}
toggleTheme(): void {
if (this.overlay.classList.contains("dark-theme") {
this.overlay.classList.remove("dark-theme");
this.overlay.classList.add("light-theme");
} else if (this.overlay.classList.contains("light-theme") {
this.overlay.classList.remove("light-theme");
this.overlay.classList.add("dark-theme");
} else {
this.overlay.classList.add("light-theme");
}
}
ngOnInit() {
this.toggleTheme();
}