Angular Material Design theme coloring feature can change the look of your site very easy. Material design have predefined set of colors that can be easily applied on complete theme.

Theme settings should be done in app.config() function, in order to play with theme and coloring we have to include $mdColorPalette and $mdThemingProvider

                    app.config(['$mdThemingProvider','$mdColorPalette',function($mdThemingProvider,$mdColorPalette){

})];

and now inside of this function we can define theme and set it as default:

                    $mdThemingProvider.theme('MyTheme')
			    .primaryPalette('orange') // primary color
			    .accentPalette('red') // accent color
			    .warnPalette('red'); // warning color

and now to set this theme as default we need to call setDefaultTheme method:

                    $mdThemingProvider.setDefaultTheme('MyTheme');

another way to set the default theme is b directive:

                    <body ng-controller="AppCtrl" md-theme-watch="true" md-theme="MyTheme" >

md-theme-watch - will listen for theme changes, so if you define more than one theme it can be set also by using md-theme directive

There is a couple more options that we ca do with theme settings:

                    // set background to dark
$mdThemingProvider.theme('MyTheme')
    .dark(true);

// set color of background
$mdThemingProvider.theme('MyTheme')
     .backgroundPalette(true)
     .dark(themeList[i].dark);


// set font color to light or dark
// text color settings
			var DarkTextColorsArray = [];
			DarkTextColorsArray[1]="rgba(0,0,0,0.87)";
			DarkTextColorsArray[2]="rgba(0,0,0,0.54)";
			DarkTextColorsArray[3]="rgba(0,0,0,0.38)";
			DarkTextColorsArray[4]="rgba(0,0,0,0.12)";
			DarkTextColorsArray['name']="dark";

			var lightTextColorsArray = [];
			lightTextColorsArray[1]="rgba(255,255,255,1.0)";
			lightTextColorsArray[2]="rgba(255,255,255,0.7)";
			lightTextColorsArray[3]="rgba(255,255,255,0.5)";
			lightTextColorsArray[4]="rgba(255,255,255,0.12)";
			lightTextColorsArray['name']="light";
$mdThemingProvider.theme('MyTheme').foregroundPalette = lightTextColorsArray;

Theme can have only following items with different colors

  • A primary palette: colors most widely used across all screens and components.
  • An accent palette: colors used for the floating action button and interactive elements.
  • A warn palette: colors used to convey error state.
  • A foreground palette: colors for text and icons.
  • A background palette: colors used for element backgrounds

 

Using primary/accent color on custom element as background color with opacity / alpha value:

                    <div md-colors="{background: 'myTheme-accent-900-0.43'}"> // [?theme]-[palette]-[?hue]-[?opacity]
md-colors="{background: 'primary-700-0.50'}" // [palette]-[?hue]-[?opacity]