如何在PrimeNG中自定义主题并通过变量修改主色、辅色等样式？

方案核心逻辑 #

你之前复制的是编译完成的纯CSS主题文件，所有SCSS变量已经被替换为固定色值，自然无法通过单个变量批量修改。直接调用PrimeNG内置的SCSS主题源文件，覆写变量即可实现极简自定义。

具体操作步骤 #

• 首先在src目录下新建自定义主题SCSS文件，例如src/styles/primeng-custom.scss
• 在文件顶部先定义你需要修改的主题变量，变量名和你选用的主题内置变量保持一致即可，示例如下：

// 覆写主色、辅色，其余变量沿用bootstrap4-dark-blue默认值
$primaryColor: #1890ff;
$secondaryColor: #52c41a;
$primaryHoverColor: #40a9ff;
// 可按需添加更多要修改的变量，所有变量可在node_modules/primeng/resources/themes/bootstrap4-dark-blue/_variables.scss中查阅

• 变量定义完成后，在下方引入对应主题的SCSS源文件和PrimeNG基础样式：

@import "~primeng/resources/themes/bootstrap4-dark-blue/theme.scss";
@import "~primeng/resources/primeng.min.css";

• 打开angular.json配置文件，找到projects.[你的项目名].architect.build.options.styles数组，删除之前引入的复制版theme.css，替换为你新建的自定义SCSS文件：

"styles": [
  "src/styles/primeng-custom.scss",
  "src/styles.scss"
]

• 重启项目即可生效，后续要修改主色辅色只要修改你定义的变量值，重新编译即可全局生效。

替代方案（无需使用SCSS） #

如果你的项目不支持SCSS，也可以通过全局CSS优先级覆盖实现：

• 保留你之前复制到src下的theme.css
• 在项目全局样式文件中，针对需要修改的颜色对应的所有选择器，用更高优先级的规则批量覆盖，也可以配合CSS变量实现统一修改，示例：

:root {
  --custom-primary: #1890ff;
}
/* 批量覆盖所有使用主色的选择器 */
.p-button-primary, .p-checkbox-box.p-highlight, .p-inputtext:focus {
  background-color: var(--custom-primary) !important;
  border-color: var(--custom-primary) !important;
}

这种方案需要你整理所有用到主色的选择器，适合改动量小的场景。

内容的提问来源于stack exchange，提问作者user14922829