Using CSS layers can help manage the order of your styles. Ensure that PrimeNG styles are loaded after Bootstrap's reboot CSS.
@block blast

Hi Ana

To switch PrimeNG themes with Metronic's theme mode switcher:
Include both dark and light PrimeNG theme files in Angular.json.
Dynamically change the <link> tag for PrimeNG themes based on the mode selected.
Example:

switchTheme(theme: "dark" | "light") {

  const themeLink = document.getElementById("primeng-theme") as HTMLLinkElement;

  themeLink.href = theme === "dark" 

    ? "path-to-dark-theme.css" 

    : "path-to-light-theme.css";

}

<link  rel="stylesheet" href="path-to-light-theme.css">

Thanks for fast replying. I have one more question. I need to implement in the theme mode switcher of Metronic a switch for primeng template too (dark/light css files) . How do i switch css if they are loaded via angular.json?

Hi Ana Sorlea

You can try the following approaches:

1. Load PrimeNG Styles After Bootstrap Styles Check that PrimeNG styles are loaded after the Bootstrap Reboot and other Metronic styles in the angular.json file:

"styles": [
  "src/styles.css", 
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/saga-blue/theme.css", 
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

PrimeNG styles should be listed after the Bootstrap styles to override conflicting rules.

2. Use View Encapsulation In Angular, you can use ViewEncapsulation to encapsulate component styles and avoid unwanted style overrides. Add the following line in the component decorator of the component where PrimeNG styles are being overridden:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None // Disables Angular's CSS encapsulation
})