Angular Material 基于主题获取颜色：寻求简洁实现方案

你的现有写法存在一个关键问题：通过mat.get-theme-type获取的主题类型是编译时静态值，无法响应系统prefers-color-scheme的动态切换（你的浅色主题已经用了媒体查询做动态切换）。下面是两种更简洁且适配动态主题的实现方式：

方案1：CSS变量+主题混入（推荐） #

先在主题文件中将主色暴露为全局CSS变量，自定义组件直接复用即可，无需重复解析主题：

修改深色主题文件（dark-theme.scss） #

@use "@angular/material" as mat;

@include mat.core();

$dark-theme: mat.define-dark-theme(
  // 你的主题配置
);

// 把深色主题主色设为全局变量
:root {
  --primary-color: #{mat.get-theme-color($dark-theme, primary, default)};
}

@include mat.core-theme($dark-theme);
@include mat.all-component-themes($dark-theme);

修改浅色主题文件（light-theme.scss） #

@use "@angular/material" as mat;

@include mat.core();

$light-theme: mat.define-light-theme(
  // 你的主题配置
);

@media (prefers-color-scheme: light) {
  // 切换浅色主题时覆盖全局变量
  :root {
    --primary-color: #{mat.get-theme-color($light-theme, primary, default)};
  }
  @include mat.core-color($light-theme);
}

自定义组件样式中直接使用 #

input::placeholder {
  color: var(--primary-color);
}

这种方式的优势：

• 无需在组件样式中引入两个主题文件，代码极简
• 自动响应系统主题切换，无需手动判断
• CSS变量可在全应用复用，维护成本更低

方案2：简化SCSS层面的颜色逻辑 #

如果不想用CSS变量，可以直接对应主题文件的媒体查询逻辑，去掉多余的主题类型判断：

@use "@angular/material" as mat;
@use "../../../styles/light-theme.scss" as light;
@use "../../../styles/dark-theme.scss" as dark;

input::placeholder {
  color: mat.get-theme-color(dark.$dark-theme, primary, default);
}

@media (prefers-color-scheme: light) {
  input::placeholder {
    color: mat.get-theme-color(light.$light-theme, primary, default);
  }
}

内容的提问来源于stack exchange，提问作者Dživo Jelić