Перемикання темної теми з Angular Standalone та PrimeNG - javascript.org.ua

Додаток на Angular з перемикачем теми (світла/темна) за допомогою бібліотеки PrimeNG v18/19

Оточення:

ng version   

 _ _ ____ _ ___  
 / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|  
 / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |  
 / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |  
 /_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|  
 |___/  

Angular CLI: 19.0.7  
Node: 22.13.0  
Package Manager: npm 11.0.0  
OS: win32 x64

Налаштування додатка Angular з PrimeNG

Розпочнемо з ініціалізації нового додатка Angular за допомогою CLI та встановлення PrimeNG:

npm install -g @angular/cli  
ng new dark-theme-switch-primeng  
cd dark-theme-switch-primeng  
npm install primeng @primeng/themes

Інтеграція PrimeNG з версії v18 стала набагато простішою. Використовуючи опцію теми, ми повідомляємо PrimeNG, що будемо перемикати темну тему, застосовуючи CSS клас в DOM.
app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';  
import { provideRouter } from '@angular/router';  
import { routes } from './app.routes';  
import { providePrimeNG } from 'primeng/config'; // Імпортуємо функцію providePrimeNG  
import Aura from '@primeng/themes/aura'; // Імпортуємо тему Aura  

export const appConfig: ApplicationConfig = {  
 providers: [provideZoneChangeDetection({ eventCoalescing: true }),  
 provideRouter(routes),  
 providePrimeNG({  
 theme: {  
 preset: Aura,  
 options: {  
 darkModeSelector: '.my-app-dark'  
 }  
 },  
 }),  
 ]  
};

Ця конфігурація дозволяє використовувати тему Aura від PrimeNG та підтримує темну тему, яку можна активувати, використовуючи селектор .my-app-dark. Ви можете використовувати будь-яку тему за вашим вибором, просто ознайомтесь з темами, наданими бібліотекою PrimeNG.

Перемикач темної теми

Тепер додамо сервіс для керування та збереження обраної теми.

ng g s services/theme

import { Injectable } from '@angular/core';  

@Injectable({  
 providedIn: 'root',  
})  
export class ThemeService {  

 private darkThemeClass = 'my-app-dark';  
 private themeKey = 'app-theme';  

 constructor() {  
 this.loadTheme();  
 }  

 toggleDarkMode(): boolean {  
 const element = document.querySelector('html');  
 if (element) {  
 element.classList.toggle(this.darkThemeClass);  
 const isDarkMode = element.classList.contains(this.darkThemeClass);  
 localStorage.setItem(this.themeKey, isDarkMode ? 'dark' : 'light');  
 return isDarkMode;  
 }  
 return false;  
 }  

 private loadTheme() {  
 const savedTheme = localStorage.getItem(this.themeKey);  
 if (savedTheme === 'dark') {  
 const element = document.querySelector('html');  
 if (element) {  
 element.classList.add(this.darkThemeClass);  
 }  
 }  
 }  
}

Пояснення коду

Метод loadTheme є приватним методом класу.
Він відповідає за завантаження збереженої теми з локального сховища (localStorage) та застосування темної теми до елемента документа, якщо збережена тема — «dark». ThemeService

Отримання збереженої теми:
Метод намагається отримати значення збереженої теми з localStorage, використовуючи ключ .this.themeKey

const savedTheme = localStorage.getItem(this.themeKey);

Перевірка теми:
Перевіряється, чи є збережена тема «dark».

if (savedTheme === 'dark') {

Вибір елемента HTML:
Вибирається елемент документа

const element = document.querySelector('html');

Застосування класу теми:
Якщо елемент знайдено, додається відповідний CSS клас для темної теми (.this.darkThemeClass) до елемента.

if (element) {  
 element.classList.add(this.darkThemeClass);  
}

Перемикач темної теми

Тепер додамо перемикач для управління темою.

ng g c components/switch-theme

switch-theme.component.ts

import { Component, OnInit } from '@angular/core';  
import { InputSwitchModule } from 'primeng/inputswitch'; // Імпортуємо InputSwitchModule   
import { FormsModule } from '@angular/forms'; // Імпортуємо FormsModule  
import { ThemeService } from '../../services/theme.service'; // Імпортуємо ThemeService  

@Component({  
 selector: 'app-switch-theme',  
 imports: [InputSwitchModule, FormsModule], // Додаємо InputSwitchModule та FormsModule до масиву imports  
 templateUrl: './switch-theme.component.html',  
 styleUrl: './switch-theme.component.scss'  
})  
export class SwitchThemeComponent implements OnInit {  

 isDarkMode: boolean = false;  

 constructor(private themeService: ThemeService) { }  

 ngOnInit() {  
 // Ініціалізація стану перемикача на основі поточної теми  
 const currentTheme = localStorage.getItem('app-theme');  
 this.isDarkMode = currentTheme === 'dark';  
 }  

 toggleDarkMode() {  
 this.isDarkMode = this.themeService.toggleDarkMode();  
 }  

}

SwitchThemeComponent керує перемиканням між світлою та темною темами, ініціалізуючи стан перемикача на основі поточної теми та змінюючи тему через виклик сервісу ThemeService.

Тепер достатньо додати компонент для перемикання між режимами.

switch-theme.component.html

Шаблон використовує компонент PrimeNG для перемикання між світлою та темною темами, зв'язуючи його стан із властивістю isDarkMode і викликаючи метод toggleDarkMode при зміні стану.

Кінцевий результат: