1

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

数据表-theme.scss

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

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

}

数据表.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);
  }

}

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

编辑

我尝试的解决方案不起作用，因为角度材料在编译时生成 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

4

2 回答 2

0

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

@import 'theme/app-theme.scss';
于 2021-05-31T07:49:03.740 回答
0

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

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

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

于 2021-05-23T18:04:08.483 回答