vue-toaster
vue-toaster copied to clipboard
Is there a way to change the toast colors?
First of all, thank you for the tool you provided. Is there a way to change the color of the toast?
Probably not the cleanest way because of using !important
, but solved it for me. You can overwrite background-color
in the css classes used by vue-toaster:
// default colors
/*
$toast-colors: (
"success": #28a745,
"info": #17a2b8,
"warning": #ffc107,
"error": #dc3545,
"default": #343a40
);
*/
.c-toast--success {
background-color: #22ad4e !important;
}
.c-toast--error {
background-color: #dc3545 !important;
}
// further classes analog
See:
- https://github.com/MeForma/vue-toaster/blob/db3b31d8459a1b96dc5a722097cd4ecb57bf3100/src/themes/default/colors.styl
- https://github.com/MeForma/vue-toaster/blob/db3b31d8459a1b96dc5a722097cd4ecb57bf3100/src/themes/default/variables.styl
Probably not the cleanest way because of using
!important
, but solved it for me. You can overwritebackground-color
in the css classes used by vue-toaster:// default colors /* $toast-colors: ( "success": #28a745, "info": #17a2b8, "warning": #ffc107, "error": #dc3545, "default": #343a40 ); */ .c-toast--success { background-color: #22ad4e !important; } .c-toast--error { background-color: #dc3545 !important; } // further classes analog
See:
https://github.com/MeForma/vue-toaster/blob/db3b31d8459a1b96dc5a722097cd4ecb57bf3100/src/themes/default/colors.styl
https://github.com/MeForma/vue-toaster/blob/db3b31d8459a1b96dc5a722097cd4ecb57bf3100/src/themes/default/variables.styl
Thank u!