title: Create angular material theme with CSS variables
body: <p>I'm working on a project that requires to be themeable at runtime. So I created a theme system that combines SCSS variable with CSS Variables.
  This is how it looks.</p>
  <pre><code>:root {
    --primary-color: 196;
  }
  
  
  // Primary
  $primary-100: hsl(var(--primary-color), 90%, 98%);
  $primary-400: hsl(var(--primary-color), 90%, 65%);
  $primary-main: hsl(var(--primary-color), 90%, 50%);
  $primary-700: hsl(var(--primary-color), 90%, 30%);
  $primary-900: hsl(var(--primary-color), 90%, 10%);
  </code></pre>
  <p>While this works amazingly with my custom components, I'm having a hard time making it work with the Material design theme system.</p>
  <p>My thinking was that I will create the theme as explained in the Angular material docs, and instead of using static colors, I will use my SCSS variables. this is how my theme.scss file looks like.</p>
  <pre><code>@import '~@angular/material/theming';
  @import 'var.scss';
  
  @include mat-core();
  
  $shop-primary: (
    50: $primary-100,
    100: $primary-100,
    200: $primary-200,
    300: $primary-300,
    400: $primary-400,
   // ..... all other colors
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
       // ..... all other colors
    )
  );
  
  
  $shop-app-primary: mat-palette($shop-primary);
  $shop-app-accent:  mat-palette($shop-primary);
  $shop-app-warn: mat-palette($shop-primary);
  
  
  $shop-app-theme: mat-light-theme($shop-app-primary, $shop-app-accent, $shop-app-warn);
  
  @include angular-material-theme($shop-app-theme);
  </code></pre>
  <p>And I'm getting an error:</p>
  <pre><code> Argument `$color` of `rgba($color, $alpha)` must be a color
  </code></pre>
  <p>Presumingly because the Angular Material mixin is expecting a <code>color</code> and not a <code>hsl()</code> value.</p>
  <p><strong>So my question is how would I be able to create a custom material theme with runtime CSS variables?</strong></p>