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.