CODEWITHSUNDEEP
cssangulartypescriptangular-material2
Cacoon
Cacoon

Reputation: 2538

mat-menu theme color not changing

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

enter image description here

And here is the dark theme chosen, but the dark theme not called at the start of styles.scss:

enter image description here

Upvotes: 1

Views: 2974

Answers (1)

Edric
Edric

Reputation: 26710

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();
}

Upvotes: 6

Related Questions