CODEWITHSUNDEEP
angularprimeng
AndreaNobili
AndreaNobili

Reputation: 42957

How to set PrimeNG theme?

I am finding some problem trying to understand how to set the PrimeNG theme. If I go here: https://www.primefaces.org/primeng/showcase/#/table/crud

I can see that the theme set by default is the bootstrap4-light-blue.

Ok, how can I set this theme in my project? I am using PrimeNG but I can't find themes into my project.

Have I to install in some way? What am I missing?

EDIT-1: Into the folder of PrimeNg themes of my foler (/home/developer/Documents/Angular-WS/color_patch/node_modules/primeng/resources/themes) I only find these few themes? why? It seems to me that a lot of themes is missing. Isn't it? In particular the themes related to BootStrap seems to be not present

enter image description here

Upvotes: 5

Views: 21698

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

the them now that displayed are new themes base of primeng 10 and currently still in development at the time of writing this answer (PrimeNG 10.0.0-rc.4-SNAPSHOT by PrimeTek)

all these themes are css files installs by as part of primeng and you have two method to include these themes

angular.json

"styles": [
                "src/styles.css",
                "node_modules/primeng/resources/themes/nova-light/theme.css", 👈
                "node_modules/primeng/resources/primeng.min.css",
                "node_modules/primeflex/primeflex.css",
                "node_modules/primeicons/primeicons.css",
                "node_modules/quill/dist/quill.snow.css"
            ],

or by import the css file in global scss file

global.scss

@import "primeicons/primeicons.css";
@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/nova-dark/theme.css"; 👈

these are the theme files inside the primeng packages

primeng/resources/themes/**theme name**/theme.css enter image description here

Upvotes: 10

Related Questions