更改 toastr 和 sweetalert 背景顏色的簡單方法

Question

我正在使用 toastr 和 sweetalert 向應用程序用戶提供反饋。 我正在嘗試更改 toastr 和 sweetalert 背景顏色以適合我的應用程序主題，但我找不到解決方案。 是否有任何簡單的方法來更改這些主題，例如使用 Sass 編譯引導程序 4 自定義 colors。

Answer 1

您只需要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>