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 typ

Answer 1

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: '\
        {{ toast.content }}\
        \
            Ok\
        \
    ',
    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.