I have a custom-built application with Angular 8 where users can switch between two unique themes in the user interface. I have a specific div class that I want to change the background-color for each theme, but unfortunately I am having difficulty achieving this.
Is there anyone out there who has experience with implementing something similar and could offer some guidance?
This is how my app component HTML looks:
<div class="ui-layout">
<div class="card">
<div class="wrapper">
</div>
</div>
</div>
Here's a snippet from my app component SCSS file:
.card {
background-color: #ffffff;
}
.black-blue-theme {
.card {
background-color: #424242 !important;
}
}
And finally, here is my app component TypeScript code:
ngOnInit() {
this.componentCssClass = 'light-indigo-theme';
themes.current('generic.light');
this.setupOverlayContainer();
this.subscribeToObservableFooter();
}
setupOverlayContainer() {
const containerElement = this.overlayContainer.getContainerElement();
if (containerElement) {
const classList = this.overlayContainer.getContainerElement().classList;
const toRemove = Array.from(classList).filter((item: string) =>
item.includes('-theme'),
);
classList.remove(...toRemove);
classList.add(this.componentCssClass);
}
}
changeTheme(type: string) {
this.componentCssClass = type;
if (type === 'black-blue-theme') {
themes.current('generic.dark');
} else {
themes.current('generic.light');
}
this.setupOverlayContainer();
}