How to show md-toast with background color

Question

I am trying to create md-toast with having some background color to toast using angular-material. I using answers from this SO question, I created this codepen, but it is showin

Answer 1

Positioning the toast

Instead of giving a position to everything (which makes the cutting of your toast), you can position only the md-toast to the right position.

By the documentation, there are four location where you can officially put the toast: top left, top right, bottom left, bottom right. So, first, lets position the toast to top left (this is important for the change in animation. Also, this will allow us to show toasts on bottom center as well).

$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('top')

now, in the css, just position your toast:

md-toast {
  left: calc(50vw - 150px);
}

This will position the toast at the center of the viewport, minus half of the toast.

you can also show toasts on the bottom center by javascript alone:

$mdToast.show(
  $mdToast.simple()
    .textContent('Simple lala Toast!')
    .position('bottom')

and the toast will center at the bottom and use the right animation to show it.

Coloring the toast

You colored the toast's container instead of the actual content of the toast. To color the toast, you can add the following css styling:

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

You can change the toast's theme to not override the default toast styling. Also, changing the position for a specific theme can help use both positions (default and manual) at the same time (by changing theme).

md-toast.md-thatkookooguy-toast-theme {
  left: calc(50vw - 150px);
}

Here's a working FORK of you codepen.