Abumaizer pro asked 6 years ago

How can I change Toast opacity,  the default is too transparent?

Damian Gemza staff answered 6 years ago

Hello, Dear Abumaizer, if you want to change opacity of your's toasts - please head to _toast.scss file, located in path: /assets/scss/angular/pro/_toast.scss , and find id called:
#toast-container > mdb-toast-component
In that ID, please change opacity ( line 22 ), and -ms-filter( line 23 ) and filter ( line 24 ) to desired value. Default it's 0.8.
Above should help you. If not, please let me know.
Best Regards,

itdev pro commented 6 years ago

The current default is in version 5.2.3 is 0.5. Can you provide a way to change that in the global settings or change the default to .95 since it does not appear good at all on dark backgrounds.

Damian Gemza staff commented 6 years ago

Dear itdev, You can overwrite this code on your global styles.scss file. It won't be orverwritten after update. Best Regards, Damian

Abumaizer pro answered 6 years ago

I also managed to adjust it in the component, toast.component.ts

adjust the state opacity, originally it is set to .5



animations: [

trigger('flyInOut', [








state('active', style({ opacity:1 })),

state('removed', style({ opacity:0 })),

transition('inactive => active', animate('300ms ease-in')),

transition('active => removed', animate('300ms ease-in'))




Damian Gemza staff commented 6 years ago

Thanks for your suggest. We will think about how to implement this in nice way in our future releases. Best Regards, Damian

itdev pro commented 6 years ago

We would like an option for this instead of overriding your files. Every time we have to do that, upgrading becomes a nightmare.

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No