angularsassangular-materialangular-upgradeangular17

Angular Material 17 - How to get primary color from theme in Style.scss


I have just upgraded angular app from 16 to 17. Application has custom theme as below.

custTheme.scss

@use '@angular/material' as mat;

@include mat.core();

$pp: mat.define-palette(mat.$indigo-palette);
$primary: mat.get-color-from-palette($pp);
$ap: mat.define-palette(mat.$pink-palette);
$accent: mat.get-color-from-palette($ap);
$wp: mat.define-palette(mat.$red-palette);
$warn: mat.get-color-from-palette($wp);

$theme: mat.define-light-theme((
 color: (
   primary: $pp,
   accent: $ap,
   warn: $wp,
 ),
 typography: mat.define-typography-config(),
));

@include mat.all-component-themes($theme);

this seem to be working fine except when I try to get primary color in Style.scss, it doesn't work

style.scss

import '/custTheme';
background-color: mat-color($primary, darker);

It doesn't seem to recognise mat-color function. what I get in browser is

color: mat-color(#616161, darker);

Can someone please explain what's happening here?

Thanks


Solution

  • We need to import the theme and angular material root import, then we can use mat.get-color-from-palette and input the palette and the shade required and it will work!

    @use '@angular/material' as mat;
    @import './theme.scss';
    
    body {
      font-family: Roboto, 'Helvetica Neue', sans-serif;
      margin: 0;
      padding: 30px;
      background-color: mat.get-color-from-palette($pp, 'darker') !important;
      // background-color: $primary !important;
    }
    
    html,
    body {
      height: 100%;
    }
    

    Stackblitz Demo