Skip to content

Commit 86a4ba7

Browse files
crisbetommalerba
authored andcommitted
fix(material-experimental/mdc-tabs): incorrect tab text color in dark theme (#18068)
Fixes the MDC-based tabs using the light theme text color for dark themes which has a very low contrast ratio. The issue comes from the fact that MDC's color is inside a variable which we have to override to account for our theming.
1 parent 13ec341 commit 86a4ba7

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/material-experimental/mdc-tabs/_mdc-tabs.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,14 @@
99
// variables to their original values and prevent unintended side effects from using this mixin.
1010
$orig-mdc-tab-text-label-color-active: $mdc-tab-text-label-color-active;
1111
$orig-mdc-tab-icon-color-active: $mdc-tab-icon-color-active;
12+
$orig-mdc-tab-text-label-color-default: $mdc-tab-text-label-color-default;
1213

1314
@include mat-using-mdc-theme($theme) {
15+
// This value is the same as MDC's default, but MDC defines it once inside
16+
// a variables file which means that we can't override it with our own palette.
17+
$mdc-tab-text-label-color-default:
18+
rgba(mdc-theme-prop-value(on-surface), $mdc-tab-text-label-opacity) !global;
19+
1420
@include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active);
1521

1622
.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
@@ -49,6 +55,7 @@
4955
// Restore original values of MDC global variables.
5056
$mdc-tab-text-label-color-active: $orig-mdc-tab-text-label-color-active !global;
5157
$mdc-tab-icon-color-active: $orig-mdc-tab-icon-color-active !global;
58+
$mdc-tab-text-label-color-default: $orig-mdc-tab-text-label-color-default !global;
5259
}
5360

5461
@mixin _mat-mdc-tabs-background($background-color, $foreground-color) {

0 commit comments

Comments
 (0)