Topic: Change Color Of Success Toast
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?
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 commented 5 years ago
https://mdbootstrap.com/docs/angular/advanced/notifications/
ewgiddings commented 5 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 5 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 commented 5 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 5 years ago
No problem :)
I will change status of the problem to resolved.
Best, Konrad!
Hi @ewgiddings,
- If you want overwrite colours in your project you should do it in your global file
styles.css. - 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 commented 5 years ago
Hi,
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.
Eric
Konrad Stępień staff commented 5 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 commented 5 years ago
Hi,
It is just a regular Toast as shown in your examples. I will make a new comment so I can use code blocks.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: 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