How can I use custom material colors outside the node_modules theme file?

Question

I added a custom material theme with new primary/accent/warn colors I defined myself in node_modules/angular/material/_theming.scss. Can I declare my new colors elsewhere so I can push theme on Github for my coworkers ?

The main problem is that circle CI test won't pass until colors variables are part of a node_modules file.

Here is my theme.scss file

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

$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);

$blockframes-theme: mat-light-theme(
  $blockframes-theme-primary,
  $blockframes-theme-accent,
  $blockframes-theme-warn
);

theme.scss is imported into my global style.scss like this

@import "theme.scss";
@include mat-core();
@include angular-material-theme($blockframes-theme);
@import '~@angular/material/theming';

...

My custom colors are declared this way in _theming.scss

$mat-bf-purple: (
  50: #ece0fd,
  100: #d0b3fa,
  200: #b080f6,
  300: #904df2,
  400: #7926f0,
  500: #6100ed,
  600: #5900eb,
  700: #4f00e8,
  800: #4500e5,
  900: #3300e0,
  A100: #ffffff,
  A200: #dbd4ff,
  A400: #b1a1ff,
  A700: #9b88ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$mat-bf-crimson: (
  50: #fde8eb,
  100: #fbc5ce,
  200: #f99eae,
  300: #f6778d,
  400: #f45974,
  500: #f23c5c,
  600: #f03654,
  700: #ee2e4a,
  800: #ec2741,
  900: #e81a30,
  A100: #ffffff,
  A200: #ffe8ea,
  A400: #ffb5bc,
  A700: #ff9ca4,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

Thanks in advance for your help and advices.

Alvard Alvard · Accepted Answer · 2019-04-16T12:24:45

Well I got a really simple solution to my own problem, just declare the new colors at the beginning of theme.scss file and it will do the job.

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

$mat-bf-purple: (
  50: #ece0fd,
  100: #d0b3fa,
  200: #b080f6,
  300: #904df2,
  400: #7926f0,
  500: #6100ed,
  600: #5900eb,
  700: #4f00e8,
  800: #4500e5,
  900: #3300e0,
  A100: #ffffff,
  A200: #dbd4ff,
  A400: #b1a1ff,
  A700: #9b88ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$mat-bf-crimson: (
  50: #fde8eb,
  100: #fbc5ce,
  200: #f99eae,
  300: #f6778d,
  400: #f45974,
  500: #f23c5c,
  600: #f03654,
  700: #ee2e4a,
  800: #ec2741,
  900: #e81a30,
  A100: #ffffff,
  A200: #ffe8ea,
  A400: #ffb5bc,
  A700: #ff9ca4,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

$blockframes-theme-primary: mat-palette($mat-bf-purple);
$blockframes-theme-accent: mat-palette($mat-amber);
$blockframes-theme-warn: mat-palette($mat-bf-crimson);

$blockframes-theme: mat-light-theme(
  $blockframes-theme-primary,
  $blockframes-theme-accent,
  $blockframes-theme-warn
);

How can I use custom material colors outside the node_modules theme file?

1 Answers