Angular Material 切换主题时切换颜色

Question

我已经实现了 Angular Material Dark and Light 主题。有了这个，我可以根据主题更改颜色，例如使用mat-color($primary)。这很好用，但现在我需要完全使用不同的颜色。因此，我希望能够在深色主题 mat-color($primary, 800) 中使用色调为 800 的原色，而不是使用浅色主题中色调为 200 的原色：mat-color($primary, 200)。

数据表主题.scss

@mixin data-table-color($color-config) {
  $primary: map-get($color-config, primary);

  .data-table {
    background-color: mat-color($primary, 200);
  }

}

data-table.html

<div class="page-container mat-app-background"
     [ngClass]="(isDarkTheme$ | async) ? 'theme-dark' : 'theme-default'">

  <div class="data-table"></div>

</div>

我尝试在自定义组件样式中添加theme-dark 选择器，但没有奏效。

@mixin data-table-color($color-config) {
  $primary: map-get($color-config, primary);

  .theme-default .data-table {
    background-color: mat-color($primary, 200);
  }

  .theme-dark .data-table {
    background-color: mat-color($primary, 800);
  }

}

我期待听到您的解决方案。

编辑

我尝试的解决方案不起作用，因为 angular material 在编译时生成 css。所以它会创建：

.theme-default .data-table {
  background-color: #c5cae9;
}

.theme-dark .data-table {
  background-color: #1a237e;
}

.theme-dark .theme-dark .data-table {
  background-color: #ff6f00;
}

.theme-dark .theme-default .data-table {
  background-color: #ffecb3;
}

这会导致它改变色调，但使用的颜色是浅色原色。

我已经将一个测试项目上传到 Stackblitz，不幸的是它没有编译一些角度材料依赖项。但如果你在本地运行它，你就会明白我的意思。

https://stackblitz.com/github/kdrpt/angular-test-project

Answer 1

您是否在 scss 文件中为您的 mixin 添加了 include 语句？

@include data-table-color($color-config);

只需在您的 scss 文件中添加上述语句（您已在其中定义了 @mixin 数据表颜色）并传递您创建的 $color-config。它对我来说很好用。

Answer 2

查看您的 stackblitz 示例，您似乎忘记在根 styles.scss 中导入您的 app.theme.scss。

@import 'theme/app-theme.scss';