如何更改 Primeng 的原色

How to change primary color for Prime NG

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

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

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

这是一个棘手的解决方法。

从 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 构建您的应用程序。（根据需要使用任何其他构建开关）
瞧！享受您的定制风格:)

我使用了 Ε Г И І И О 解决方案的一部分，不确定它将来是否会破坏某些东西，但它工作正常。

我的解决方案：

(same) 从 primeng 复制基础 theme.css（从 node_modules/primeng/resources/themes/{your_theme}/theme.css 中找到）
(same) 根据您的喜好更改所有颜色等。（提示：使用查找 -> 替换）
将更改 themes.css 保存到任何文件夹，例如 src/app/styles/theme.css（提示：您可以升级到 scss 并使用 color variables 以获得可重用和更易读的代码）
angular.json 内 "styles" 数组将导入的 node_modules/primeng/resources/themes/{your_theme}/theme.css 替换为您的路径，如 src/app/styles/theme.css
尽情享受，无需 cpx 或 node-modules 手动更改，因此您可以更快地在另一台计算机上移动代码！

还有另一种困难的方法，

像其他人建议的那样，将任何 theme.css 复制到一个文件，然后按照下面的步骤转换为 scss， 步骤 1 - 使用下面的 link，提取所有 css 颜色，不包含 css 变量的部分。 http://www.css-color-extractor.com/

现在，从第 1 步开始，我们有了要用 css 变量替换的颜色列表

步骤 2 - 使用任何工具将 css 转换为 SCSS，例如 - https://codebeautify.org/css-to-scss-converter

将步骤-2复制到新的theme.scss文件。

-> 为步骤 1 中的每种颜色定义一个 css 变量/ scss 变量，对步骤 1 中找到的每种颜色（如果不存在）执行 查找并替换 为所有 css 变量/ scss 变量。

如何更改 Primeng 的原色

How to change primary color for Prime NG

css

primeng

angular