Recently, I've been tinkering with a service that allows me to alter the color scheme of my project in Angular Material. Following the official documentation, I managed to change the color successfully. However, I hit a roadblock when trying to revert back to the original color scheme. I understand that toggling between true and false on a div element can affect the color, but is there a way to incorporate this logic directly into the service?
As a beginner in coding, any guidance would be greatly appreciated. Thank you.
custom-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);
}
typescript-file
themeSwitch() {
this.service.switchColors('green');
}
index.html
<div (click)="themeSwitch()">
<p> test color </p>
</div>