search

Home  >  Q&A  >  body text

SassError: $map: null is not a map - Angular custom theme problem solving

<p>I created the following custom theme for my Angular project: </p> <pre class="brush:php;toolbar:false;">@use '@angular/material' as mat; /* You can add global styles in this file or import other style files */ @include mat.core(); $f-brand: ( 50 : #e0f2f1, 100 : #b3e0db, 200 : #80cbc4, 300 : #4db6ac, 400 : #26a69a, 500 : #009688, 600 : #008e80, 700 : #008375, 800 : #00796b, 900 : #006858, A100: #97ffec, A200: #64ffe3, A400: #31ffda, A700: #18ffd5, contrast: ( 50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400: #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000, ) ); $primary: mat.define-palette($f-brand); $theme: mat.define-light-theme($primary); @include mat.all-component-themes($theme);</pre> <p>I also added the custom theme to my general styles.css file, but when I run "ng serve" I get the following error: </p> <pre class="brush:php;toolbar:false;">SassError: $map: null is not a map. ╷ 9 │ $foreground-base: map.get($foreground, base); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@angular\material\core\ripple\_ripple-theme.scss 9:21 color() node_modules\@angular\material\core\ripple\_ripple-theme.scss 30:7 @content node_modules\@angular\material\core\theming\_theming.scss 376:3 private-check-duplicate-theme-styles() node_modules\@angular\material\core\ripple\_ripple-theme.scss 27:3 theme() node_modules\@angular\material\core\_core-theme.scss 48:5 @content node_modules\@angular\material\core\theming\_theming.scss 376:3 private-check-duplicate-theme-styles() node_modules\@angular\material\core\_core-theme.scss 47:3 theme() node_modules\@angular\material\core\theming\_all-theme.scss 43:5 @content node_modules\@angular\material\core\theming\_theming.scss 376:3 private-check-duplicate-theme-styles() node_modules\@angular\material\core\theming\_all-theme.scss 42:3 all-component-themes() src\styles-f-theme.scss 44:1 root stylesheet</pre> <p> By searching online, I found that "map.get" now seems to be "map-get". Unfortunately, I don't know how to fix this. </p> <p>The Angular version used in my project is "14.0.5" and the Angular Material version is "14.0.4". </p>
P粉006540600P粉006540600487 days ago563

reply all(1)I'll reply

  • P粉741678385

    P粉7416783852023-08-26 09:04:15

    The reason why you get this error is because building a theme requires two color palettes: the main color and the accent color.

    Add a new color palette or make your main color an accent color:

    $theme: mat.define-light-theme($primary, $primary);

    reply
    0
  • Cancelreply