Multiple Angular Material themes: getting sass map property always returns old, cached, value

Question

For multiple Angular Material themes the idea is to have a scss property which has a different value per theme. I'd like to access this sass map property from within a mixin, as is done in this article: https://sevriukovmk.medium.com/custom-angular-material-multiple-themes-dd7cb31f835

I'm accessing this sass map like this (and assigning to background-color just to test:

@use 'sass:map';

@mixin theme($theme) {
  $foreground: map.get($theme, foreground);
  $secondary-text: map.get($foreground, secondary-text);
  body {
    @debug $secondary-text;
    background-color: $secondary-text !important;
  }
}

Which is working, only it keeps returning an old, cached value (being rgba(0, 0, 0, 0.54)). Funny thing is this value of 0.54 doesn't even exist anymore in the entire codebase, so this appears to be a cached value.

I ran ng cache clean and also disabled angular cache entirely with ng cache disable and ng cache off but the old value keeps returning.

What could be causing this? Which other (sass) cache can i delete?

Answer 1

One needs to call component dependent themes mixins, per theme.

so if this is a theme file:

@use 'sass:map';
@use '@angular/material' as mat;
@use 'src/app/styles/abstracts/theme.functions' as functions;
@use "src/app/styles/theme-dependant.styles" as components;
@import 'src/app/styles/abstracts/theme-variables';

@include mat.core();

$grey-palette: mat.define-palette(mat.$grey-palette);
$grey-theme: functions.mat-create-theme(
  $grey-palette,
  $grey-palette,
  $warn-palette,
  $light-theme-background-palette,
  $light-theme-foreground-palette
);

@include mat.all-component-themes($grey-theme);
@include components.theme($grey-theme); // this was the important part, needs to happen per theme

which can look like this:

@use "../app.style" as app;
@use "./base/typography" as typography;

@mixin theme($theme) {
  @include app.theme($theme);
  @include typography.theme($theme);
}

of which the typography can look like this:

@use 'sass:map';
@use '@angular/material' as mat;
@import 'src/app/styles/abstracts/variables';
@import 'src/app/styles/layout/responsiveness';

@mixin theme($theme) {
  $foreground: map.get($theme, foreground);
  $secondary-text: map.get($foreground, secondary-text);

  $colors: map.get($theme, color);
  $primary: map.get($colors, primary);
  $accent: map.get($colors, accent);
  $primary50: mat.get-color-from-palette($primary, 50);
  $accent50: mat.get-color-from-palette($accent, 50);

  button.mat-mdc-raised-button.mat-primary {
    color: $primary50 !important;
  }
  button.mat-mdc-raised-button.mat-accent {
    color: $accent50 !important;
  }
}

for a full working setup of custom theme-dependant styling, per theme. Hope it helps someone.