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

Question

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

编译 bootstrap 4 种自定义颜色

Answer 1

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

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>

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

Easy way to change toastr and sweetalert background color

javascript

sass

toastr

sweetalert

bootstrap-4