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

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.

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

Solution 2:

EDIT:
For a correct implementation, please use rlay3s solution below :)!

OUTDATED:
I had problems displaying custom text with jhblacklocks solution, so I decided to do it like this using 'template':

var displayToast = function(type, msg) {

    $mdToast.show({
        template: '<md-toast class="md-toast ' + type +'">' + msg + '</md-toast>',
        hideDelay: 6000,
        position: 'bottom right'
    });
};

I also added the different types in my .css file:

.md-toast.error {
    background-color: red;
}

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

Don't know if this is the most beautiful approach, but I don't need a template files for each dialog type and displaying custom text is really easy.

Solution 3:

register themes:

$mdThemingProvider.theme("success-toast");
$mdThemingProvider.theme("error-toast");

add css:

md-toast.md-error-toast-theme div.md-toast-content{
    color: white !important;
    background-color: red !important;
}

md-toast.md-success-toast-theme div.md-toast-content{
    color: white !important;
    background-color: green !important;
}

use:

$mdToast.show(
    $mdToast.simple()
        .content(message)
        .hideDelay(2000)
        .position('bottom right')
        .theme(type + "-toast")
);

Solution 4:

You can see on this link that you cannot change the background color of the element, it'll be always fixed:

https://github.com/angular/material/blob/master/src/components/toast/toast-theme.scss

This is because the Material Design Guidelines for Toasts states that the background will always remains the same:

https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

Note the background item on the Specs list.

Nothing is said about the text color in each situation, it's implied that it follows the backgroundPalette, on the '50' hue rotation, declared on that CSS on the GitHub Link.

The way to distinct a warn toast, or an accent-ted one, from the default, calling an action toast, each with its action button using the appropriate class (md-warn or md-accent).

$mdToast.show({
    template: '<md-toast>\
        {{ toast.content }}\
        <md-button ng-click="toast.resolve()" class="md-warn">\
            Ok\
        </md-button>\
    </md-toast>',
    controller: [function () {
        this.content = 'Toast Content';
    }],
    controllerAs: 'toast'
});

The toast itself, which its default form means an action report, with success implied. If it needs more even more attention, force its close by setting up an action button add actions like 'Retry', 'Report a problem', 'Details', which can be used to catch this click and record some technical info, etc... the examples vary from what you need.