Search code examples
cssangularprimengangular17clarity

Where does this PrimeNG element get its color and how do I change it?

I am working on an Angular 17 project with the Clarity and PrimeNG libraries for styling. I have included the following css files in my angular.json:

  • "node_modules/primeng/resources/themes/mdc-dark-indigo/theme.css",
  • "node_modules/primeng/resources/primeng.min.css",

The style works but I need to adjust it slightly to adhere to the style of the rest of the product. I am using a basic PrimeNG TabView component:

<div class="recipe">
  <div class="tabs">
    <p-tabView>
      <p-tabPanel header="Settings">
          <ng-template pTemplate="header">
              <div class="expanded-click-area" routerLink="settings">
                  <fa-icon [icon]="faCog"></fa-icon>
                  Settings
              </div>
          </ng-template>
      </p-tabPanel>
      <p-tabPanel header="Phases">
          <ng-template pTemplate="header">
              <div class="expanded-click-area" (click)="navigateToRoute('phases')">
                  <fa-icon [icon]="faTasks"></fa-icon>
                  Phases
              </div>
          </ng-template>
      </p-tabPanel>
      <p-tabPanel header="Overview">
          <ng-template pTemplate="header">
              <div class="expanded-click-area" (click)="navigateToRoute('overview')">
                  <fa-icon [icon]="faPieChart"></fa-icon>
                  Overview
              </div>
          </ng-template>
      </p-tabPanel>
    </p-tabView>

  </div>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

I specifically want to change the bottom border with color #9FA8DA as shown in this print screen: bane of my existence

In my devtools I have turned off everything with border but it did not change anything, I also have replaced all 183 instances of #9FA8DA with white in node_modules/primeng/resources/themes/mdc-dark-indigo/theme.css and found none to replace in node_modules/primeng/resources/primeng.min.css. This did now change the color of the element even after a rebuilt of the page.

Where does this PrimeNG element get its color and how do I change it?

Solution

  • Instead of modifying an existing theme, which seems tedious, checkout the documentation for custom themes

    Primeng custom theme

    Themes are created using primeng-sass-theme do check it out, hope it solves your issue!