Angular material theme service

Question

I use a service that allows me to change the color, following the official doc on angular material, but I have a problem because my color changes well but I can't get it to change back to the way it was before, I know that you have to play on the true or false on a div to change the color but can we put this logic in the service?

I am a beginner.

thanks.

css

.defaultTheme {
 --background: red;
}

.green {
 --background: green;
}

service

currentTheme: string = 'defaultTheme';

constructor() {
this.switchColors(this.currentTheme);
}

switchColors(newColor:string) {
 document.body.classList.remove(this.currentTheme);
 this.currentTheme = newColor;
 document.body.classList.add(this.currentTheme);
}

ts.file

themeSwitch() {
 this.service.switchColors('green');
}

html

<div (click)="themeSwitch()">
 <p> test color </p>
</div>

Answer 1

i think you should use the toggle button or radio button to handle this but now try this:

switchColors(newColor:string) {
 let temp = this.currentTheme == 'defaultTheme' | newColor : 'defaultTheme';
 document.body.classList.remove(this.currentTheme);
 this.currentTheme = temp;
 document.body.classList.add(this.currentTheme);
}