applyTheme sets the wrong CSS vars, doesn't have any effect in Angular Material 3

[tdcolvin]

I am using Angular Material 3 and I want to set the theme dynamically at runtime, based on user config. I am using applyTheme to do this:

  applyCustomM3Theme() {
    const primaryArgb = argbFromHex(this.primaryColour);
    const theme = themeFromSourceColor(primaryArgb, []);

    applyTheme(theme, { 
      target: document.documentElement, // Apply to the root element
      dark: this.darkTheme
    });

    document.documentElement.style.setProperty('color-scheme', this.darkTheme ? 'dark' : 'light');
  }

But this seems to have no effect on my primary-coloured Angular Material 3 button:

<button mat-flat-button color="primary" (click)="joinRoom()">
Join
</button>

On investigation, it seems to be caused by applyTheme setting CSS variables that have nothing to do with the Material 3 theme. It sets the following:

--md-sys-color-primary: #edb1ff; --md-sys-color-on-primary: #53006f; --md-sys-color-primary-container: #75039c; --md-sys-color-on-primary-container: #f9d8ff; --md-sys-color-secondary: #d5c0d7; --md-sys-color-on-secondary: #3a2c3d; --md-sys-color-secondary-container: #514254; --md-sys-color-on-secondary-container: #f2dcf3; --md-sys-color-tertiary: #f5b7b3; --md-sys-color-on-tertiary: #4c2523; --md-sys-color-tertiary-container: #663b38; --md-sys-color-on-tertiary-container: #ffdad7; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffb4ab; --md-sys-color-background: #1e1b1e; --md-sys-color-on-background: #e8e0e5; --md-sys-color-surface: #1e1b1e; --md-sys-color-on-surface: #e8e0e5; --md-sys-color-surface-variant: #4c444d; --md-sys-color-on-surface-variant: #cfc3cd; --md-sys-color-outline: #988e97; --md-sys-color-outline-variant: #4c444d; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-inverse-surface: #e8e0e5; --md-sys-color-inverse-on-surface: #332f33; --md-sys-color-inverse-primary: #902eb6; color-scheme: dark;

But the button's colour is defined as:

.mat-mdc-unelevated-button:not(:disabled) {
  color: var(--mat-button-filled-label-text-color, var(--mat-sys-on-primary));
  background-color: var(--mat-button-filled-container-color, var(--mat-sys-primary));
}

[Nerwyn]

Those are the Material Design 3 design color tokens as defined by the specification. The only difference between those and the Angular Material 3 ones seems to be md-sys-color vs mat-sys. I'm not sure why Angular Material 3 didn't use the token names from the specification.

FYI applyTheme and everything else in theme_utils use the old deprecated pre-Android 12 scheme and shouldn't be used anymore. This repo doesn't have an updated ease of use helper, but you can instantiate the newer scheme classes and then use it to generate colors which can be applied to your document styles. For reference I've implemented the up to date schemes in one of my projects [1] [2].

This repos npm package is also very out of date. I recommend using this nightly build instead as it doesn't modify the code, just builds it.