sweetalert2 / sweetalert2-themes

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

@sweetalert2/themes - Official Themes for SweetAlert2

Available themes

• Dark
• Minimal
• Borderless
• Bootstrap 4
• Material UI
• WordPress Admin
• Bulma
• Default

Installation

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="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@5/dark.css" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/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/dist/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. 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.

Donations

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

• GitHub Sponsors ❤️
• PayPal

Hall of Donators 🏆

sweetalert2-themes's Issues

Material UI theme

Specs: https://next.material-ui.com/demos/dialogs/

The theme name should be material-ui

How to use themes

Hello how to enable the minimal theme after import url.

THanks

Polish the Bootstrap theme

This graph is showing that Bootstrap 4 theme is the absolute winner :)

@limonte spend some time testing it extensively and verifying all details are aligned with Bootstrap 4 modal: https://getbootstrap.com/docs/4.0/components/modal/

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/sweetalert2/sweetalert2-themes.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Borderless theme

The inspiration can be taken from the Supervan theme from here: https://craftpip.github.io/angular-confirm/

The name of the theme is to be discussed. For now, it's borderless butI'm opened for better naming suggestions.

SassError because of node_modules/

Current behavior

I'm using sweetalert in a Symfony Bundle and use the scss from the bundle in the customer app.

With #80 my scss file isn't working anymore.

I import the main scss like that

@import "../../vendor/my-bundle/assets/css/main";

The problem ist now, when I run yarn build in the customer app, that it says

SassError: Can't find stylesheet to import.
  ╷
3 │ @import 'node_modules/sweetalert2/src/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../rks-pis-bundle/node_modules/@sweetalert2/theme-bootstrap-4/bootstrap-4.scss 3:9  @import
  vendor/rks/pis-bundle/assets/css/plugins/_sweetalert2.scss 18:9                     @import

because in the customer app, there is no sweetalert2 in node_modules, only in the Bundle.

Expected behavior

No SassError. 😅

Live demo

The recommondation from Webpack says to replace ~ with nothing, this would work fine for me.
So please consider to change

@import 'node_modules/sweetalert2/src/variables';

to

@import 'sweetalert2/src/variables';

Bootstrap 4 Theme CSS Values alignment

New feature motivation

Trying ti adopt the bootstrap theme into my app, I realized that scss is initialized using the default bootstrap values and not these given from bootstrap's variables file. So It can't follow any bootstrap customization

New feature description

It could be possible to align variables with bootstrap scss variables (select2 themes applies this method). just to include the following before build

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

and change the fixed values of the following lines to the proper variables

sweetalert2-themes/bootstrap-4/bootstrap-4.scss

Lines 16 to 135 in 1667812

	$bootstrap-primary: #007bff !default;
	$bootstrap-success: #28a745 !default;
	$bootstrap-danger: #dc3545 !default;
	$bootstrap-warning: #ffc107 !default;
	$bootstrap-info: #17a2b8 !default;
	$bootstrap-secondary: #6c757d !default;
	$bootstrap-gray-100: #f8f9fa !default;
	$bootstrap-gray-200: #e9ecef !default;
	$bootstrap-gray-300: #dee2e6 !default;
	$bootstrap-gray-400: #ced4da !default;
	$bootstrap-gray-500: #adb5bd !default;
	$bootstrap-gray-600: #6c757d !default;
	$bootstrap-gray-700: #495057 !default;
	$bootstrap-gray-800: #343a40 !default;
	$bootstrap-gray-900: #212529 !default;
	$bootstrap-theme-color-interval: 8% !default;
	// Alert
	$bootstrap-alert-border-level: -9 !default;
	$bootstrap-alert-bg-level: -10 !default;
	$bootstrap-alert-color-level: 6 !default;
	$bootstrap-alert-border-color: mix($swal2-white, $bootstrap-secondary, abs($bootstrap-alert-border-level) * $bootstrap-theme-color-interval) !default;
	$bootstrap-alert-background: mix($swal2-white, $bootstrap-secondary, abs($bootstrap-alert-bg-level) * $bootstrap-theme-color-interval) !default;
	$bootstrap-alert-color: mix($swal2-black, $bootstrap-secondary, abs($bootstrap-alert-color-level) * $bootstrap-theme-color-interval) !default;
	$bootstrap-alert-padding-y: .75rem !default;
	$bootstrap-alert-padding-x: 1.25rem !default;
	$bootstrap-alert-margin-bottom: 1rem !default;
	$bootstrap-alert-border-radius: .25rem !default;
	$bootstrap-alert-border-width: 1px !default;
	$bootstrap-alert-font-size: 1rem !default;
	// Input
	$bootstrap-input-color: $bootstrap-gray-700 !default;
	$bootstrap-input-bg: $swal2-white !default;
	$bootstrap-input-border-color: $bootstrap-gray-300 !default;
	$bootstrap-input-border-radius: .25rem !default;
	$bootstrap-input-border-width: 1px !default;
	$bootstrap-input-padding-y: .375rem !default;
	$bootstrap-input-padding-x: .75rem !default;
	$bootstrap-input-line-height: 1.5 !default;
	$bootstrap-input-height-border: $bootstrap-input-border-width * 2 !default;
	$bootstrap-input-height: calc(#{$bootstrap-input-line-height * 1em} + #{$bootstrap-input-padding-y * 2} + #{$bootstrap-input-height-border}) !default;
	$bootstrap-input-disabled-color: $swal2-white !default;
	$bootstrap-input-disabled-bg: $bootstrap-gray-200 !default;
	$bootstrap-input-focus-width: .2rem !default;
	$bootstrap-input-focus-border: 1px solid lighten($bootstrap-primary, 25%) !default;
	$bootstrap-input-focus-box-shadow: 0 0 0 $bootstrap-input-focus-width rgba($bootstrap-primary, .25) !default;
	// Button
	$bootstrap-btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
	$bootstrap-btn-secondary-focus-box-shadow: 0 0 0 $bootstrap-input-focus-width rgba($bootstrap-secondary, .25) !default;
	// Custom Shared Variables
	$bootstrap-custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
	$bootstrap-custom-control-gutter: .5rem !default;
	$bootstrap-custom-control-indicator-size: 1rem !default;
	$bootstrap-custom-control-indicator-bg: $swal2-white !default;
	$bootstrap-custom-control-indicator-bg-size: 50% 50% !default;
	$bootstrap-custom-control-indicator-border-color: $bootstrap-gray-500 !default;
	$bootstrap-custom-control-indicator-border-width: $bootstrap-input-border-width !default;
	$bootstrap-custom-control-indicator-checked-color: $swal2-white !default;
	$bootstrap-custom-control-indicator-checked-bg: $bootstrap-primary !default;
	$bootstrap-custom-control-indicator-checked-disabled-bg: rgba($bootstrap-primary, .5) !default;
	$bootstrap-custom-control-indicator-checked-border-color: $bootstrap-custom-control-indicator-checked-bg !default;
	$bootstrap-custom-control-indicator-active-color: $swal2-white !default;
	$bootstrap-custom-control-indicator-active-bg: lighten($bootstrap-primary, 35%) !default;
	$bootstrap-custom-control-indicator-active-box-shadow: none !default;
	$bootstrap-custom-control-indicator-active-border-color: $bootstrap-custom-control-indicator-active-bg !default;
	$bootstrap-custom-control-indicator-focus-box-shadow: $bootstrap-input-focus-box-shadow !default;
	$bootstrap-custom-control-indicator-focus-border-color: lighten($bootstrap-primary, 25%) !default;
	// Custom Select
	$bootstrap-custom-select-bg-size: 8px 10px !default;
	$bootstrap-custom-select-indicator-color: $bootstrap-gray-800 !default;
	$bootstrap-custom-select-indicator: str-replace(url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"%3e%3cpath fill="#{$bootstrap-custom-select-indicator-color}" d="M2 0L0 2h4zm0 5L0 3h4z"/%3e%3c/svg%3e'), '#', '%23') !default;
	$bootstrap-custom-select-background: $bootstrap-custom-select-indicator no-repeat right $bootstrap-input-padding-x center / $bootstrap-custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
	// Custom Radio
	$bootstrap-custom-radio-indicator-border-radius: 50% !default;
	$bootstrap-custom-radio-indicator-icon-checked: str-replace(url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 8 8"%3e%3ccircle r="3" fill="#{$bootstrap-custom-control-indicator-checked-color}"/%3e%3c/svg%3e'), '#', '%23') !default;
	// Custom Checkbox
	$bootstrap-custom-checkbox-indicator-icon-checked: str-replace(url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"%3e%3cpath fill="#{$bootstrap-custom-control-indicator-checked-color}" d="M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z"/%3e%3c/svg%3e'), '#', '%23') !default;
	// Custom Range
	$bootstrap-custom-range-track-width: 100% !default;
	$bootstrap-custom-range-track-height: .5rem !default;
	$bootstrap-custom-range-track-cursor: pointer !default;
	$bootstrap-custom-range-track-bg: $bootstrap-gray-300 !default;
	$bootstrap-custom-range-track-border-radius: 1rem !default;
	$bootstrap-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($swal2-black, .1) !default;
	$bootstrap-custom-range-thumb-width: 1rem !default;
	$bootstrap-custom-range-thumb-height: $bootstrap-custom-range-thumb-width !default;
	$bootstrap-custom-range-thumb-bg: $bootstrap-primary !default;
	$bootstrap-custom-range-thumb-border: 0 !default;
	$bootstrap-custom-range-thumb-border-radius: 1rem !default;
	$bootstrap-custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($swal2-black, .1) !default;
	$bootstrap-custom-range-thumb-focus-box-shadow: 0 0 0 1px $swal2-white, $bootstrap-input-focus-box-shadow !default;
	$bootstrap-custom-range-thumb-focus-box-shadow-width: $bootstrap-input-focus-width !default; // For focus box shadow issue in IE/Edge
	$bootstrap-custom-range-thumb-active-bg: lighten($bootstrap-primary, 35%) !default;
	$bootstrap-custom-range-thumb-disabled-bg: $bootstrap-gray-500 !default;
	// Toast
	$bootstrap-toast-max-width: 350px !default;
	$bootstrap-toast-padding-x: .75rem !default;
	$bootstrap-toast-padding-y: .25rem !default;
	$bootstrap-toast-font-size: .875rem !default;
	$bootstrap-toast-background-color: rgba($swal2-white, .85) !default;
	$bootstrap-toast-border-width: 1px !default;
	$bootstrap-toast-border-color: rgba(0, 0, 0, .1) !default;
	$bootstrap-toast-border-radius: .25rem !default;
	$bootstrap-toast-box-shadow: 0 .25rem .75rem rgba($swal2-black, .1) !default;

---

PS: If you like , could help on this

$swal2-container-padding has 2 values ​​and cannot be calculated.

sweetalert2/src/scss/_body.scss

Line 20 : max-width: calc(100% - #{$swal2-container-padding} * 2);

@sweetalert2/theme-wordpress-admin/wordpress-admin.css

Line 1032 : max-width: calc(100% - 24px 16px * 2);

@sweetalert2/theme-wordpress-admin/wordpress-admin.scss

Line 16 : $swal2-container-padding: 24px 16px;

I can't build it because of this line.
Help me, I don't have knowledge of scss. Thanks.

Got error while executing create-new-theme script

#15
So I tried to create a new theme by using your create-new-theme.js script and after executing got error. After an error, it still created a folder and files inside.

Steps to produce:

1. Windows 10
2. Fork sweetalert2 project
3. git clone inside a new folder
4. npm i
5. npm audit fix just to be safe I run audit fix
6. executed command: npm run create-new-theme borderless

Showing a SweetAlert in fullscreen

We're looking to display a SweetAlert popup in fullscreen.
Here's what we tried so far:

CSS

.fullscreen-swal{
		z-index: 9999 !important;
        width:100vw !important;
        height:100vh !important;
  		}

JS

    customClass: "fullscreen-swal",
    autoHeight: false

The popup is not showing almost (70%) fullscreen, so it's bigger but not fullscreen.
What am I missing?

Support JS customization

Support JS along with SCSS

Multiple SweatAlert2 With Different Themes.

I just checked the demo on how the themes works from here : https://sweetalert2.github.io/

And found that we need to load css file for each theme which is good. but if i do that then all popup gets replaced with that theme. in which some case its not good. what if i need 2 different theme for 3 different popups ?

So my idea for it is to create something like below

Javascript

swal.fire({
   type:'success',
   title:"Hello World",
   theme:'dark'
})

HTML

<div class="swal2-container swal2-center swal2-fade swal2-shown swal2-theme-dark">
...
</div>

-- OR --

<div class="swal2-theme-dark">
    <div class="swal2-container swal2-center swal2-fade swal2-shown">
        ...
    </div>
</div>

[FEATURE] Theme for Boostrap 5 with Dark Mode and rlt support

Using themes

Good afternoon,
We're looking to use the themes, but we can't figure out how to do so - we're not very experienced developers.
We understand that we need to import the corresponding CSS file for the desired theme, but how do you then apply it?
My goal is to have a dropdown with the different themes and show the modal with the selected theme.

The easiest would be to have a "theme" parameter in the options as the other settings, but there are none.

EDIT: We already posted about this issue but the answer we received was referencing the same documentation page we're not able to understand.
Any additional help or examples we could look for?
Many thanks!

https://github.com/sweetalert2/sweetalert2-themes#usage

Originally posted by @limonte in #94 (comment)

Themes in NextJS doesn't work

My project and steps to reproduce the problem

I want to use SweetAlert with the theme entitled "borderless". I was coding my project with it but I realised it wasn't working, so I built a new nextjs project with the following code:

// _app.js
import "../styles/globals.css";
import "@sweetalert2/theme-borderless/borderless.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

// index.js
import styles from "../styles/Home.module.css";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

export default function Home() {
  const MySwal = withReactContent(Swal);

  const open = () => {
    MySwal.fire({
      title: <p>Test with BORDERLESS Theme</p>,
    });
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <button onClick={open} className={styles.OPENSWAL}>
          OPEN
        </button>
      </main>
    </div>
  );
}

NOTE: I did not change anything in the css files when I created the new project.

I have executed the following commands, in that order:

npx create-next-app testsweetalert
cd .\testsweetalert\
code .
npm install --save sweetalert2 sweetalert2-react-content
npm install --save sweetalert2 @sweetalert2/theme-borderless
npm run dev

Here is my package.json:

{
  "name": "testsweetalert",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@sweetalert2/theme-borderless": "^5.0.8",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sweetalert2": "^11.3.0",
    "sweetalert2-react-content": "^4.2.0"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.7"
  }
}

NOTE: I don't want to use SCSS

What's not working?

Swal is working, but the theme is the one by default. I don't know why the borderless theme is not used by Swal whereas it is installed, and the css file is imported in _app.js.

NOTE: importing the css file in /styles/globals.css doesn't change anything.

Expected behavior

I want to have the same behavior as on the documentation when I enable the borderless theme.

Live demo

You can reproduce easily a demo on your own computer, I have written the whole source code above.

Theme introduces border and padding on swal2-header?

Hi there,

When using the theme for BS4, I'm receiving a border and padding on the "swal2-header" class, causing this:

This is without:

Get rid of gulp-header

A new high severity vulnerability has been flagged for lodash.template, dependency of gulp-header. I raised an issue on gulp-header but I'm not sure it's actively maintained (last release 7 months ago). I'll wait for a reply and decide what to do.

Bootstrap 5 Theme

Have a theme for Bootstrap 5 built similarly as the existing B4 theme but purposed specifically for bootstrap 5.

Bootstrap is currently at version v5.1.1 - https://getbootstrap.com/

This theming still up to date?

I am using Sweetalert2 successfully and everthing works as expected. However, after installing:
npm install --save sweetalert2 @sweetalert2/theme-material-ui

I get nothing to run. Including:
link rel="stylesheet" href="@sweetalert2/theme-material-ui/material-ui.css"
does nothing.

How to get this properly working?

I dont use scss. Importing:
import Swal from 'sweetalert2/dist/sweetalert2';
also doesnt help.

Thanks in advance

Themes not working on Production

I am trying to use sweetalert2 dark theme on a react website, but it is not working on production.
Import in App.jsx: import '@sweetalert2/themes/dark';
Import in components: import Swal from 'sweetalert2';

I've tried importing separately as per doc but still does not work on production. It works completely fine on development. The production is the static file served through react-scripts build.
Any help would be appreciated!

Minimal theme

Remove border-radius, shadows, animations from the default theme

The theme name should be minimal

dark.min.css (and dark.css?) compiled incorrectly.

There seems to be an issue with colouring. I have fixed this by adding an !important keyword to color: #e1e1e1 inside of the .swal2-title definition. I am not sure if this is the same for dark.css

https://gyazo.com/188ba89851d198aced4780d8a9fce1be

Deprecation Warning

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(strip-units($swal2-icon-size), 5) or calc(strip-units($swal2-icon-size) / 5)

More info and automated migrator: https://sass-lang.com/d/slash-div

Dark theme doesn't work in angular

Current behavior

Dark theme doesn't work

Expected behavior

Use dark theme.

Live demo

https://github.com/cliesh/editor/tree/galilee

Run the demo:

npm run start:ng
npm run start:electron

Bulma theme

Specs: https://bulma.io/documentation/components/modal/ (see the "Modal card" example)

It doesn't have any effect in ViteJS project

Add minified versions of CSS files

Each theme should have its minified version for people who will go with the old-school way of including CSS files in their projects.

[material-ui] Add ripple on buttons

Add ripple effect on material-ui buttons

Add banners with the version to unminified CSS files

It will help with reporting and debugging issues.

Dark theme: backdrop isn't transparent

Live demo: https://sweetalert2.github.io

TailwindCSS

TailwindCSS is going in popularity and I am using it in a current open source project. Planning to include SweetAlert2 either way but consistent styling is always nice. Will work on this if I can but just putting the thought out there.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/sweetalert2/sweetalert2-themes.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Bootstrap theme

Bootstrap seems to be an extremely popular framework.

Let's copy-paste these styles to bootstrap-4 theme: https://getbootstrap.com/docs/4.0/components/modal/

Added Dark Theme CSS But SweetAlert2 shows Inline CSS.

Hi,

I have added dark theme css in my header and removed default sweetalert.css but when i try to check the result i notice that sweetalert is taking style from "inline" not from the dark.css theme file.

Screenshot:- https://yadi.sk/d/Dg441tUlkcX60w

Thanks

success icon is bugged (dark mode theme)

Current behavior

The success icon's background is white (the popup is dark theme)

Expected behavior

success icon matches popup background

Live demo

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/sweetalert2/sweetalert2-themes.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v3
• cycjimmy/semantic-release-action v2

npm

bootstrap-4/package.json

borderless/package.json

bulma/package.json

dark/package.json

default/package.json

material-ui/package.json

minimal/package.json

package.json

• @sweetalert2/execute ^1.0.1
• @sweetalert2/stylelint-config ^2.0.12
• browser-sync ^2.27.10
• fancy-log ^2.0.0
• gulp ^4.0.2
• gulp-autoprefixer ^8.0.0
• gulp-clean-css ^4.2.0
• gulp-header ^2.0.9
• gulp-rename ^2.0.0
• gulp-sass ^5.1.0
• postcss-scss ^4.0.5
• replace-in-file ^6.3.5
• sass ^1.55.0
• stylelint ^14.14.0
• sweetalert2 ^11.5.2
• sweetalert2 ^11.0.0

wordpress-admin/package.json

---

• Check this box to trigger a request for Renovate to run again on this repository

Using themes

Good afternoon,
We're looking to use the themes, but we can't figure out how to do so - we're not very experienced developers.
We understand that we need to import the corresponding CSS file for the desired theme, but how do you then apply it?
My goal is to have a dropdown with the different themes and show the modal with the selected theme.

The easiest would be to have a "theme" parameter in the options as the other settings, but there are none.
We'd really appreciate your help!

[dark-theme] Small artifacts on modal

On Chrome browser there are some (almost invisible) artifacts on the side of the modal. You can see two squares of darker shade of black either side of the modal:

It's almost invisible, and the reason why I raised the issue is to make sure there is nothing else that needs to be changed or any SCSS variable to be added (since we are preparing version 9)

[dark] Dark theme not applied to toast

Toast for dark theme is shown with default styling

Using themes

Good afternoon,
We're looking to use the themes, but we can't figure out how to do so - we're not very experienced developers.
We understand that we need to import the corresponding CSS file for the desired theme, but how do you then apply it?
My goal is to have a dropdown with the different themes and show the modal with the selected theme.

The easiest would be to have a "theme" parameter in the options as the other settings, but there are none.

EDIT: We already posted about this issue but the answer we received was referencing the same documentation page we're not able to understand.
Any additional help or examples we could look for?
Many thanks!

https://github.com/sweetalert2/sweetalert2-themes#usage

Originally posted by @limonte in #94 (comment)

[Feature Request] Nord theme.

New feature motivation

A new theme with a specific color palette (light and dark mode where there's a dark version for dark mode and light version for light mode). Would fit in rather nice with websites already using this color palette for the website.

New feature description

The dark theme would have to be modified with colors that are in the Nord color palette.
[https://www.nordtheme.com/docs/colors-and-palettes](https://www.nordtheme.com/docs/colors-and-palettes

WordPress theme

WordPress has toast style notifications now that might be a useful theme to some. I can probably work on this if there is interest.

Also, is it possible to provide a dynamic offset like in this photo?

Using themes

Good afternoon,
We're looking to use the themes, but we can't figure out how to do so - we're not very experienced developers.
We understand that we need to import the corresponding CSS file for the desired theme, but how do you then apply it?
My goal is to have a dropdown with the different themes and show the modal with the selected theme.

The easiest would be to have a "theme" parameter in the options as the other settings, but there are none.

EDIT: We already posted about this issue but the answer we received was referencing the same documentation page we're not able to understand.
Any additional help or examples we could look for?
Many thanks!

https://github.com/sweetalert2/sweetalert2-themes#usage

Originally posted by @limonte in #94 (comment)

Borderless, Bootstrap 4, Dark, Default, & Material UI theme's check mark exceeding bounds

References: sweetalert2/sweetalert2#1800, sweetalert2/sweetalert2#1799, sweetalert2/sweetalert2#1798, & sweetalert2/sweetalert2#1797

The Borderless, Bootstrap 4, Dark, Default, & Material UI theme's check marks are exceeding bounds.

Obviously these are related to the other issues I opened, should be a simple fix to rebase the base scss with master from the main repo. Not sure how the dev workflow is in this repo though.

https://codepen.io/RatherLogical/pen/GRRxMbr?&editable=true

[FEATURE] Dark Mode For Bootstrap 4

dark theme for material ui

New feature motivation

hi I want dark theme for material ui

New feature description

I want to support dark theme in material themes

Do not use tilde ~

Current behavior

@import '~sweetalert2/src/variables';

// override SASS variables here

@import '~sweetalert2/src/sweetalert2';

~ isn't supported by Parcel (parcel-bundler/parcel#5275) and deprecated by webpack (https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules)

How to add an image with sweetalert2 working in a Next.js project?

I am trying to use sweetalert2 with Next.js. When I used React I used to do this:

const registeredMessage = () => {
Swal.fire({
imageUrl: logo,
imageHeight: 150,
imageWidth: 200,
imageAlt: "Thanks for registering.",
title: "NEXT EVENT",
html: "

Now you will receive updates with all our events.

",
footer: "

Thanks for register.

",
});
};

Then in a function, I do something like this:
const handleSubmit = async (e) => {
e.preventDefault();
setError("");
try {
await createUser(email, password);
registeredMessage();
} catch (e) {
setError(e.message);
console.log(e.message);
}
};

But Next.js require to use Image component to show an image. So, how can I include a image in the alert? Sorry if it doesn't have the right style, it is my first question in GitHub.
Thanks.

#sweetAlert2 #Next

Theme request: MDC theme

Hi,
is it possible to get a SweetAlert2 theme using MDC?
Reference: https://material.io/develop/web/
Thanks