Angular Material 17：如何修改主题加深非活跃MatTabs文本颜色？

我该如何修改主题配置，让非活跃标签页（MatTabs）的文本颜色更深？

我在调色板定义中找不到这些非活跃标签页的颜色值，并且希望修改能作用于全局主题，而非单个组件实例。

以下是我当前theme.scss文件的内容：

@use '@angular/material' as mat;

@include mat.core();

$red-palette: (
        50: #ffebee,
        100: #ffcdd2,
        200: #ef9a9a,
        300: #e57373,
        400: #ef5350,
        500: #f44336,
        600: #e53935,
        700: #d32f2f,
        800: #c62828,
        900: #b71c1c,
        A100: #ff8a80,
        A200: #ff5252,
        A400: #ff1744,
        A700: #d50000,
        contrast: (
                50: rgba(black, 0.87),
                100: rgba(black, 0.87),
                200: rgba(black, 0.87),
                300: rgba(black, 0.87),
                400: white,
                500: white,
                600: white,
                700: white,
                800: white,
                900: white,
                A100: rgba(black, 0.87),
                A200: white,
                A400: white,
                A700: white,
        )
);

$gray-palette: (
        50: #fafafa,
        100: #f5f5f5,
        200: #eeeeee,
        300: #e0e0e0,
        400: #bdbdbd,
        500: #9e9e9e,
        600: #757575,
        700: #616161,
        800: #424242,
        900: #212121,
        A100: #d5d5d5,
        A200: #aaaaaa,
        A400: #303030,
        A700: #616161,
        contrast: (
                50: rgba(black, 0.87),
                100: rgba(black, 0.87),
                200: rgba(black, 0.87),
                300: rgba(black, 0.87),
                400: rgba(black, 0.87),
                500: rgba(black, 0.87),
                600: white,
                700: white,
                800: white,
                900: white,
                A100: rgba(black, 0.87),
                A200: rgba(black, 0.87),
                A400: white,
                A700: white,
        )
);


$my-primary: mat.define-palette($red-palette);
$my-accent: mat.define-palette($gray-palette);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
        color: (
                primary: $my-primary,
                accent: $my-accent,
                warn: $my-warn,
        ),
        typography: mat.define-typography-config(),
        density: 0,
));

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);

// Emit styles for MatButton based on `$my-theme`. Because the configuration
// passed to `define-light-theme` omits typography, `button-theme` will not
// emit any typography styles.
@include mat.tabs-theme($my-theme);

// Include the theme mixins for other components you use here.

解决方案 #

Angular Material的非活跃标签文本颜色默认继承自主题的文本次要颜色，你可以通过两种方式实现全局修改：

方法1：全局修改主题文本次要颜色（推荐） #

在定义主题时添加text配置项，指定secondary的颜色值，所有使用次要文本颜色的组件（包括非活跃Tabs）都会同步生效：

$my-theme: mat.define-light-theme((
        color: (
                primary: $my-primary,
                accent: $my-accent,
                warn: $my-warn,
                // 添加文本颜色配置，将次要文本改为更深的颜色
                text: (
                        secondary: #333333 // 可替换为rgba(black, 0.7)或调色板变量如$gray-palette[700]
                )
        ),
        typography: mat.define-typography-config(),
        density: 0,
));

方法2：仅针对Tabs组件修改非活跃文本颜色 #

如果不想影响全局次要文本颜色，可自定义Tabs主题混合器，精准覆盖非活跃标签的颜色：

// 保留原主题定义
$my-theme: mat.define-light-theme((
        color: (
                primary: $my-primary,
                accent: $my-accent,
                warn: $my-warn,
        ),
        typography: mat.define-typography-config(),
        density: 0,
));

// 自定义Tabs主题混合器
@mixin custom-tabs-theme($theme) {
  // 自定义非活跃标签文本颜色
  $inactive-color: #333333;

  .mat-mdc-tab-label:not(.mdc-tab--active) {
    color: $inactive-color;
  }
}

// 先引入默认Tabs主题，再应用自定义样式
@include mat.tabs-theme($my-theme);
@include custom-tabs-theme($my-theme);

注意点 #

• 方法1全局生效，适合需要统一调整所有次要文本颜色的场景；方法2仅作用于Tabs组件，更灵活。
• 颜色值建议使用你定义的调色板变量，保持主题风格统一。

内容的提问来源于stack exchange，提问作者Antony