How to set our own custom theme in PrimeNG

Question

I am using latest version of "primeng": "^12.2.0",I want to set my own custom theme of primeng. I gone through many blogs, but couldn't find any solution.

I copied theme.css file from ‘node_modules/primeng/resources/themes/bootstrap4-dark-blue’ and made my new folder in src and I imported my new theme in angular.json file. But above theme.css file containing 6000+ lines of css code, and it doesn't following any variable, it means every css class containing color code, means that class color does not referring any single variable, so that if suppose I want to change primary color of theme, so I have to change only one variable.

Is there any better way to change the primary color, secondary color, etc in primeng?

Answer 1

It's been a while since the question was asked but in the more recent versions there is a way to build your own themes.

PrimeNG now allows to create custom themes using the primeng-sass-theme repository, you will need to set all the variables from the mythemes folder as said in the doc and import it into your project.

You can find more details on how to configure and import your theme and how it works in their documentation at: https://primeng.org/theming#customtheme

Answer 2

For what I understand of your problem, you want to factorize your CSS variables.

For the most part, it has been made really difficult to force you to buy a theme already made, or for you to buy the theme generator.

There is no easy way of doing it natively. You can arm yourself with patience and go with CTRL + F or pay the licence.

In my team, we went with the easy way. You will lose more time than buying the concrete theme, or the designer. It depends what is worth the pain you will go through.

Link for the store

Link for the theme designer licence