Create angular material theme with CSS variables - css

Question

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.
: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%);
While this works amazingly with my custom components, I'm having a hard time making it work with the Material design theme system.
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.
#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);
And I'm getting an error:
Argument `$color` of `rgba($color, $alpha)` must be a color
Presumingly because the Angular Material mixin is expecting a color and not a hsl() value.
So my question is how would I be able to create a custom material theme with runtime CSS variables?

Answer 1

I created a little library to make this a little easier.
You can use it like so:
Install:
npm i angular-material-css-vars -S
Then remove any existing #import '~#angular/material/theming'; from your main stylesheet file.
Add this to your main stylesheet instead:
#import '~angular-material-css-vars/main';
#include initMaterialCssVars();
Change the main theme color like so:
import {MaterialCssVarsService} from 'angular-material-css-vars';
export class SomeComponentOrService {
constructor(public materialCssVarsService: MaterialCssVarsService) {
const hex = '#3f51b5';
this.materialCssVarsService.changePrimaryColor(hex);
}
}

Answer 2

If you upgrade to #angular/material 7.3.4 CSS Variables will mostly work. Only riples and other stuff that uses opacity will need a little fix. I use rgba() for my project, but it should also work for hsla()
Include this:
#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;
}
// Here is the change from the original function:
// If the $color resolved to something different from a color, we assume it is 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));
}
directly after:
#import '~#angular/material/theming';
and 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 define your colors in the map like this:
50: hsla(var(--primary-color), 90%, 98%, 1);
then you need to change str-index($color, ',') in the sass function to something that finds the last ',' in the string. Unfortunatelly my sass knowledge covers only the bare minimum and I don't know how to do that :/

Answer 3

I created a little library - material-theme-creator
You can theming your angular-application or use this approach to create themes
NPM: https://www.npmjs.com/package/material-theme-creator
DOCS: https://artik-man.github.io/material-theme-creator/
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; // Is dark theme? 1 or 0;
#include ngx-mtc-theme-base(); // Creates base colors
// Creates 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%);
}
// Creates Angular Material Theme
#include angular-material-theme(
ngx-mtc-custom-theme(
mat-palette($primary-map),
mat-palette($accent-map),
mat-palette($warn-map)
)
);
The second theme code:
.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 it with Angular Material or SCSS or pure CSS

Answer 4

Sooo... css variables are runtime, not compile time. SASS doesn't know what to do with them. You should be able to refactor your css vars using the ${} interpolation of SCSS and have everything still work the same. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_
$primary-color: 196;
:root {
--primary-color: #{$primary-color};
}
$primary-100: hsl($primary-color, 90%, 98%);