Experimenting with an angular project where users can choose themes from a dropdown menu to modify the appearance of the application using this handy tutorial
Utilizing :host-context for this purpose
Encountering an issue where the selected themes are not being applied correctly, and I'm at a loss as to what could be causing it. Here's the code snippet:
app.component.html
<!--The following content is just a placeholder and can be updated by you.-->
<div [ngClass]="theme">
<nav class="navbar fixed-top navbar-light justify-content-center headerColor">
<a class="navbar-brand" href="#">Socxo Themes</a>
</nav>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="selectTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
title = 'app';
theme = "default";
setTheme(themeName:string)
{
this.theme=themeName;
}
}
Initially focusing on theming the navbar
Below is the app.component.css file
@import "./app.component.1.css";
@import "./app.component.2.css";
@import "./app.component.3.css";
.content{
margin-top:55px;
text-align: center;
}
.topClass{
margin-top:70px;
}
.headerColor{
border:1px solid;
}
In ./app.component.1,2,3.css, I've included the CSS properties for different themes as shown below
:host-context(.one).headerColor{
background-color: chocolate;
}
:host-context(.two).headerColor{
background-color: chocolate;
}
:host-context(.default).headerColor{
background-color: chocolate;
}
When selecting an option from the dropdown, the value of the theme variable changes but the corresponding class fails to load
Any help or guidance on this matter would be greatly appreciated.