Skip to content


Repository files navigation

@sweetalert2/themes - Official Themes for SweetAlert2

npm version semantic-release

Available themes


You can install all themes at once:

npm install --save @sweetalert2/themes

Or just a single theme @sweetalert2/theme-<theme_name>, e.g.

npm install --save @sweetalert2/theme-dark

Or grab them both from jsdelivr CDN, for example:

<link rel="stylesheet" href="" />
<script src=""></script>


With CSS:

<!-- Include a required theme -->
<link rel="stylesheet" href="@sweetalert2/themes/dark/dark.css" />

<script src="sweetalert2/dist/sweetalert2.min.js"></script>

With SASS:


import Swal from 'sweetalert2/dist/sweetalert2.js';


@import '@sweetalert2/themes/dark/dark.scss';


If you would like to contribute enhancements or fixes, please do the following:

  1. Fork the sweetalert2-themes repository and clone it locally.

  2. When in the sweetalert2-themes directory, run yarn install to install dependencies.

  3. To begin active development, run yarn start and yarn watch simultaneously.

  4. Or, if you want to quickly start a new theme, run yarn create-new-theme my-awesome-theme. This will create the theme's default files.


Has SweetAlert2 helped you create an amazing application? You can show your support by making a donation: