更改 toastr 和 sweetalert 背景颜色的简单方法

问题描述

我正在使用 toastr 和 sweetalert 向应用用户提供反馈。我正在尝试更改 toastr 和 sweetalert 背景颜色以适合我的应用程序主题，但找不到解决方案。有没有什么简单的方法可以改变这些主题，比如使用 Sass 编译 bootstrap 4 自定义颜色。

解决方法

您只需要Inspect要更改的元素（鼠标右键）并覆盖其样式

function alertmeWarning() {
    swal("Gotcha!","Pikachu was caught!","warning");
}
function alertmeError() {
    swal("Gotcha!","error");
}
function alertmeSuccess() {
    swal("Gotcha!","success");
}
function alertmeInfo() {
    swal("Gotcha!","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>