Angular 材質切換主題時切換A顏色

Question

我已經實現了 Angular Material Dark and Light 主題。 有了這個，我可以使用例如mat-color($primary)根據主題更改 colors 。 這很好用，但現在我需要完全使用不同的顏色。 因此，我希望能夠在深色主題mat-color($primary, 800)中使用具有 800 色調的原色，而不是淺色主題中色調為 200 的原色： mat-color($primary, 200) ) 。

數據表-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);
  }

}

我期待聽到您的解決方案。

編輯

我嘗試的解決方案不起作用，因為 angular 材料在編譯時生成 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，不幸的是它沒有編譯一些 angular 材料依賴項。 但是如果你在本地運行它，你會明白我的意思。

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';