Angular Material: how to set background-color (wit

Question

I'm developing a pure Material Design application using Angular Material framework.

However, I don't understand how to set containers' background colors (e.g. a login form with a blue background). I could do it using CSS of course but I wonder if there's a built-in directive / theme option to do this.

Answer 1

I am pretty sure I have seen this somewhere in the docs, but I cant find it now. You have to do two different things:

1. set .backgroundPalette('indigo') same way as you set primary theme
2. create container

I have check it on 0.8.1 version of angular-material and it works ok.

Feel free to ask, if you have any additional questions.

For example:

app.config(function ($mdThemingProvider) {
  $mdThemingProvider
    .theme('default')
    .primaryPalette('indigo')
    .accentPalette('pink')
    .warnPalette('red')
    .backgroundPalette('blue-grey');
});

and in your template:

<md-content>
    <p>Some text</p>
</md-content>

Answer 2

You can set any color from the palette with md-colors directive.

https://material.angularjs.org/1.1.4/api/directive/mdColors

The format will be [?theme]-[palette]-[?hue]-[?opacity] where ? means optional parameter.

But from my experience you have to specify the theme even if it's default:

<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>

Answer 3

On a sidenote, ignoring the "without css" part of the question, I see that the Material Angular creators uses plain old css to create a background color, see this codepen (you also find this via the Getting Started section: "Fork a codepen").

html

<div id="content" ng-view flex> </div>

css

.demo #content {
  background-color: rgb(255, 244, 220);
  padding:30px;
  font-weight:600;
  border: 1px solid #aeaeae;
  border-top:none;
}