White in Angular Material - tip

It is not a matter of black or white or any racial discrimination; it is quite simply a matter of the palette. Not that this indicates any taste or lack of it but because it is a colour, it must exist in some palette.

In Angular Material, the colour 'White' simply does not exist. It does, so to speak, but in the .backgroundTheme and to use it, you need to extend the grey palette (using the Google colour themes).

So, what do you do to colour your background 'white'? You simply create a new background theme and extend the palette whose hue you want to change or use! Like so,

var app = angular.module('modulename', ['ngMaterial', 'ngAnimate', 'ngMessages'])
    .config(function($mdThemingProvider) {
        var background = $mdThemingProvider.extendPalette('grey', {
            'A100': '#FAFAFA' // Not exactly white
            });
        $mdThemingProvider.definePalette('background1', background);
 $mdThemingProvider.theme('newTheme').backgroundPalette('background1').primaryPalette('background1');

});

The newly defined palette now can be used with any other palette like the primaryPalette.

But that is not all for, this, you can find in the issues list of the Material forum. Where it gets tricky is when you need to make AM recognize the colour, which Angular Material simply refuses to.

To make the new palette work for, say, md-toolbar, you need to wrap your md-toolbar in md-content for Angular Material to pick the colour from the theme.