Angular Material 17：如何从当前主题获取主调色板的使用颜色

核心解决思路 #

Angular Material的主题通过CSS类（如.dark-theme/.light-theme）创建上下文，要动态获取当前主题的主调色板，不能直接依赖全局变量，而是要利用主题上下文内暴露的主题对象提取色彩配置。

具体实现方案 #

1. 规范主题定义结构 #

先确保浅色、深色主题采用统一定义方式，并绑定到对应的CSS类：

// 浅色主题定义
$light-theme: mat.define-light-theme(
    (
        color: (
            primary: $lightIndigo,
            accent: $accent-light,
            warn: $warn-light,
        ),
        typography: $app-typography,
        density: $app-density,
    )
);

// 深色主题定义（你的现有代码）
$dark-theme: mat.define-dark-theme(
    (
        color: (
            primary: $primary-dark,
            accent: $accent-dark,
            warn: $warn-dark,
        ),
        typography: $app-typography,
        density: $app-density,
    )
);

@include mat.core();

// 浅色主题混入
@mixin create-light-theme() {
    @include mat.all-component-colors($light-theme);
}

// 深色主题混入（你的现有代码）
@mixin create-dark-theme() {
    @include mat.all-component-colors($dark-theme);
}

// 绑定主题类
.light-theme {
    @include create-light-theme();
}
.dark-theme {
    @include create-dark-theme();
}

2. 在主题上下文内获取调色板颜色 #

有两种简洁方式实现动态取色：

方式一：使用Angular Material内置函数

利用mat.get-theme-color直接从当前主题上下文提取指定色调：

// 组件样式示例
.my-custom-component {
    @include mat.theme() {
        // 获取当前主题主调色板的darker色调
        color: mat.get-theme-color($mat-theme, primary, 'darker');
    }
}

方式二：自定义混入复用逻辑

如果需要多次使用，可封装成自定义混入：

// 自定义混入：获取当前主题主调色板的指定色调
@mixin themed-primary-color($hue: 'default') {
    $primary-palette: map-get(map-get($mat-theme, color), primary);
    color: mat.get-color-from-palette($primary-palette, $hue);
}

// 组件中使用
.my-custom-component {
    @include mat.theme() {
        @include themed-primary-color('darker');
    }
}

关键注意点 #

• $mat-theme是mat.theme()混入内部自动提供的当前主题对象，无需手动传递。
• 所有需要适配主题的样式必须包裹在@include mat.theme()中，确保处于正确的主题上下文。
• 这种方式会自动适配浅色/深色主题，无需手动判断当前激活的主题类。

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