PrimeNg Theme colors

Issue

I am using the primeng or md dark-indigo theme and my question is, if it is possible to change the color of specific primeng components. For instance dropdowns are black but when I am using Buttons they are indigo. So my question is if there is a way to change p-elements style to the other theme color, in my case from indigo in black.

Screenshot of issue:
https://prnt.sc/133vzbo

Solution

Here are the (hacky) steps to customize PrimeNG styles.

  1. Make a copy of the base theme.css from primeng (Find it from node_modules/primeng/resources/themes/{your_theme}/theme.css)

  2. Change all colors, etc applied for the component as per your liking.

  3. Save this file in an assets folder. (You can keep it outside of your src folder)

  4. Install cpx (https://www.npmjs.com/package/cpx). It’s a file copier.

    npm install cpx --save-dev

  5. Add the following scripts to your package.json.

    "copyCss": "cpx \"assets/theme.css\" \"node_modules/primeng/resources/themes/{your_theme}/\""

    "ngBuild": "npm run copyCss && ng build"

  6. Use npm run ngBuild to build your app. (Use any other build switches as desired)

  7. Voila! Enjoy your customized styles 🙂

Answered By – Ε Г И І И О

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.