微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决更改 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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。