I am using angular version 16. Here I have a material tab bar of which I want to give a background color. mat-tab-group takes backgroundColor as input and assigns that color.
<mat-tab-group backgroundColor="primary">
<mat-tab label="Comment">
<div class="margin-top">
<app-comp></app-comp>
</div>
</mat-tab>
</mat-tab-group>
In this way I can assign either primary or accent or warn color. Because this input- backgroundColor is of type ThemePalette which is defined in index.d.ts file as –
export declare type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;
So now I want color for say primary-light or my own defiend Pallete. How can I do this? i.e. How to extend that ThemePalette to add more options?
Another way I have tried – I have tried with to change background color from css but did not work
::ng-deep .mat-mdc-tab-group.mat-background-primary .mat-tab-header,
::ng-deep .mat-mdc-tab-nav-bar.mat-background-primary .mat-tab-header {
--mat-tab-header-with-background-background-color: red;
}
So how can I do this? Any way will do – either by extending the ThemePalette or by css.