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

by

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;
        ...
    }
}

Leave a Comment