I want to change the 'title' color in SweetAlert2. How can I do that? Thank you in advance
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);
}
});
});
}
Here is my final function:
Swal.fire({
title: "<h5 style='color:red'>" + title + "</h5>",
text: message,
icon: type,
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6e7d88',
confirmButtonText: 'Yes',
cancelButtonText: "No"
})
You can use customClass or showClass to get the CSS class for the popup and change the colors in a CSS file from there.
For example:
function CustomConfirm(title, message, type) {
return new Promise((resolve) => {
Swal.fire({
customClass : {
title: 'swal2-title'
}
title: title,
text: message,
...
Then in your CSS
.swal2-title {
color: red;
}
You can try add this code in a global CSS:
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>