Angular 14 Materiel change background and foreground color in theme

Question

I'm trying to change the background and the forground color of my theme. My primary, accent colors are working, but not the background/foreground.

I created a color-palette.scss and added to angular.json

anguarl.json

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
      "src/assets/css/themes/charity/color-palette.scss",
      "src/styles.scss"
    ],

color-palette.scss

/* http://mcg.mbitson.com/#!?mcgpalette0=%23607d8b */
@use '@angular/material' as mat;

@include mat.core();

$charity-primary-palette: (
  50 : #fce4ec,
  100 : #f8bcd0,
  200 : #f48fb1,
  300 : #f06292,
  400 : #ec407a,
  500 : #e91e63,
  600 : #e61a5b,
  700 : #e31651,
  800 : #df1247,
  900 : #d90a35,
  A100 : #ffffff,
  A200 : #ffd0d8,
  A400 : #ff9dae,
  A700 : #ff8498,
  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,
  )
);


$charity-accent-palette: (
  50 : #eceff1,
  100 : #cfd8dc,
  200 : #b0bec5,
  300 : #90a4ae,
  400 : #78919c,
  500 : #607d8b,
  600 : #587583,
  700 : #4e6a78,
  800 : #44606e,
  900 : #334d5b,
  A100 : #abe1ff,
  A200 : #78ceff,
  A400 : #45bcff,
  A700 : #2bb3ff,
  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,
  )
);


$charity-warn-palette: (
  50 : #fee8e7,
  100 : #fcc7c3,
  200 : #faa19b,
  300 : #f77b72,
  400 : #f65f54,
  500 : #f44336,
  600 : #f33d30,
  700 : #f13429,
  800 : #ef2c22,
  900 : #ec1e16,
  A100 : #ffffff,
  A200 : #ffe9e9,
  A400 : #ffb8b6,
  A700 : #ff9f9c,
  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,
  )
);


$charity-primary: mat.define-palette($charity-primary-palette, 500);
$charity-accent: mat.define-palette($charity-accent-palette, 500);
$charity-warn: mat.define-palette($charity-warn-palette, 500);

$charity-theme: mat.define-light-theme((
  color: (
    primary: $charity-primary,
    accent: $charity-accent,
    warn: $charity-warn,
  ),
));

$charity-background-color: #303030;
$charity-foreground-color: #ffffffb3;

$charity-background: map-get($charity-theme, background);
$charity-background: map_merge($charity-background, (background: $charity-background-color));
$charity-theme: map_merge($charity-theme, (background: $charity-background));

$charity-foreground: map-get($charity-theme, foreground);
$charity-foreground: map_merge($charity-foreground, (foreground: $charity-foreground-color));
$charity-theme: map_merge($charity-theme, (foreground: $charity-foreground));

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($charity-theme);
@include mat.all-component-themes($charity-theme);

and I added also the classes "mat-app-background mat-typography" to my body in index.html

Anyone knows what I doing wrong ?