I'm trying to toggle between two custom themes. However, only some items on my page are switching on the toggle click. How do I make the other elements switch as well, such as borders, text, and hover colors?
Index.html
<body class="DefaultTheme">
<app-root></app-root>
</body>
app.component.html
<div>
<mat-slide-toggle name="toggle" (click)="changeTheme()">Change theme</mat-slide-toggle>
</div>
app.component.ts
export class AppComponent{
changeTheme() {
if (document.body.classList.contains("DefaultTheme")) {
document.body.classList.remove("DefaultTheme");
document.body.classList.add("CustomTheme");
}
else {
document.body.classList.remove("CustomTheme");
document.body.classList.add("DefaultTheme");
}
}
}
theme.scss
@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mtb-pallete, 500);
$app-accent: mat-palette($mtb-pallete, 550);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary,$app-accent,$app-warn);
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
.DefaultTheme {
@include angular-material-theme($app-theme);
}
$alt-primary: mat-palette($mtb-pallete, 590);
$alt-accent: mat-palette($mtb-pallete, 580);
$alt-warn: mat-palette($mat-red);
$alt-theme: mat-light-theme($alt-primary, $alt-accent, $alt-warn);
$primary: mat-color($alt-primary);
$accent: mat-color($alt-accent);
.CustomTheme {
@include angular-material-theme($alt-theme);
}
P.S this is more of a suggestion. I use a simple approach, may help in your case. I'll write two separate styles nested with a separate parent class name. and i'll change the parent class name based on the condition, which will eventually apply the different style to the whole page.
eg:
HTML file:
Styles:
Here when the
themeis true pink-theme is applied and when it's false, yellow theme is applied. It's the most simplest way of style switching. Here is a working demoUpdate 1:
Instead of adding and removing the class in component file, you can use
[ngClass]