bug(tabs): customizable tokens background-color and foreground-color have no effect

Is this a regression?

Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When trying to override tabs background and foreground colors

  @include mat.tabs-overrides(
    (
      background-color: red,
      foreground-color: white,
    )
  );

nothing happens.

Overridden colors take effect only when apply backgroundColor directive on tabs component.

Moreover after applying backgroundColor directive customizable tokens active-label-text-color and active-indicator-color aren't being applied anymore.

  @include mat.tabs-overrides(
    (
      background-color: red,
      foreground-color: white,
      active-label-text-color: green,
      active-indicator-color: green,
    )
  );

In this case using directive color on tabs component solve the problem.

Reproduction

StackBlitz link: https://stackblitz.com/edit/2xvcvpsg
Steps to reproduce:
It's self-explanatory

Expected Behavior

Customizable tokens should apply regardless directives backgroundColor and color

Actual Behavior

Customizable tokens are applied only when directives backgroundColor and color are used on tab component.

Environment

Angular CLI: 19.0.4
Node: 22.11.0
Package Manager: pnpm 9.13.2
OS: linux x64

Angular: 19.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package Version

@angular-devkit/architect 0.1900.4 (cli-only)
@angular-devkit/build-angular 19.0.4
@angular-devkit/core 19.0.4
@angular-devkit/schematics 19.0.4
@angular/cdk 19.0.2
@angular/cli 19.0.4
@angular/material 19.0.2
@angular/material-luxon-adapter 19.0.2
@angular/ssr 19.0.4
@schematics/angular 19.0.4
rxjs 7.8.1
typescript 5.6.3
webpack 5.97.1
zone.js 0.15.0

Verified this is issue is occuring for the tab style override mixin

Overrides work if you add backgroundColor="primary" | "accent" | "warn" to the element.

I have the same problem, materials overrides my styling for example with:

:root {
    @include mat.tabs-overrides((
        active-indicator-color: orange,
        divider-color: red,
        background-color: red,
        foreground-color: red
    ));
}

it shows in browser debugger but overwritten by material itself.
over the var also dont work:

document.documentElement.style.setProperty(--mat-tab-header-active-label-text-color, this.theme.themeColors.primaryColor);
--mat-tab-header-active-label-text-color material overwrites my change. For button everything works fine.

There also other components affected like this:

i think its a css order problem that override has no effect

.mat-mdc-tab .mdc-tab__ripple::before has opacity:0 which is why values of token active-ripple-color is not reflecting.

Overrides work if you add backgroundColor="primary" | "accent" | "warn" to the element.

However backgroundColor on MatTabGroup has been labelled as deprecated according to docs, so it should not be used as the official solution.

We actually need the background color. Not working for me either and UX asked for this. I don't know why it should be deprecated. And where according to docs?
It would be really nice for the official documentation to include for all tokens, the default sys token if that token is not active.

We actually need the background color. Not working for me either and UX asked for this. I don't know why it should be deprecated. And where according to docs? It would be really nice for the official documentation to include for all tokens, the default sys token if that token is not active.

Deprecated label in API tab.

https://v20.material.angular.dev/components/tabs/api

Still seems to be relevant in angular 21.0.0 and by looking at the current documentation.

https://material.angular.dev/components/tabs/styling

Adding any color in the override doesn't seem to change anything. The actual tabs also seem to have a fixed background: none set on their class, so yeah.

Should probably remove the token.

This is still relevant

fix(material/tabs): apply background and foreground token overrides w…

fix(material/tabs): background and foreground color tokens not applied

docs(material/tabs): clarify when background and foreground tokens apply

Navigation Menu

Repository navigation

bug(tabs): customizable tokens background-color and foreground-color have no effect #30186

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Package Version

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug(tabs): customizable tokens background-color and foreground-color have no effect #30186

Description

Is this a regression?

The previous version in which this bug was not present was

Description

Reproduction

Expected Behavior

Actual Behavior

Environment

Package Version

Activity

amysorto commented on Dec 16, 2024

karmasakshi commented on Dec 19, 2024

swordmangofar commented on Dec 19, 2024

AnkitaSood commented on Dec 20, 2024

Anlanther commented on May 3, 2025

RamonaBarbieru commented on Feb 25, 2026

Anlanther commented on Mar 14, 2026

flgraveline commented on Apr 20, 2026

richarddesan commented on Oct 14, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions