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
I used part of Ε Г И І И О solution, not sure if it could break something in future yet it's working fine.
My solution:
- (same) Make a copy of the base theme.css from primeng (Find it from
node_modules/primeng/resources/themes/{your_theme}/theme.css
) - (same) Change all colors, etc as per your liking. (Hint: use find -> replace)
- Save changed
themes.css
to any folder, likesrc/app/styles/theme.css
(Hint: you can upgrade to scss and use color variables for reuseable and more readable code) - Inside
angular.json
under"styles"
array replace importednode_modules/primeng/resources/themes/{your_theme}/theme.css
to your path, likesrc/app/styles/theme.css
- Enjoy, no cpx or node-modules hand changes required, so you can faster move code on another computer!
-
1Wow 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
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
-
-
so far I got nothing, but using a built in theme is totally free right? Feb 16, 2021 at 15:47
-
1
Here's a hacky workaround.
Make a copy of the base theme.css from primeng (Find it from
node_modules/primeng/resources/themes/{your_theme}/theme.css
)Change all colors, etc as per your liking. (Hint: use find -> replace)
Save this file in an assets folder. (You can keep it outside of your src folder)
Install cpx (https://www.npmjs.com/package/cpx). It's a file copier.
npm install cpx --save-dev
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"
Use
npm run ngBuild
to build your app. (Use any other build switches as desired)Voila! Enjoy your customized styles :)
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).
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",
},