[英]Easy way to change toastr and sweetalert background color
我正在使用 toastr 和 sweetalert 向应用程序用户提供反馈。 我正在尝试更改 toastr 和 sweetalert 背景颜色以适合我的应用程序主题,但我找不到解决方案。 是否有任何简单的方法来更改这些主题,例如使用 Sass 编译引导程序 4 自定义 colors。
您只需要Inspect
要更改的元素(鼠标右键)并覆盖其 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.