Skip to content

Themes for SweetAlert2: Dark, Minimal, Borderless, Bootstrap, Material UI, WordPress Admin, Bulma, ...

License

Notifications You must be signed in to change notification settings

sweetalert2/sweetalert2-themes

Repository files navigation

@sweetalert2/themes - Official Themes for SweetAlert2

npm version semantic-release

🙌 🙌 🙌 Help wanted!

We just started this project, for now 3 themes are available: dark, minimal, and embed-iframe. Please help us with other themes, I would be happy to donate some 💰 for all active contributors. The quick-start contributing guide is here.

Thank you ❤️

Installation

You can install all themes at once:

npm install --save sweetalert2 @sweetalert2/themes

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

npm install --save sweetalert2 @sweetalert2/theme-dark

Or grab them both from jsdelivr CDN, for example:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@1/dark.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8/dist/sweetalert2.min.js"></script>

Usage

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:

your-app.js:

import Swal from 'sweetalert2/src/sweetalert2.js'

your-app.scss:

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

Contributing

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

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

  2. Make sure you have npm or yarn installed.

  3. When in the sweetalert2-themes directory, run npm install or yarn install to install dependencies.

  4. To begin active development, run npm start or yarn start.

  5. Or, if you want to quickly start a new theme, run npm run create-new-theme my-awesome-theme

Donations

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

  • PayPal: https://www.paypal.me/limonte
  • Bitcoin: 12BxefvPMtHePgfPRDL1SaZYSG4GwQmWoP
  • Ether: 0x36e2b10666e2c0dc343901895ba3697b5d3214d1
  • Bitcoin Cash: qqxs402qszgwuue00gwxw996lzhpa8up2unqm0y46g
  • Stellar: GBRS5KGFJO4OBUGW3TRQBIVXTM5YDS53DOSHGA3LKVE2YXKVKNVDONBP