Easy way to change toastr and sweetalert background color

Question

I am using toastr and sweetalert to give feedback to the app users. I am trying to change toastr and sweetalert background color to suit my app's theme and I couldn't find a solution. Is there any easy way to change these themes, something like compiling bootstrap 4 custom colors using Sass.

Answer 1

You just need to Inspect the element you want to change (right mouse chrome) and override its styles

function alertmeWarning() {
    swal("Gotcha!", "Pikachu was caught!", "warning");
}
function alertmeError() {
    swal("Gotcha!", "Pikachu was caught!", "error");
}
function alertmeSuccess() {
    swal("Gotcha!", "Pikachu was caught!", "success");
}
function alertmeInfo() {
    swal("Gotcha!", "Pikachu was caught!", "info");
}

function meEither() {
    toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
    toastr.success('Have fun storming the castle!', 'Miracle Max Says')
    toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
}

/* Sweatalert */

/* Success */
/* outer ring */
.swal-icon--success__ring {
    border: 4px solid rgba(194, 26, 90, 0.2);
}

/* spin color */
.swal-icon--success {
    border-color: rgb(62, 16, 226);
}

/* V color */
.swal-icon--success__line {
    background-color: rgb(30, 206, 53);
}

/* Warning */
/* outer ring */
.swal-icon--warning {
    border-color: #0ec579;
    -webkit-animation: none;
    animation: none;
}

/* ! */
.swal-icon--warning__body,
.swal-icon--warning__dot {
    background-color: #1816ac;
}

/* Error */
/* outer ring */
.swal-icon--error {
    border-color: #19e645;
}

/* X */
.swal-icon--error__line {
    background-color: #af13df;
}

/* Info */
/* outer ring */
.swal-icon--info {
    border-color: #020404;
}

/* i */
.swal-icon--info:after,
.swal-icon--info:before {
    background-color: #d119c8;
}

/* Toastr */
.toast-success {
    background-color: #d813c8 !important;
}
.toast-warning {
    background-color: #357e45 !important;
}
.toast-error {
    background-color: #3533a7 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


<button onclick="alertmeWarning()">SweetAlert Warning</button>
<button onclick="alertmeError()">SweetAlert Error</button>
<button onclick="alertmeSuccess()">SweetAlert Success</button>
<button onclick="alertmeInfo()">SweetAlert Info</button>
<button onclick="meEither()">Toastr</button>