'How to change primary color for Prime NG

How can I change default primary color for primeNG (saga-blue theme) ? changing --primary-color doesn't help, because in node_modules/..../theme.css elements are styled using the main color hex and not ' --primary-color '. I also can't override styling for all elements that use that primary color because they are too many + they have different shades of --primary-color on hover and on focus, how can I handle this ?

cssangularprimeng


Solution 1:[1]

If you want to change the primary color to green, orange, or purple, you can change your theme to one of those (saga-green, saga-orange...)

If you want more customization, you can use their theme designer.

Solution 2:[2]

Here's a hacky workaround.

  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 as per your liking. (Hint: use find -> replace)

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

Solution 3:[3]

I used part of ? ? ? ? ? ? solution, not sure if it could break something in future yet it's working fine.

My solution:

  1. (same) Make a copy of the base theme.css from primeng (Find it from node_modules/primeng/resources/themes/{your_theme}/theme.css)
  2. (same) Change all colors, etc as per your liking. (Hint: use find -> replace)
  3. Save changed themes.css to any folder, like src/app/styles/theme.css (Hint: you can upgrade to scss and use color variables for reuseable and more readable code)
  4. Inside angular.json under "styles" array replace imported node_modules/primeng/resources/themes/{your_theme}/theme.css to your path, like src/app/styles/theme.css
  5. Enjoy, no cpx or node-modules hand changes required, so you can faster move code on another computer!

Solution 4:[4]

There is another hard way of doing this,

Like everyone else suggested, copy any theme.css to a file, after that follow below step to convert to scss, Step 1 - Using below link, extract all the css colors, not having the part of css variables. http://www.css-color-extractor.com/

Now, from step-1, we have list of colors to be replaced with css variable

Step 2 - Use any tool to convert css to SCSS, for example - https://codebeautify.org/css-to-scss-converter

Copy the Step -2, to a new theme.scss file.

-> define a css variable/ scss variable for each colors in step 1, Do a find and replace with all css variable / scss variable for every color found in step-1 (if does not exist).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 PMO1948
Solution 2 Ε Г И І И О
Solution 3 Nomik
Solution 4 Dreamweaver

Related Questions