How Make The Whole Page With White Background Angular

Changing the background color in an Angular Material theme

If you're already familiar with Angular Material themes and don't need "background" info 🙄, jump right to this gist or scroll down to the bit where the modify-background helper function is defined.

I recently did some redesign work on my Angular Cloth theme. It was a pretty meaning overhaul, changing the entire color scheme. Previously I had what I'd describe as a "carrot orange and lime green" colour scheme. 🤢

Truthfully, I was never very happy with the orange and green. For the modify, I wanted to get with a cleaner, more subdued, and more cohesive set of colors.

Hither is a before and after:

I used https://coolors.co/ to generate a handful of color schemes. In one case I had some candidate themes to evaluate, I used http://mcg.mbitson.com/ to turn each color into an Athwart Material palette.

If you lot're familiar with custom themes in Athwart Material you probably know that making a new primary and accent palette is non too difficult. This procedure goes something similar this:

Define palettes and initial theme

Smash nosotros have a new color theme. That was the easy part. Then I decided I wanted a very light grayness (or is it lite grayness?) instead of a white groundwork. This is where it got difficult.

I had assumed Angular Material would provide a mechanism to modify the background color of a theme. I thought it would be as simple as specifying a background color, or perchance a background palette and having Athwart have care of the residual. Wrong. Then incorrect.

Athwart Material provides no mode to change the background color of a theme.

To be fair, the documentation says as much:

The option of a low-cal versus a dark theme determines the background and foreground colors used throughout the components.

While I understand that Material is a specification and has rules to follow, information technology simply seems empty-headed that Angular Fabric library would exist and so strict about the background color. Seriously, every Athwart Material website can use one of 2 background colors?

Thankfully, similar annihilation in software development, how to become around this has been asked on StackOverflow.

Unfortunately, even the answers on StackOverflow are a niggling dated, however. I really wanted to change the background colour so I dug in to figure out how background colors work in Athwart Material.

Over the years, there have also been some requests on the Angular Material repo for the library to betrayal a machinery to supply a background or foreground colour palette. See here, here, and here. It's like people want to choose a groundwork colour or something. 😅

All of the StackOverflow questions and GitHub problems point in ane direction:

Employ mat.ascertain-light-theme to create a custom theme, then use map-merge to overwrite the background palette with your own custom background palette.

We already used mat.define-light-theme above to generate a theme. Now, how practise nosotros overwrite the groundwork palette? Let's look at the format of the theme we get from mat.ascertain-light-theme . Information technology returns a map of the class:

Format of Material theme object

Angular Material somewhat recently changed to returning the theme parts nested in a color object. However, for legacy reasons, nosotros also get the theme'due south palettes outside of the color object. We need to replace the background palette for both of these. To practise this, I divers a trivial helper function for myself:

Note: this helper method takes a background color and merges it into each of the background palettes defined in the initial theme. In addition, there a couple minor odds and ends.

We must define a mat-app-background class in the global styles and assign it to the body tag in the index.html file. This class should ready the background color to our custom background color.

Lastly, I have found a few components where my custom background colour is not being practical properly then I have resorted to calculation global style overrides to Material classes as these come up up.

Global overrides for background colour

A gist complete with all of the above can exist found here. Have fun!