In most applications, declaring multiple themes is not necessary. Instead, you should configure the default theme for your needs. If you need multiple themes in a single application, Angular Material does provide tools to make this possible.

Registering another theme

Use the $mdThemingProvider to register a second theme within your application. By default all themes will inherit from the default theme. Once you have registered the second theme, you can configure it with the same chainable interface used on the default theme.

angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('altTheme') .primaryPalette('purple') // specify primary color, all // other color intentions will be inherited // from default });

Using another theme

Via the Provider

You can change the default theme to be used across your entire application using the provider:

$mdThemingProvider.setDefaultTheme('altTheme');

Via a Directive

Angular Material also exposes the md-theme directive which will set the theme on an element and all child elements.

In the following example, the application will use the default theme, while the second child div will use the altTheme. This allows you to theme different parts of your application differently.

I will be blue (by default)

I will be purple (altTheme)

Dynamic Themes

By default, to save on performance, theming directives will not watch md-theme for changes. If you need themes to be dynamically modified, you will need to use the md-theme-watch directive.

Default altTheme

I'm dynamic

If you need this behavior in your entire application (ie. on all md-theme directives) you can use the $mdThemingProvider to enable it.

$mdThemingProvider.alwaysWatchTheme(true);