how can I change the color of Toast depends on message type in Angular material $mdToast?

Question

While using $mdToast.simple().content("some test") it is showing the toast with black color. how can I change that color to red, yellow and so, depends on the type of the error messages like error, warning and success.

Similar question as this.

Answer 1

There is an easier way by specifying a theme:

$mdToast.simple().content("some test").theme("success-toast") 

And in your CSS:

md-toast.md-success-toast-theme {     background-color: green;     ... } 

You could incorporate your message type to dynamically select a theme.

Update: As Charlie Ng pointed out, to avoid warnings regarding use of an unregistered custom theme register it in your module using the theme provider: $mdThemingProvider.theme("success-toast")

Another update: There was a breaking change created on 2 Dec 2015 (v1.0.0+). You now need to specify:

md-toast.md-success-toast-theme {     .md-toast-content {         background-color: green;         ...     } }