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.
@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).
color: (
primary: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
A100: #8c9eff,
A200: #536dfe,
A400: #3d5afe,
A700: #304ffe,
contrast: (
50: rgba(0, 0, 0, 0.87),
100: rgba(0, 0, 0, 0.87),
200: rgba(0, 0, 0, 0.87),
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: rgba(0, 0, 0, 0.87),
A200: white,
A400: white,
A700: white,
),
default: #3f51b5,
lighter: #c5cae9,
darker: #303f9f,
text: #3f51b5,
default-contrast: white,
lighter-contrast: rgba(0, 0, 0, 0.87),
darker-contrast: white,
50-contrast: rgba(0, 0, 0, 0.87),
100-contrast: rgba(0, 0, 0, 0.87),
200-contrast: rgba(0, 0, 0, 0.87),
300-contrast: white,
400-contrast: white,
500-contrast: white,
600-contrast: white,
700-contrast: white,
800-contrast: white,
900-contrast: white,
A100-contrast: rgba(0, 0, 0, 0.87),
A200-contrast: white,
A400-contrast: white,
A700-contrast: white,
contrast-contrast: ,
),
accent: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
A100: #8c9eff,
A200: #536dfe,
A400: #3d5afe,
A700: #304ffe,
contrast: (
50: rgba(0, 0, 0, 0.87),
100: rgba(0, 0, 0, 0.87),
200: rgba(0, 0, 0, 0.87),
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: rgba(0, 0, 0, 0.87),
A200: white,
A400: white,
A700: white,
),
default: #3f51b5,
lighter: #c5cae9,
darker: #303f9f,
text: #3f51b5,
default-contrast: white,
lighter-contrast: rgba(0, 0, 0, 0.87),
darker-contrast: white,
50-contrast: rgba(0, 0, 0, 0.87),
100-contrast: rgba(0, 0, 0, 0.87),
200-contrast: rgba(0, 0, 0, 0.87),
300-contrast: white,
400-contrast: white,
500-contrast: white,
600-contrast: white,
700-contrast: white,
800-contrast: white,
900-contrast: white,
A100-contrast: rgba(0, 0, 0, 0.87),
A200-contrast: white,
A400-contrast: white,
A700-contrast: white,
contrast-contrast: ,
),
warn: (
50: #fff3e0,
100: #ffe0b2,
200: #ffcc80,
300: #ffb74d,
400: #ffa726,
500: #ff9800,
600: #fb8c00,
700: #f57c00,
800: #ef6c00,
900: #e65100,
A100: #ffd180,
A200: #ffab40,
A400: #ff9100,
A700: #ff6d00,
contrast: (
50: rgba(0, 0, 0, 0.87),
100: rgba(0, 0, 0, 0.87),
200: rgba(0, 0, 0, 0.87),
300: rgba(0, 0, 0, 0.87),
400: rgba(0, 0, 0, 0.87),
500: rgba(0, 0, 0, 0.87),
600: rgba(0, 0, 0, 0.87),
700: rgba(0, 0, 0, 0.87),
800: white,
900: white,
A100: rgba(0, 0, 0, 0.87),
A200: rgba(0, 0, 0, 0.87),
A400: rgba(0, 0, 0, 0.87),
A700: black,
),
default: #ff9800,
lighter: #ffe0b2,
darker: #f57c00,
text: #ff9800,
default-contrast: rgba(0, 0, 0, 0.87),
lighter-contrast: rgba(0, 0, 0, 0.87),
darker-contrast: rgba(0, 0, 0, 0.87),
50-contrast: rgba(0, 0, 0, 0.87),
100-contrast: rgba(0, 0, 0, 0.87),
200-contrast: rgba(0, 0, 0, 0.87),
300-contrast: rgba(0, 0, 0, 0.87),
400-contrast: rgba(0, 0, 0, 0.87),
500-contrast: rgba(0, 0, 0, 0.87),
600-contrast: rgba(0, 0, 0, 0.87),
700-contrast: rgba(0, 0, 0, 0.87),
800-contrast: white,
900-contrast: white,
A100-contrast: rgba(0, 0, 0, 0.87),
A200-contrast: rgba(0, 0, 0, 0.87),
A400-contrast: rgba(0, 0, 0, 0.87),
A700-contrast: black,
contrast-contrast: ,
),
is-dark: false,
foreground: (
base: black,
divider: rgba(0, 0, 0, 0.12),
dividers: rgba(0, 0, 0, 0.12),
disabled: rgba(0, 0, 0, 0.38),
disabled-button: rgba(0, 0, 0, 0.26),
disabled-text: rgba(0, 0, 0, 0.38),
elevation: black,
hint-text: rgba(0, 0, 0, 0.38),
secondary-text: rgba(0, 0, 0, 0.54),
icon: rgba(0, 0, 0, 0.54),
icons: rgba(0, 0, 0, 0.54),
text: rgba(0, 0, 0, 0.87),
slider-min: rgba(0, 0, 0, 0.87),
slider-off: rgba(0, 0, 0, 0.26),
slider-off-active: rgba(0, 0, 0, 0.38),
),
background: (
status-bar: #e0e0e0,
app-bar: #f5f5f5,
background: #fafafa,
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,
)