npm i primeng@17 primeicons@7 primeflex@3 @ic-lib/style

Theme Configuration

1. Create a theme (you may select you own name preference) folder in you angular application under src
2. Create dark.scss and light.scss file under theme and it will look like below respectively.

@import "@ic-lib/style/scss/theme-dark";

@import "@ic-lib/style/scss/theme-light";

3. Now in angular.json under architect > build > options > styles import themes like this.

"styles": [
  ...
  {
    "input": "./src/theme/light.scss",
    "bundleName": "ic-light",
    "inject": false
  },
  {
    "input": "./src/theme/dark.scss",
    "bundleName": "ic-dark",
    "inject": false
  }
],

4. In application src/index.html add this line into header section

<link id="ic-theme" rel="stylesheet" type="text/css" href="ic-light.css" />

5. Import this line in your global scss (src/style.scss) file at the top

@import "@ic-lib/style/scss/global";

Switch Theme (Only required in Shell app)

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { InputSwitchModule } from 'primeng/inputswitch';
import { ThemeService } from "@ic-lib/style";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [InputSwitchModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  isLight = true
  constructor(private theme: ThemeService) {}

  toggleTheme() {
    this.isLight ? this.theme.switchTheme('ic-light') : this.theme.switchTheme('ic-dark');
  }
}

Common issue in local development

1. Angular 17 onwards npm link lib will be ignored by vite optimizer. While you lib in watch mode, the changes will get ignored. To fix that. Open tsconfig.app.json and add this line of code. so vite will not add the lib in cache.

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "@ic-lib/style": ["./node_modules/@ic-lib/style"]
    }
  },
  ...
}