如何在PrimeNG中设置我们自己的自定义主题

Question

我正在使用最新版本的

"primeng": "^12.2.0",

我想设置我自己的primeng自定义主题。我浏览了很多博客，但找不到任何解决方案。

我从

theme.css

复制了

‘node_modules/primeng/resources/themes/bootstrap4-dark-blue’

文件，并在 src 中创建了新文件夹，并在

angular.json

文件中导入了新主题。但是上面的 theme.css 文件包含 6000 多行 css 代码，并且它不遵循任何变量，这意味着每个包含颜色代码的 css 类，意味着类颜色不引用任何单个变量，所以如果假设我想更改主题的

primary color

，所以我只需更改一个变量。

在primeng中有没有更好的方法来改变原色、间色等？

Answer 1

据我对你的问题的理解，你想分解你的 CSS 变量。

在大多数情况下，强迫您购买已经制作的主题或购买主题生成器非常困难。

没有简单的方法可以在本地做到这一点。您可以耐心武装自己并选择

CTRL + F

或支付许可证费用。

在我的团队中，我们选择了简单的方法。你会比购买具体的主题或设计师浪费更多的时间。这取决于什么值得你经历的痛苦。

Answer 2

问题提出已经有一段时间了，但现在有一种方法可以在文档中自定义主题：https://primeng.org/theming#customtheme

留下这个答案，因为这是我第一次搜索时得到的第一个结果