Just started working with Angular (), and I have the latest Angular version installed on my machine.
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1602.3
@angular-devkit/build-angular 16.2.3
@angular-devkit/core 16.2.3
@angular-devkit/schematics 16.2.3
@angular/cdk 16.2.5
@angular/cli 16.2.3
@angular/material 16.2.5
@schematics/angular 16.2.3
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.3
I'm wondering how to incorporate Dark/Light Mode in a component. In app.component, it triggers a call to header.component that emits a toggleValue for theme switching. Here is the code:
styles.scss
@use '@angular/material' as mat;
@include mat.core();
// Define a dark theme
$dark-theme: mat.define-dark-theme((
color: (
primary: mat.define-palette(mat.$pink-palette),
accent: mat.define-palette(mat.$blue-grey-palette),
),
typography: mat.define-typography-config(),
density: 0,
));
// Define a light theme
$light-theme: mat.define-light-theme((
color: (
primary: mat.define-palette(mat.$indigo-palette),
accent: mat.define-palette(mat.$pink-palette),
),
));
// Apply the dark theme by default
@include mat.core-theme($dark-theme);
@include mat.button-theme($dark-theme);
@media (prefers-color-scheme: light) {
@include mat.core-color($light-theme);
@include mat.button-color($light-theme);
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
app-root {
display: flex;
flex-direction: column;
min-height: 100vh;
}
}
app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'web';
activeTheme = true;
}
app.component.html
<header id="header">
<app-header (changeTheme)="activeTheme"></app-header>
</header>
<main id="main">
<router-outlet></router-outlet>
</main>
<footer id="footer">
<app-footer></app-footer>
</footer>
header.component.ts
import {AfterViewInit, Component, ElementRef, EventEmitter, Output, ViewChild} from '@angular/core';
@Component({
selector: 'app-header',
styleUrls: ['./header.component.scss'],
templateUrl: 'header.component.html'
})
export class HeaderComponent implements AfterViewInit {
sun = 'light-icon';
moon = 'dark-icon';
brand: string = 'MyApp';
checked = false;
@ViewChild('darkModeSwitch', {read: ElementRef}) element: ElementRef | undefined
@Output() changeTheme = new EventEmitter<boolean>();
ngAfterViewInit(): void {
if (this.element) {
this.element.nativeElement.querySelector('.mdc-switch__icon--on').firstChild.setAttribute('d', this.moon);
this.element.nativeElement.querySelector('.mdc-switch__icon--off').firstChild.setAttribute('d', this.sun);
}
}
switchTheme() {
this.checked = !this.checked;
this.changeTheme.emit(this.checked);
}
}
header.component.html
<mat-toolbar class="header mat-elevation-z6">
<div class="dark-light-toggle-mode">
<mat-slide-toggle
#darkModeSwitch
(change)="switchTheme()"
[checked]="checked"
/>
</div>
</mat-toolbar>
Any help or suggestions would be greatly appreciated...