Angular 材质切换主题时切换A颜色

Question

I have implemented Angular Material Dark and Light theme. With this I can change the colors based on the theme using for example mat-color($primary) . This works fine but now I need to use a different color altogether. So instead of the primary color with hue 200 in light theme: mat-color($primary, 200) , I want to be able to use primary color with an 800 hue in dark theme mat-color($primary, 800) .

data-table-theme.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>

I tried adding theme-dark selector in custom component style but that didn't work.

@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);
  }

}

I look forward to hearing your solutions.

Edit

The solution I tried doesn't work because angular material generates the css at compile time. So it will then create:

.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;
}

This causes it to change hue but the color used is the light primary color.

I have uploaded a test project to Stackblitz, which unfortunately doesn't compile some of the angular material dependencies. But if you run it locally you will see what I mean.

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

Answer 1

Have you added the include statement for you mixin in your scss file?

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

Just add the above statement in your scss file (where you have defined your @mixin data-table-color) and pass the $color-config that you have created. It is working fine for me.

Answer 2

Looking in your stackblitz example, it seems you forgot to import your app.theme.scss in the root styles.scss .

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