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

Posted 2023-03-13

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

【英文标题】：How to set our own custom theme in PrimeNG

【发布时间】：2021-11-24 19:33:08

【问题描述】：

我正在使用最新版本的"primeng": "^12.2.0",我想设置我自己的primeng自定义主题。我浏览了很多博客，但找不到任何解决方案。

我从‘node_modules/primeng/resources/themes/bootstrap4-dark-blue’ 复制了theme.css 文件并在src 中创建了我的新文件夹，并将我的新主题导入到angular.json 文件中。但是上面的 theme.css 文件包含 6000+ 行 css 代码，并且它没有跟随任何变量，这意味着每个 css 类都包含颜色代码，意味着类颜色不引用任何单个变量，所以如果我想更改主题的primary color，所以我只需要更改一个变量。

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

【问题讨论】：

他们很久以前就删除了在 PrimeNG 中创建自定义主题的功能，并引入了一个付费工具，允许您这样做 - Designer。我们决定从所有产品中删除 PrimeNG 并使用其他库的众多原因之一。

@TotallyNewb 你的意思是我们不能设置我们自己的自定义主题？

【参考方案1】：

根据我对您的问题的理解，您希望分解您的 CSS 变量。

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

本地没有简单的方法。您可以耐心地武装自己，然后使用CTRL + F 或支付许可证。

在我的团队中，我们采用了简单的方法。与购买具体主题或设计师相比，您将浪费更多时间。这取决于你所经历的痛苦是否值得。

Link for the store

Link for the theme designer licence

【讨论】：

荒谬。花钱重新创建自己的公司主题是一个荒谬的要求。

荒谬与否，这是事实。这是他们的商业模式，如果你不喜欢，就不要付钱。但在这种情况下，我看不到很多替代方法来回答这篇文章中提出的问题