AngularJS Material dialog theme setting

less than 1 minute read

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.

  .module('myApp', ['ngMaterial']
  .config(function($mdThemingProvider) {


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) {

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>


Leave a comment