sweetalert2 / sweetalert2-themes Goto Github PK
View Code? Open in Web Editor NEWThemes for SweetAlert2: Dark, Minimal, Borderless, Bootstrap, Material UI, WordPress Admin, Bulma, ...
License: MIT License
Themes for SweetAlert2: Dark, Minimal, Borderless, Bootstrap, Material UI, WordPress Admin, Bulma, ...
License: MIT License
Hi,
is it possible to get a SweetAlert2 theme using MDC?
Reference: https://material.io/develop/web/
Thanks
Dark theme doesn't work
Use dark theme.
https://github.com/cliesh/editor/tree/galilee
Run the demo:
npm run start:ng
npm run start:electron
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
Hello how to enable the minimal theme after import url.
THanks
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.
Toast for dark theme is shown with default styling
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!
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
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.
I want to have the same behavior as on the documentation when I enable the borderless theme.
You can reproduce easily a demo on your own computer, I have written the whole source code above.
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/
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
swal.fire({
type:'success',
title:"Hello World",
theme:'dark'
})
<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>
@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)
Specs: https://next.material-ui.com/demos/dialogs/
The theme name should be material-ui
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?
Live demo: https://sweetalert2.github.io
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!
Originally posted by @limonte in #94 (comment)
Specs: https://bulma.io/documentation/components/modal/ (see the "Modal card" example)
#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:
sweetalert2
projectgit clone
inside a new foldernpm i
npm audit fix
just to be safe I run audit fixnpm run create-new-theme borderless
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!
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
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
PS: If you like , could help on this
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:
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.
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 π¦π
hi I want dark theme for material ui
I want to support dark theme in material themes
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
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/
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
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.
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:
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.
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 π¦π
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.
No SassError. π
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';
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.
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.
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
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: "
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
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)
Remove border-radius
, shadows, animations from the default theme
The theme name should be minimal
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.
.github/workflows/ci.yml
actions/checkout v3
cycjimmy/semantic-release-action v2
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
Each theme should have its minified version for people who will go with the old-school way of including CSS files in their projects.
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:
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.
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 π¦π
It will help with reporting and debugging issues.
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)
Line 20 : max-width: calc(100% - #{$swal2-container-padding} * 2);
Line 1032 : max-width: calc(100% - 24px 16px * 2);
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.
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)
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
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/
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.
Add ripple effect on material-ui buttons
Support JS along with SCSS
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.