CODEWITHSUNDEEP
cssangularsass
JukeboxHero
JukeboxHero

Reputation: 115

Primary color default value after angular update from 13 to 16

I updated my angular (+material-ui) system from 13 to 16. I have one problem: the value of the primary color of my custom theme doesn't work anymore. Its using the default value blue now. I added the "@use "@angular/material" as mat;" and the values for typography and density, because I got some build warnings after I updated the angular version.

Here is my custom-theme.scss:

@use "@angular/material" as mat;

$my-orange: mat.define-palette(
  mat.$pink-palette,
  (
    50: green,
    100: green,
    200: green,
    300: green,
    400: green,
    500: green,
    600: green,
    700: green,
    800: green,
    900: green,
    A100: green,
    A200: green,
    A400: green,
    A700: green,
  )
);

$my-accent: mat.define-palette(
  mat.$blue-grey-palette,
  (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);

$my-primary: mat.define-palette(mat.$pink-palette, 500);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
    ),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

@function theme() {
  @return $my_theme;
}

I import the custom in the styles.scss:

@use "@angular/material" as mat;
@use "./custom-theme";

@include mat.core();

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

When I run npm run start I get the following error messages: 1.

Undefined function.
   ╷
   │ @include mat.all-component-themes(custom-theme.theme());
   │                                   ^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 19:35  root stylesheet

(50: #80ba24, 100: #80ba24, 200: #80ba24, 300: #80ba24, 400: #80ba24, 500: #80ba24, 600: #80ba24, 700: #80ba24, 800: #80ba24, 900: #80ba24, A100: #80ba24, A200: #80ba24, A400: #80ba24, A700: #80ba24) isn't a valid CSS value.
   ╷
   │   @error 'Hue "' + $hue + '" does not exist in palette. Available hues are: ' + map.keys($palette);
   │          ^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/core/theming/_theming.scss 47:10  -get-color-from-palette()
  node_modules/@angular/material/core/theming/_theming.scss 70:14  define-palette()
  src/custom-theme.scss 3:13                                       root stylesheet

Upvotes: 0

Views: 1284

Answers (1)

skouch2022
skouch2022

Reputation: 1161

I notice a few mistakes:

  1. You must not use @include mat.core() more than once according to Angular Material.
  2. The use of @import is discouraged according to Sass. Use @use instead.
  3. You never executed the all-component-themes mixin to apply your custom theme to all components.

_custom-theme.scss

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$pink-palette, 500);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@function theme() {
  @return $my_theme;
}

style.scss

@use '@angular/material' as mat;
@use './custom-theme';

@include mat.core();

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

Upvotes: 1

Related Questions