如何更改Primeng的原色答案

【问题标题】：How to change primary color for Prime NG如何更改Primeng的原色
【发布时间】：2021-05-17 19:53:20
【问题描述】：

如何更改 primeNG（传奇蓝色主题）的默认原色？更改 --primary-color 没有帮助，因为在 node_modules/..../theme.css 元素的样式是使用主颜色十六进制而不是' --primary-color '。我也无法覆盖所有使用该原色的元素的样式，因为它们太多了+它们在悬停和聚焦时具有不同的 --primary-color 阴影，我该如何处理？

【问题讨论】：

标签： css angular primeng

【解决方案1】：

如果您想将原色更改为绿色、橙色或紫色，您可以将主题更改为其中之一（saga-green、saga-orange...）

如果你想要更多的自定义，你可以使用their theme designer。

【讨论】：

正在寻找免费的解决方案，但是好的，谢谢
我听到了:-)。如果你听说过，我很想知道！
到目前为止我一无所获，但使用内置主题是完全免费的，对吧？
如果您使用其中一个免费主题，那么它是免费的

【解决方案2】：

这是一个 hacky 解决方法。

从primeng复制基本的theme.css（从node_modules/primeng/resources/themes/{your_theme}/theme.css找到它）
根据您的喜好更改所有颜色等。（提示：使用查找 -> 替换）
将此文件保存在资产文件夹中。（你可以把它放在你的 src 文件夹之外）
安装 cpx (https://www.npmjs.com/package/cpx)。这是一个文件复印机。

npm install cpx --save-dev
将以下脚本添加到您的 package.json。

"copyCss": "cpx \"assets/theme.css\"\"node_modules/primeng/resources/themes/{your_theme}/\""

"ngBuild": "npm run copyCss && ng build"
使用npm run ngBuild 构建您的应用。（根据需要使用任何其他构建开关）
瞧！享受您的定制风格:)

【讨论】：