CODEWITHSUNDEEP
javascriptcssangularjsangular-material
c05mic
c05mic

Reputation: 558

Angular Material theme not changing colors

I am using Angular 1.4.3 and Angular Material 0.10.0 and I am trying to use the build-in theme "green" for my app. However, even after I have done the below, the colors remain to be the default indigo:

 angular.module('myApp','ngMaterial'])
  .config(['$mdThemingProvider', function($mdThemingProvider){
    $mdThemingProvider.theme('green');
    $mdThemingProvider.setDefaultTheme('green');
  }])

It would be helpful if this pen http://codepen.io/anon/pen/pJYJGb could be edited to make the theme work. I could then apply the same for my project.

Upvotes: 4

Views: 2935

Answers (1)

Varun N R
Varun N R

Reputation: 250

The problem with your code is that you cannot specify the color name in the .theme('default').

Here is the code which i have used to change the default color of my md-toolbar, codepen.

We can change the default color of angular-material by using the themeprovider in this way :

.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('green')
    .accentPalette('orange');
});

Hope it helps.

Here is the code which i took from your codepen and edited it:

.config(['$mdThemingProvider', function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('green');

}])

Now it is all green in color.

Upvotes: 3

Related Questions