Use a theme from @sweetalert2 themes (and or customize SCSS variables)

Already tried a theme from https://github.com/sweetalert2/sweetalert2-themes? They're good! Especially if you use a supported framework like Bootstrap, Material UI, Bulma, and more, this could help you integrate SweetAlert2 better for a more consistent UI.

By default, ngx-sweetalert2 loads the standard version of SweetAlert2, which has the default theme embedded in it as raw CSS. At runtime, the library injects that CSS in the page. It is convenient for sure, but it's not best for performance or customization.

But what if you want to load a @sweetalert2/sweetalert2-themes theme, or your own custom theme, or customize SCSS variables from one of that theme and load your own .scss file?

ngw-sweetalert2 lets you load a custom build of SweetAlert2 through SweetAlert2Module.forChild({ provideSwal }). By custom, we mean any module that has a compatible API with SweetAlert2... including the unstyled version of SweetAlert2, that is also delivered in the sweetalert2 npm package.

Replacing the sweetalert2 build used by ngx-sweetalert2

The default provideSwal function is equivalent to doing this:

SweetAlert2Module.forRoot({
  provideSwal: () => import('sweetalert2')
})

In your AppModule, let's override the default and load the unstyled version of SweetAlert2 instead:

SweetAlert2Module.forRoot({
  provideSwal: () => import('sweetalert2/dist/sweetalert2.js')
})

Now the standard build of sweetalert2 won't be loaded anymore.

ⓘ You could also directly use the raw SweetAlert2 source by using sweetalert2/src/sweetalert2.js, there it is the Angular build toolchain (most notably Webpack) that will compile the library instead of using the single bundle file provided by SweetAlert2. It could be interesting if you wanted a better debugging experience, or full control on how SweetAlert2 is built, at the cost of a small build performance penalty.

Please note that provideSwal can also be used in SweetAlert2Module.forChild, so you are able to use multiple builds of SweetAlert2 in the same application (if you ever find yourself in a situation where you'd need that).

That's it for the JavaScript part! It is now up to you to provide the CSS.

Using a theme from @sweetalert2/sweetalert2-themes

Install the theme you want, for example the borderless one (:heart:):

npm install @sweetalert2/theme-borderless

Now you can reference the theme in your angular.json file in the styles section:

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "styles": [
            "src/styles.css",
            "node_modules/@sweetalert2/theme-borderless/borderless.min.css"
          ]
        }
      }
    }
  }
}

ⓘ Again, you could use alternative builds of the theme, for example: borderless.css or borderless.scss if you have SCSS enabled and that you want your build toolchain to handle it.

If you have SCSS enabled, you could also avoid editing angular.json and import SweetAlert2's style in your styles.scss file if you prefer:

@import '~@sweetalert2/theme-borderless/borderless.scss';

// Your app root styles
body {
  font-family: sans-serif;
}

And you're done. Enjoy your new theme!

Customize a theme through SCSS variables

The default theme in the sweetalert2 package, or every theme from @sweetalert2/sweetalert2-themes, are heavily configurable through SCSS variables. If you wanna customize one of those themes, here's how to do it. We'll configure the default theme from the sweetalert2 package, but you could use one from @sweetalert2/sweetalert2-themes in the exact same way.

First, apply the same changes as in step 1.

Then, check that you've got SCSS enabled in Angular CLI, or type ng config schematics.@schematics/angular:component.styleext scss to enable it (or edit your angular.json file by hand).

Create a file named, for example, src/sweetalert2-theme.scss and put this inside:

// This is an example of variables we can change:
$swal2-font: monospace;
$swal2-icon-size: 10em;

@import '~sweetalert2/src/sweetalert2';

Now you can reference the custom theme in your angular.json file in the styles section:

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "styles": [
            "src/styles.scss",
            "src/sweetalert2-theme.scss"
          ]
        }
      }
    }
  }
}

Alternatively, you could also import your SCSS theme file in styles.scss thanks to @import, as shown in step 2.

Have fun customizing your theme!