Angular Material2 theming - how to set app background?

Question

I am building an angular2 app using angular material2. I am trying to set the background of my application \"the correct way\", but I can\'t figure out how.

I found

Answer 1

edit: This strategy involves replacing Material functionality. for most cases, I would recommend Jake Stoeffler's answer above.

If you want to set the background colors, you likely want to customize the entire background and foreground palette by emulating the mat-light-theme or mat-dark-theme functions with your own replacement. Your replacement would include your own palettes instead of the mat-light-theme-foreground and background palettes.

example: https://stackblitz.com/edit/angular-material-custom-background?file=theme.scss

I don't know if this method is recommended or officially supported.

Answer 2

I found that the accepted solution does not work for angular 9. But with a little adjustment, you can make it work.

The original question was how to add a background-color variable to a custom material theme. You can do the following.

styles.scss

// Only import this one time in your project
@include mat-core;

@import '~@angular/material/theming';

// Divine what you want the 'default' variables to look like
$primary: mat-palette($mat-grey, 700, 300, 900);
$accent: mat-palette($mat-blue-grey, 400);
$warn: mat-palette($mat-red, 500);

// create a theme. This can be mat-dark-theme or mat-light-theme
$theme: mat-dark-theme(
  $primary,
  $accent,
  $warn
);

/* This is where you create your custom variable map
Make sure that the variable name you chose is one that does not exist in 
the $theme map. In the accept answer, it uses $background but this one is 
already taken. By using for example, 'background-of-main' you are sure 
that there is no collision */
// You can choose any #hexa color code you want
$custom-variables: (background-of-main: #48494d);

// Merge theme and the custom variables together
$theme: map_merge($theme, $custom-variables);

// Expose custom theme globally
@include angular-material-theme($theme);

In the component where you want to use the background variable, you can do the following. I create a separate file for the code below called:

<path-to-component>/custom-background-component-theme.scss

@import '~@angular/material/theming';

@mixin custom-background-component-theme($theme) {
  $background: map-get($theme, background-of-main);

  <css-selector> {
    background-color: $background;
  }

The final step is to call the custom-background-component-theme mixin in the styles.scss. Therefore the final version of the styles.scss is:

styles.scss

// Only import this one time in your project
@include mat-core;

@import '~@angular/material/theming';

// Divine what you want the 'default' styles to look like
$primary: mat-palette($mat-grey, 700, 300, 900);
$accent: mat-palette($mat-blue-grey, 400);
$warn: mat-palette($mat-red, 500);

// create a theme. This can be mat-dark-theme or mat-light-theme
$theme: mat-dark-theme(
  $primary,   
  $accent,
  $warn
);

/* This is where you create your custom variable map
Make sure that the variable name you chose is one that does not exist in 
the $theme map. In the accept answer, it uses $background but this one is 
already taken. By using for example, 'background-of-main' you are 
sure that there is not collision */
// You can choose any #hexa color code you want
$custom-variables: (background-of-main: #48494d);

// Merge theme and the custom variables together
$theme: map_merge($theme, $custom-variables);

// Expose custom theme globally
@include angular-material-theme($theme);

// Import custom mixin
@import './<path-to-component>/custom-background-component-theme.scss';

// Insert custom theme into component styling
@include custom-background-component-theme($theme);

This should do the job!

Answer 3

see : palette theme scss on github Angular (2) Material (2)

Extract of the code:

// 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),
);

Answer 4

There is no way to do it "properly" - only workarounds and hacks. Your theme can define primary, secondary, and warn palettes, but not foreground and background palettes. The probable reason why there isn't a direct/easy way to do this in Angular Material is that according to Material Design you shouldn't do this. Color is meant to be used in a specific way to highlight and style various elements according to your theme, but background and foreground colors for plain content is meant to be either dark or light grey - not colored. If you really need to do this, the other suggestions about redefining the background theme or using your own class should be sufficient.