PrimeNg Theme colors

user_14356265 0
Viewed 683

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

material-design primeng angular-material angular themes
1 Answers

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 :)

user_6871900
Related