Changing the Angular Material Theme Background Color

Image by webstrategics0 from Pixabay

Scenario

We have created a new Angular Material Light Theme and we wish to change the background color theme property to red.

Approach

In order to fully demo this first lets define a theme.

@use 'sass:map';
$primary-palette: mat.define-palette(mat.$indigo-palette);
$accent-palette: mat.define-palette(mat.$cyan-palette);
$warn-palette: mat.define-palette(mat.$orange-palette);
$theme: mat.define-light-theme(
(
   color: (
      primary: $primary-palette,
      accent: $primary-palette,
      warn: $primary-palette,
   ),
));

Then we will grab the background map from the theme.

$background: map.get($theme, background);

And log the background color just to see what it is currently set to.

$background-color: map-get($background, background);
@debug $background-color;// #fafafa

Lets change it to red. We will merge a new background value into the background map.

$background: map.merge(
    $background,
    (
        background: red,
    )
);

We then use Firefly Semantics Sass Logger to log the new map.

@fireflysemantics/sass-logger

@debug logger.pretty-map($background);

We can see that the background has been changed to red.

status-bar: #e0e0e0,
app-bar: #f5f5f5,
background: red,
hover: rgba(0, 0, 0, 0.04),
card: white,
dialog: white,
disabled-button: rgba(0, 0, 0, 0.12),
raised-button: white,
focused-button: rgba(0, 0, 0, 0.12),
selected-button: #e0e0e0,
selected-disabled-button: #bdbdbd,
disabled-button-toggle: #eeeeee,
unselected-chip: #e0e0e0,
disabled-list-option: #eeeeee,
tooltip: #616161,

We then merge this map back into the theme.

$theme: map.merge($theme, $background);

Now if we pretty print the entire theme we see that the background map contains the red background (Scroll to the end).

Demo