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);
            }
        });
    });
}

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);
            }
        });
    });
}

• javascript
• sweetalert2

3 Answers 3

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/[email protected]/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>