Quiero cambiar el color del 'título' en SweetAlert2. ¿Cómo puedo hacer eso? Gracias de antemano
function CustomConfirm(title, message, type) { return new Promise((resolve) => { Swal.fire({ title: title, text: message, icon: type, showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6e7d88', confirmButtonText: 'Yes', cancelButtonText: "No" }).then((result) => { if (result.isConfirmed) { resolve(true); } else { resolve(false); } }); }); }Aquí está mi función final:
Swal.fire({ title: "<h5 style='color:red'>" + title + "</h5>", text: message, icon: type, showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6e7d88', confirmButtonText: 'Yes', cancelButtonText: "No" })Puede usar customClass o showClass para obtener la clase CSS para la ventana emergente y cambiar los colores en un archivo CSS desde allí.
Por ejemplo:
function CustomConfirm(title, message, type) { return new Promise((resolve) => { Swal.fire({ customClass : { title: 'swal2-title' } title: title, text: message, ...Luego en tu CSS
.swal2-title { color: red; }Puede intentar agregar este código en un CSS global:
Swal.fire({ title: 'Testing Custom Styles', html: 'Good Job', icon: 'success' }) .swal2-container.swal2-center>.swal2-popup{ background-color: #121212 !important; } .swal2-html-container, .swal2-title{ color: white !important; } <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>