As I delved into PrimeNG and PrimeFlex for my recent Angular 17 standalone app with SSR, one aspect truly stood out: built-in themes. Unlike Material UI, PrimeNG offers a delightful selection of pre-built themes that you can easily configure within your application.
But the real cherry on top? Setting up a theme switcher to empower users to personalize their experience is a breeze with just a few lines of code. Let’s dive in!
Priming Your App for Themes:
Installation: Get started by installing PrimeNG using npm or yarn.
npm install primeng --save
Include Styles in angular.json:
Ensure your angular.json file includes the necessary styles. Below is my folder structure and its inclusion in angular.json.
In each stylesheet, I imported built-in PrimeNG Themes from resources.
//angular.json
"styles": [
"src/styles.css",
{
"input": "src/app/styles/lara-dark-teal.scss",
"bundleName": "lara-dark-teal",
"inject": false
},
{
"input": "src/app/styles/lara-light-teal.scss",
"bundleName": "lara-light-teal",
"inject": false
}
],
This configuration guarantees the stylesheets are bundled into your final dist folder during build time.
- Setting the Default Theme (index.html):
Include Stylesheet: In your index.html file, incorporate the stylesheet for your chosen default theme and assign it an ID for service access:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Theme Switcher</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link id="app-theme" rel="stylesheet" type="text/css" href="lara-light-teal.css">
<link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
</head>
<body class="">
<app-root></app-root>
</body>
</html>
- Dynamic Theme Switching with a Service:
Create a Theme Service: Construct a service to manage theme changes. Inject it into your root component for application-wide accessibility:
//themes.service.ts
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root',
})
export class ThemeService {
constructor(@Inject(DOCUMENT) private document: Document) {}
switchTheme(theme: string) {
let themeLink = this.document.getElementById('app-theme') as HTMLLinkElement;
if (themeLink) {
themeLink.href = theme + '.css';
}
}
}
- Using the service inside Component:
Inject Service and Document: Within your component, inject the ThemeService and the Document object:
constructor(private themeService: ThemeService) {
}
checked: boolean = false;
changeTheme() {
let theme = (this.checked) ? "lara-dark-teal" : "lara-light-teal"
this.themeService.switchTheme(theme);
}
}
Template with p-toggle: Utilize the p-toggle component from PrimeNG to render the toggle button. Bind its state to a boolean variable (checked) and trigger the changeTheme() method on click. Employ pi-icons (PrimeNG icons) for visual appeal.
<p-toolbar styleClass="bg-primary shadow-2 opacity-80">
<div class="flex-grow">
My Theme Switcher
</div>
<p-toggleButton styleClass="bg-primary shadow-2 text-white" [(ngModel)]="checked" onIcon="pi pi-sun"
offIcon="pi pi-moon" (click)="changeTheme()" />
</p-toolbar>
Separation of Concerns: The service concentrates on theme management, keeping your component clean and focused.
Enhanced Readability: The code is well-structured and easy to comprehend for developers of all levels.
Developer Delight: PrimeNG streamlines the process, empowering you to craft a seamless theme-switching experience in your Angular 17 application.
Top comments (0)