4

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 ?

5 Answers 5

6

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!
1
  • 1
    Wow that's much much cleaner! Thanks :) I wonder why I took the trouble replacing the original file. That feels so stupid. Sep 21, 2022 at 17:31
5

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.

4
  • 4
    Was looking for a free solution, but ok thanks
    – Omar Zahir
    Feb 16, 2021 at 12:33
  • I hear you :-). If you hear of one, I'd love to know about it!
    – PMO1948
    Feb 16, 2021 at 15:46
  • so far I got nothing, but using a built in theme is totally free right?
    – Omar Zahir
    Feb 16, 2021 at 15:47
  • 1
    If you use one of the free themes, then it is free
    – PMO1948
    Feb 16, 2021 at 15:48
3

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

2

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

0

You can set the SCSS variables (like in the Prime Theme Designer) and then import the theme SCSS in your styles.scss file (for example).

$primaryColor: red !default;
@import 'node_modules/primeng-sass-theme/themes/nova/nova/theme';

To get the theme SCSS, you need to add their theme repository as a NPM dependency in your package.json.

"dependencies": {
  // ...
  "primeng-sass-theme": "github:primefaces/primeng-sass-theme#16.2.0",
},

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.