vue-toaster icon indicating copy to clipboard operation
vue-toaster copied to clipboard

Is there a way to change the toast colors?

Open Misakaou opened this issue 2 years ago • 1 comments

First of all, thank you for the tool you provided. Is there a way to change the color of the toast?

Misakaou avatar May 10 '22 10:05 Misakaou

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

soerenmetje avatar Jul 11 '22 13:07 soerenmetje

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

Thank u!

Misakaou avatar Aug 31 '22 11:08 Misakaou