Topic: Change Color Of Success Toast

ewgiddings free asked 4 years ago

2 Questions:

1) How am I able to change the default colors of toast alerts? I want the shades for success/warning/danger to match my colors. I believe I did it on a previous project by altering the node_modules file. Is that how I should change default colors for toast?

It can be project wide if unable to specifically target toast.

2) What's the best way to change success, warning, alert, etc. colors project wide?

ewgiddings free answered 4 years ago

In the component:

import { ToastService } from 'ng-uikit-pro-standard';
constructor(private toast: ToastService) { }
this.toast.success('Message here');

In the main module:

import { MDBBootstrapModulesPro, ToastModule } from 'ng-uikit-pro-standard';
ToastModule.forRoot({positionClass: 'md-toast-top-right', toastClass: 'opacity', timeOut: 9999})

I do not like the colors that are used for the toast. Every other component I have ben able to change the color of by going into the node_modules and switching the variables to be colors I want. The toast colors never change after multiple restarts and rebuilds.

I only seek to change the color of the toast alerts. I want a different color green for success. I want a different color red for danger.

ewgiddings free commented 4 years ago

ewgiddings free commented 4 years ago

I changed these variables in the MDB node_modules assets scss file: Line 624 & 625 of that file version 8.6:

$success-color: #2bbbad !default; // #00c851 !default;
$success-color-dark:   #00695c !default; // #007e33 !default;

And this changed the success color for every component except for the toast. The toast is stuck at the default green.

Konrad Stępień staff commented 4 years ago

please paste this code in your global file of styles (styles.scss) in root folder:

.md-toast-success {
    background-color: #2bbbad !important

ewgiddings free commented 4 years ago

Thank you for having me try that. Oddly, I remember trying it, but maybe I didn't restart before so it never took hold.

That worked. I appreciate your help :)

Konrad Stępień staff commented 4 years ago

No problem :)

I will change status of the problem to resolved.

Best, Konrad!

Konrad Stępień staff answered 4 years ago

Hi @ewgiddings,

  1. If you want overwrite colours in your project you should do it in your global file styles.css.
  2. Please visit this page, the best way is to use skins.

Here you can find an example how to make a custom component with styles of skin.

If you will have a problem with sets styles for your alert, please provide code to me and I will help you.

Best, Konrad.

ewgiddings free commented 4 years ago


Is there an easier way to only change the color of the toast alert? Everything else in my project I was able to change the color of but not the toast alert. I went to the node module files and changed some variables at the source, but the toast alert is still the bright green color. I know that's not the best practice but it was fast.

How do I change only the toast alert color? Where is that located or how can I override just that? Despite changing the root success variable that is still not changed.

Thank you for your previous help. I will work on skins at some point. Right now I am only looking to change the color of the toast alerts.


Konrad Stępień staff commented 4 years ago

Please provide me with a code them we will try to help you. We'll find the best way to do it.

ewgiddings free commented 4 years ago


It is just a regular Toast as shown in your examples. I will make a new comment so I can use code blocks.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.6.0
  • Device: Surface Pro
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No