I'm currently working on a project using Angular 17, incorporating the Clarity and PrimeNG libraries for styling purposes. Within my angular.json file, I have included the following css files:
- "node_modules/primeng/resources/themes/mdc-dark-indigo/theme.css",
- "node_modules/primeng/resources/primeng.min.css",
While the styles are functional, I need to make some adjustments to align them better with the overall design of the product. The specific component I'm working with is a basic PrimeNG TabView:
<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>
My main objective is to modify the bottom border color to #9FA8DA, as illustrated in this screenshot: https://i.sstatic.net/MqTbX.png
After disabling all borders via devtools, making replacements in theme.css, and rebuilding the page, the desired color change did not occur. I'm wondering where this particular style attribute originates within PrimeNG and how I can successfully alter it.