Components: Getting SASS error when creating new theme

Created on 28 Sep 2016  路  26Comments  路  Source: angular/components

I tried creating a new theme

@import '@angular/material/core/theming/all-theme';

// Include non-theme styles for core.
@include md-core();

// Define a theme.
$primary: md-palette($md-light-blue);
$accent:  md-palette($md-teal, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

// Include all theme styles for the components.
@include angular-material-theme($theme);

It is throwing the following error

home.style.css:8Uncaught Error: Module build failed: 
undefined
              ^
      Argument `$color` of `opacity($color)` must be a color

Backtrace:
    node_modules/@angular/material/core/theming/_theming.scss:55, in function `opacity`
    node_modules/@angular/material/core/theming/_theming.scss:55, in function `if`
    node_modules/@angular/material/core/theming/_theming.scss:55, in function `md-color`
    node_modules/@angular/material/core/theming/_theming.scss:51, in function `md-color`
    node_modules/@angular/material/core/ripple/_ripple.scss:68, in mixin `md-ripple-theme`
    node_modules/@angular/material/core/_core.scss:26, in mixin `md-core-theme`
    node_modules/@angular/material/core/theming/_all-theme.scss:26, in mixin `angular-material-theme`

It is working fine after commenting @include md-core-theme($theme) in _all-theme.scss. But i am not sure it breaks something else.

cannot reproduce
Source
picture devpaulson

Most helpful comment

I had a similar issue, which occurred because when I apply the color, I forgot to use mat-color.

@import '../../../../node_modules/@angular/material/_theming';
@include mat-core();

$podshark-light-primary: mat-palette($mat-grey, A100,A100,A100); //white
$podshark-light-accent:  mat-palette($mat-pink, A200, A100, A400);
$podshark-light-warn:    mat-palette($mat-red);

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

@mixin mat-form-field($theme ) {

  $primary: map-get( $theme, primary);
  $warn: map-get($theme, warn);

  mat-form-field {
    .mat-form-field-underline {
      background-color: $primary; // -> THIS IS WRONG!
      background-color: mat-color($primary); // -> THIS IS RIGHT :)
    }
    .mat-form-field-placeholder {
      color: mat-color($primary);
    }
  }
}

@mixin custom-theme( $theme ) {
  @include mat-form-field( $theme );
}
picture mattiLeBlanc on 29 Oct 2017
👍5

All 26 comments

Same for me.
Not using angular-cli but pur webpack

Module build failed:
undefined
^
(50:#fce4ec,100:#f8bbd0,200:#f48fb1,300:#f06292,400:#ec407a,500:#e91e63,600:#d81b60,700:#c2185b,800:#ad1457,900:#880e4f,A100:#ff80ab,A200:#ff4081,A400:#f50057,A700:#c51162,contrast:(50:rgba(0,0,0,0.87),100:rgba(0,0,0,0.87),200:rgba(0,0,0,0.87),300:rgba(0,
0,0,0.87),400:rgba(0,0,0,0.87),500:#fff,600:#fff,700:rgba(255,255,255,0.87),800:rgba(255,255,255,0.87),900:rgba(255,255,255,0.87),A100:rgba(0,0,0,0.87),A200:#fff,A400:#fff,A700:#fff),default:#e91e63,lighter:#f8bbd0,darker:#c2185b,default-contrast:#fff,lighter-c
ontrast:rgba(0,0,0,0.87),darker-contrast:rgba(255,255,255,0.87),"50-contrast":rgba(0,0,0,0.87),"100-contrast":rgba(0,0,0,0.87),"200-contrast":rgba(0,0,0,0.87),"300-contrast":rgba(0,0,0,0.87),"400-contrast":rgba(0,0,0,0.87),"500-contrast":#fff,"600-contrast":#ff
f,"700-contrast":rgba(255,255,255,0.87),"800-contrast":rgba(255,255,255,0.87),"900-contrast":rgba(255,255,255,0.87),"A100-contrast":rgba(0,0,0,0.87),"A200-contrast":#fff,"A400-contrast":#fff,"A700-contrast":#fff,"contrast-contrast":null) isn't a valid CSS value

in node_modules\@angular\materialcore\theming_theming.scss (line 30, column 14)

s-f-a-g picture s-f-a-g on 28 Sep 2016

What version of node-sass?

jelbourn picture jelbourn on 28 Sep 2016

"node-sass": "~3.10.0"

s-f-a-g picture s-f-a-g on 28 Sep 2016

In fact this is when you try to apply a color that the exception in thrown. Defining it is okay, but if you want to apply a color on something it crashes.

md-toolbar { background-color: $primary; }

By the way, I use intellij and usually it recognize scss functions but while doing all the stuff for theming it doesn't recognize md-palette nor md-light-theme. Just saying if it could be a pist to follow.

s-f-a-g picture s-f-a-g on 28 Sep 2016

@devpaulson I can't reproduce this- do you have a project you can share that reproduces this?

jelbourn picture jelbourn on 4 Nov 2016

I was getting this type of error as well.

@s-f-a-g you would need to use the md-color method like so:
@import '~@angular/material/core/theming/theming';
$bg-primary: md-color($primary, 700, 0.3);
md-toolbar {
background-color: $bg-primary;
}
It was giving the error, because we gave it a palette of colors, not just one color.

danielmhair picture danielmhair on 7 Jan 2017
👍4

Hello,

I reproduced the bug, and in my case, managed to solve it.
My problem was simply that a variable in my background theme was missing.

You introduced recently a new variable in the background theme, raised-button.
I had my own background theme, but I hadn't updated it with this new variable, so the compiler was not working anymore.
Using the backtrace, I checked the source of the error, and found out pretty easily that angular material was trying to find a variable in my theme that was missing.

Kind regards

Here is the backtrace

argument $color of opacity($color) must be a color

Backtrace:
node_modules/@angular/material/core/theming/_theming.scss:55, in function opacity
node_modules/@angular/material/core/theming/_theming.scss:55, in function if
node_modules/@angular/material/core/theming/_theming.scss:55, in function mat-color
node_modules/@angular/material/button/_button-theme.scss:76, in mixin mat-button-theme
node_modules/@angular/material/core/theming/_all-theme.scss:31, in mixin angular-material-theme
src/stylesheets/sass/_theme.scss:110
Line 55 Column 16 node_modules/@angular/material/core/theming/_theming.scss

DenisLaboureyras picture DenisLaboureyras on 16 Feb 2017
👍3

If someone has a hard time figuring out this problem you need to add a new variable to:
$mat-light-theme-background: (...) raised-button: white

// Background palette for light themes.
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
app-bar: map_get($mat-grey, 100),
background: map_get($mat-grey, 50),
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
card: white,
dialog: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
);

aveniri picture aveniri on 19 Feb 2017
👍1

My custom_theme.scss file looks like this and is custom theme is working:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~@angular/material/_theming';

// Include non-theme styles for core.
@include mat-core();

// Define a theme.
$primary: mat-palette($mat-light-blue);
$accent:  mat-palette($mat-teal, A200, A100, A400);

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

// Include all theme styles for the components.
@include angular-material-theme($theme);
Marinski picture Marinski on 20 Apr 2017

So the original post is using md-core(), md-palette(), etc. Marinski's posts and what works for me is using mat-core(), mat-palette(), etc.

Hope that helps.

catacon picture catacon on 20 Apr 2017

I have the same issue

guysenpai picture guysenpai on 15 May 2017
👍4

I use covalent + angular material and I have the error:
https://github.com/Teradata/covalent/issues/690

ranouf picture ranouf on 12 Jun 2017

I got this error because I had incorrectly defined this twice variable and assignment twice in the file theme.scss. So check your SCSS files for any general mishaps.

$qb-md-theme-dark: mat-dark-theme($qb-app-primary, $qb-app-accent, $qb-app-warn);

ImranAhmed picture ImranAhmed on 25 Jul 2017

hello,

i'm getting this issue too

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
undefined
                                ^
      Argument `$color` of `opacity($color)` must be a color

Backtrace:
        node_modules/@angular/material/_theming.scss:1107, in function `opacity`
        node_modules/@angular/material/_theming.scss:1107, in function `if`
        node_modules/@angular/material/_theming.scss:1107, in function `mat-color`
        node_modules/@angular/material/_theming.scss:2750, in function `_mat-progress-bar-buffer`
        node_modules/@angular/material/_theming.scss:2709, in mixin `mat-progress-bar-theme`
        node_modules/@angular/material/_theming.scss:3514, in mixin `angular-material-theme`
        src/styles/_theme-pitzer-orange.scss:16
      in C:\Users\robertlo\Desktop\fury-\node_modules\@angular\material\_theming.scss (line 1107, column 34)
 @ ./src/styles.scss 4:14-187
 @ multi ./~/normalize.css/normalize.css ./src/app/core/highlightjs/github.css ./~/nvd3/build/nv.d3.css ./~/quill/dist/quill.snow.css ./~/angular-calendar/dist/css/angular-calendar.css ./src/styles.scss
rbtlong-pitzer picture rbtlong-pitzer on 3 Aug 2017

it appears to be related to the mat_progress-bar-theme($theme) function in angular-material-theme($theme). if i comment it out everything works.

@mixin angular-material-theme($theme) {
  @include mat-core-theme($theme);
  @include mat-autocomplete-theme($theme);
  @include mat-button-theme($theme);
  @include mat-button-toggle-theme($theme);
  @include mat-card-theme($theme);
  @include mat-checkbox-theme($theme);
  @include mat-chips-theme($theme);
  @include mat-table-theme($theme);
  @include mat-datepicker-theme($theme);
  @include mat-dialog-theme($theme);
  @include mat-expansion-panel-theme($theme);
  @include mat-grid-list-theme($theme);
  @include mat-icon-theme($theme);
  @include mat-input-theme($theme);
  @include mat-list-theme($theme);
  @include mat-menu-theme($theme);
  @include mat-paginator-theme($theme);
  //@include mat-progress-bar-theme($theme);
  @include mat-progress-spinner-theme($theme);
  @include mat-radio-theme($theme);
  @include mat-select-theme($theme);
  @include mat-sidenav-theme($theme);
  @include mat-slide-toggle-theme($theme);
  @include mat-slider-theme($theme);
  @include mat-tabs-theme($theme);
  @include mat-toolbar-theme($theme);
  @include mat-tooltip-theme($theme);
  @include mat-simple-snack-bar-theme($theme);
}
rbtlong-pitzer picture rbtlong-pitzer on 3 Aug 2017
😕1

@rbtlong-pitzer do you think you could put together a minimal reproduction repo?

willshowell picture willshowell on 3 Aug 2017

for some reason, the mat-color function is not returning a color within the scope of mat-progress-bar-theme according to the error

@mixin mat-progress-bar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .mat-progress-bar-background {
    background-image: #{_mat-progress-bar-buffer($primary, lighter)};
  }

  .mat-progress-bar-buffer {
    background-color: mat-color($primary, lighter);
  }

  .mat-progress-bar-fill::after {
    background-color: mat-color($primary);
  }

  .mat-progress-bar.mat-accent {
    .mat-progress-bar-background {
      background-image: #{_mat-progress-bar-buffer($accent, lighter)};
    }

    .mat-progress-bar-buffer {
      background-color: mat-color($accent, lighter);
    }

    .mat-progress-bar-fill::after {
      background-color: mat-color($accent);
    }
  }

  .mat-progress-bar.mat-warn {
    .mat-progress-bar-background {
      background-image: #{_mat-progress-bar-buffer($warn, lighter)};
    }

    .mat-progress-bar-buffer {
      background-color: mat-color($warn, lighter);
    }

    .mat-progress-bar-fill::after {
      background-color: mat-color($warn);
    }
  }
}

@mixin mat-progress-bar-typography($config) { }

// TODO(josephperrott): Find better way to inline svgs.
// In buffer mode a repeated SVG object is used as a background.
// Each of the following defines the SVG object for each of the class defined colors.
//
// The string is a URL encoded version of:
//
// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
//      version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
//      xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
//   <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
// </svg>
@function _mat-progress-bar-buffer($palette, $hue) {
  $color: mat-color($palette, $hue) + '';

  // We also need to escape the hash in hex colors,
  // otherwise IE will throw an XML error.
  @if str-index($color, '#') == 1 {
    $color: '%23' + str-slice($color, 2);
  }

  $result: '' +
    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +
    'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +
    '7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +
    '3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +
    '%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
    $color + '%27%2F%3E%3C%2Fsvg%3E';

  @return url($result);
}
rbtlong-pitzer picture rbtlong-pitzer on 3 Aug 2017

@willshowell turns it was the way i defined $accent as

$accent: mat-palette($mat-deep-orange, A400, A50, A900);

it worked in an earlier version, but doesn't seem to work anymore. i left it like this . . .

$accent: mat-palette($mat-deep-orange, A400);

seems to be ok now

rbtlong-pitzer picture rbtlong-pitzer on 3 Aug 2017
👍1

@rbtlong-pitzer A50 and A900 are invalid colors. It probably started failing after 2481ee39 when the lighter hues started being used.

https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss#L511-L542


Color Palette from the Spec

screen shot 2017-08-03 at 3 13 00 pm

willshowell picture willshowell on 3 Aug 2017

@willshowell thanks, this was it.

rbtlong-pitzer picture rbtlong-pitzer on 3 Aug 2017

In my case, I have some custom colors setup and replace the $mat-light-theme-foreground/background maps. Then I build a theme around the updated ones, I ran into this error again as two new properties have been added:

$mat-light-theme-foreground: (
  base:              black,
  divider:           $black-12-opacity,
  dividers:          $black-12-opacity,
  disabled:          rgba(black, 0.38),
  disabled-button:   rgba(black, 0.38),
  disabled-text:     rgba(black, 0.38),
  hint-text:         rgba(black, 0.38),
  secondary-text:    rgba(black, 0.54),
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  **slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),**
);

Rather than add those two new lines to the map I was creating, looked at a different way of overriding map properties. SO led me to this function:

//A function for filling in a map variable with default values
@function defaultTo($mapVariable, $defaultMap){

//if it's a map, treat each setting in the map seperately
@if (type-of($defaultMap) == 'map' ){

    $finalParams: $mapVariable;

    // We iterate over each property of the defaultMap
    @each $key, $value in $defaultMap {
            // If the variable map does not have the associative key
        @if (not map-has-key($mapVariable, $key)) {

            // add it to finalParams
            $finalParams: map-merge($finalParams, ($key : $value));

        }
    }

    @return $finalParams;

   //Throw an error message if not a map
   } @else {
     @error 'The defaultTo function only works for Sass maps';
   }
}

now my $custom-light-theme-background map looks like:

$custom-light-theme-background: defaultTo((
    status-bar: #c5c5c5,
    app-bar: #c5c5c5
), $mat-light-theme-background);

Now if anymore properties get added to that map, I should be fairly safe in the future.

YMV, but hopefully this will help someone else out there!

As it turns out since maps2 takes precedence over map1 in the map-merge() function, you could also just do something like this:

$custom-light-theme-background: map-merge($mat-light-theme-background, ( app-bar: #c5c5c5));

If you do not want to add any new properties to the map.

victorprocure picture victorprocure on 11 Aug 2017

I had a similar issue, my definition was:
$custom-theme-primary: mat-palette($mat-grey, 0);
$custom-theme-accent: mat-palette($mat-grey, 400);
$custom-theme-warn: mat-palette($mat-red, 400, 200, 800);
$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

When I've changed the first line to:
$custom-theme-primary: mat-palette($mat-grey, 100);
things started to work and error was gone.

xagon picture xagon on 29 Aug 2017

I had a similar issue, which occurred because when I apply the color, I forgot to use mat-color.

@import '../../../../node_modules/@angular/material/_theming';
@include mat-core();

$podshark-light-primary: mat-palette($mat-grey, A100,A100,A100); //white
$podshark-light-accent:  mat-palette($mat-pink, A200, A100, A400);
$podshark-light-warn:    mat-palette($mat-red);

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

@mixin mat-form-field($theme ) {

  $primary: map-get( $theme, primary);
  $warn: map-get($theme, warn);

  mat-form-field {
    .mat-form-field-underline {
      background-color: $primary; // -> THIS IS WRONG!
      background-color: mat-color($primary); // -> THIS IS RIGHT :)
    }
    .mat-form-field-placeholder {
      color: mat-color($primary);
    }
  }
}

@mixin custom-theme( $theme ) {
  @include mat-form-field( $theme );
}
mattiLeBlanc picture mattiLeBlanc on 29 Oct 2017
👍5

I fixed this by changing the A100 (and others) and simply removed the A and it seemed to work and apply to the whole theme and no opacity or map key error comes up. I also added the whole list of themes. Below is my working theme.

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

@include mat-core();

$flight-app-primary: mat-palette($mat-blue-grey, 500);
$flight-app-accent: mat-palette($mat-yellow, 600, 100, 500);
$flight-app-warn: mat-palette($mat-deep-orange, 500);

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

@include mat-core-theme($theme);
@include mat-autocomplete-theme($theme);
@include mat-button-theme($theme);
@include mat-button-toggle-theme($theme);
@include mat-card-theme($theme);
@include mat-checkbox-theme($theme);
@include mat-chips-theme($theme);
@include mat-table-theme($theme);
@include mat-datepicker-theme($theme);
@include mat-dialog-theme($theme);
@include mat-divider-theme($theme);
@include mat-expansion-panel-theme($theme);
@include mat-form-field-theme($theme);
@include mat-grid-list-theme($theme);
@include mat-icon-theme($theme);
@include mat-input-theme($theme);
@include mat-list-theme($theme);
@include mat-menu-theme($theme);
@include mat-paginator-theme($theme);
@include mat-progress-bar-theme($theme);
@include mat-progress-spinner-theme($theme);
@include mat-radio-theme($theme);
@include mat-select-theme($theme);
@include mat-sidenav-theme($theme);
@include mat-slide-toggle-theme($theme);
@include mat-slider-theme($theme);
@include mat-stepper-theme($theme);
@include mat-tabs-theme($theme);
@include mat-toolbar-theme($theme);
@include mat-tooltip-theme($theme);
@include mat-snack-bar-theme($theme);
'

PragramingFleur picture PragramingFleur on 23 Mar 2018

@mattiLeBlanc great catch, solved it for me

cice picture cice on 10 May 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

constantinlucian picture constantinlucian  路  3Comments
alanpurple picture alanpurple  路  3Comments
dzrust picture dzrust  路  3Comments
vitaly-t picture vitaly-t  路  3Comments
RoxKilly picture RoxKilly  路  3Comments