AngularJS Material dialog theme setting

AngularJS Material provide useful functions, especailly theme. Configuring theme is not complicated, but searching on google is not easy. So I wrote a simple sample code below.

AngularJS config

In AngularJS config, you need to configure $mdThemingProvider.

On line #4, name of theme is being configured up by $mdThemingProvider.theme('alert'). ‘alert’ is the name of new theme.

On line #5 ~ 7, colors of ‘alert’ theme are being configured.

angular
  .module('myApp', ['ngMaterial']
  .config(function($mdThemingProvider) {
      $mdThemingProvider.theme('alert')
        .primaryPalette('blue')
        .accentPalette('yellow')
        .warnPalette('red')
  }

Dialog

In this example, only javascript is needed to open dialog.

On line line #8, theme of dialog is configured. ‘alert’ is described on above AngularJS config.

function makeAlert(content) {
    $mdDialog.show(
        $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('CAUTION!')
        .textContent(content)
        .theme('alert')
        .ok('back')
    );
}

html: ng-click

When user clicked Save button, theme configured dialog will be open.

<a class="bluebtn" ng-click="makeAlert('Please fill out the required form.')">Save</a>

reference

• AngularJS Material document: $mdDialog
• AngularJS Material document: Configuring a Theme