If you decide to upgrade to @angular/material 7.3.4, CSS Variables should function properly for the most part. The only adjustments needed will be for ripples and any other elements utilizing opacity. In my project, I utilize rgba(), but hsla() should also suffice.

Here is what you need to include:

@function mat-color($palette, $hue: default, $opacity: null) {
    @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
        @return mat-color($palette, default, $hue);
    }

    $color: map-get($palette, $hue);

    @if (type-of($color) != color) {
        @if ($opacity == null){
            @return $color;
        }

        // Modification made to the original function:
        // If the $color does not resolve to a color, we assume it's a CSS variable in the form of rgba(var(--rgba-css-var),a) and replace the 'a' value.
        @return #{str-slice($color, 0, str-index($color, ',')) + $opacity + ')'};
    }

    @return rgba($color, if($opacity == null, opacity($color), $opacity));
}

Place this code directly after:

@import '~@angular/material/theming';

and make sure to define your colors like this:

--primary-color-50-parts: 0,158,224;
// ... all other colors

$color-primary: (
    50: rgba(var(--primary-color-50-parts), 1),
    // ... all other colors
);

If you're defining your colors in the map as shown below:

50: hsla(var(--primary-color), 90%, 98%, 1);

you'll need to change str-index($color, ',') in the sass function to locate the last ',' in the string. Unfortunately, my knowledge of Sass is quite basic, and I'm unsure how to achieve that :/

I have developed a small library called material-theme-creator

This tool allows you to customize the theme of your angular-application or create new themes easily

NPM: https://www.npmjs.com/package/material-theme-creator

DOCS:

npm i material-theme-creator

@import "~material-theme-creator/ngx-mtc";
@import '~@angular/material/theming';

@include mat-core();
@include ngx-mtc-init();

$primary-map: ngx-mtc-create-theme-map('primary');
$accent-map: ngx-mtc-create-theme-map('accent');
$warn-map: ngx-mtc-create-theme-map('warn');

:root {
  --is-dark-theme: 1; // Set to 1 for dark theme, 0 for light theme
  @include ngx-mtc-theme-base(); // Sets base colors

  // Define theme colors
  @include ngx-mtc-create-variables-from-color('primary', #009688, 38%);
  @include ngx-mtc-create-variables-from-color('accent', #2196f3, 57%);
  @include ngx-mtc-create-variables-from-color('warn', #f44336, 62%);
}

// Create Angular Material Theme
@include angular-material-theme(
  ngx-mtc-custom-theme(
    mat-palette($primary-map),
    mat-palette($accent-map),
    mat-palette($warn-map)
  )
);
 

The code snippet for a second theme:

.second-theme {
  --is-dark-theme: 0;
  @include ngx-mtc-update-theme('primary', #142148, 45%);
  @include ngx-mtc-update-theme('accent', #658e14, 50%);
  @include ngx-mtc-update-theme('warn', #750101, 50%);
}

You can use this library with Angular Material, SCSS, or pure CSS

It's quite simple to make this happen right from the start.

To get started, establish a palette and variables for Primary, Accent, and Warn based on the angular palette found in your themes.scss file. Check out this link for guidance.

@import '@angular/material/theming';
@include mat.core();

$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);

$primary-var-palette: (
  50: var(--primary-50, #fafafa),
  100: var(--primary-100, #f5f5f5),
  200: var(--primary-200, #eeeeee),
  300: var(--primary-300, #e0e0e0),
  400: var(--primary-400, #bdbdbd),
  500: var(--primary-500, #9e9e9e),
  600: var(--primary-600, #757575),
  700: var(--primary-700, #616161),
  800: var(--primary-800, #424242),
  900: var(--primary-900, #212121),
  A100: var(--primary-A100, #ffffff),
  A200: var(--primary-A200, #eeeeee),
  A400: var(--primary-A400, #bdbdbd),
  A700: var(--primary-A700, #616161),
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

Next, add the palettes to the theme.

$var-primary: mat.define-palette($primary-var-palette);
$var-accent:  mat.define-palette($accent-var-palette, 400, 900, A100);
$var-warn:    mat.define-palette($warn-var-palette);
$var-theme: mat.define-light-theme($var-primary, $var-accent, $var-warn);
@include mat.all-component-themes($var-theme);

You cannot directly set or change the CSS variable in HTML, so modify the theme dynamically.

document.documentElement.style.setProperty('--primary-50', myPrimary50Value);
...