Angular Material change app background and foreground theme

Question

This question regarding setting the background color in Angular Material was posted in 2017 and the answers are outdated. The newest version of Angular Material (12.0.4) seems to have changed the scss mixins a lot.

Before updating to the current version, I was able to implement this answer from the previously-linked question, as so:

// 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: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
);

// Background palette for dark themes.
$mat-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($mat-grey, 900),
  background: #303030,
  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
  card:       map_get($mat-grey, 800),
  dialog:     map_get($mat-grey, 800),
  disabled-button: $white-12-opacity,
  raised-button: map-get($mat-grey, 800),
  focused-button: $white-6-opacity,
  selected-button: map_get($mat-grey, 900),
  selected-disabled-button: map_get($mat-grey, 800),
  disabled-button-toggle: map_get($mat-grey, 1000),
);

// Foreground palette for light themes.
$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),
);

// Foreground palette for dark themes.
$mat-dark-theme-foreground: (
  base:              white,
  divider:           $white-12-opacity,
  dividers:          $white-12-opacity,
  disabled:          rgba(white, 0.3),
  disabled-button:   rgba(white, 0.3),
  disabled-text:     rgba(white, 0.3),
  hint-text:         rgba(white, 0.3),
  secondary-text:    rgba(white, 0.7),
  icon:              white,
  icons:             white,
  text:              white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);

This code needed to be placed before calling mat-light-theme($app-primary, $app-accent, $app-warn).

The variable names seem to have changed to be:

$light-theme-background-palette: (...)
$dark-theme-background-palette: (...)
$light-theme-foreground-palette: (...)
$dark-theme-foreground-palette: (...)

(this is found in the Github repo for Angular Material).

I tried setting these variables before calling @include mat.all-component-themes($app-theme);, but that does not seem to change any of the app background colors.

As per usual, the documentation on the Angular Material page is lacking any information on this.

Any suggestions as how to set the background and foreground variables would be very appreciated.

Answer 1

I had the same problem and worked out a solution. I explain in the comments.

@use 'sass:map';
@use '~@angular/material' as mat;
@include mat.core();

// My version of the dark and light background and foreground palettes
// I copied the ones in the _palette.scss file (the Github repo link you posted) 
// and tweaked the values to my liking.
@use './my-styles' as my;

$my-theme-primary: mat.define-palette(mat.$grey-palette, 900);
$my-theme-accent: mat.define-palette(mat.$orange-palette, 500);
$my-theme-warn: mat.define-palette(mat.$red-palette, 800);

// This function ALWAYS sets the background and foreground using _palette.scss
// It will write over any background and foreground you set before it.
$my-theme: mat.define-dark-theme(
  (
    color: (
      primary: $my-theme-primary,
      accent: $my-theme-accent,
      warn: $my-theme-warn,
    ),
  )
);

// If we look at the result of this debug, we can see the map it created.
// And the structure to copy when setting our background and foreground :)
// Note: the properties are repeated. First inside the color property and then after it. 
// Weird, though there might be a reason. I tested and for now I think 
// only the ones under color are the necessary ones.  
@debug $my-theme;

// Write over background and foreground with my versions. 
$my-theme: map.set(
  $my-theme,
  color,
  background,
  my.$dark-background
);

$my-theme: map.set(
  $my-theme,
  color,
  foreground,
  my.$dark-foreground
);

// Change the repeated ones after color just in case
$my-theme: map.set(
  $my-theme,
  background,
  my.$dark-background
);

$my-theme: map.set(
  $my-theme,
  foreground,
  my.$dark-foreground
);

// use my theme everywhere
@include mat.all-component-colors($my-theme);

You can always make your own theme from scratch, without using the define-dark-theme / define-light-theme functions. These functions add the foreground, background and is-dark maps. So you could just add them without the function. Just make sure it has the same structure these functions return.

You can also change single properties, like the previous solution showed. I'm using map.set() though, cos I like it.

$my-theme: map.set(
  $my-theme,
  color,
  background,
  background, 
  pink
);