mirror of
https://github.com/itflow-org/itflow
synced 2026-09-21 14:11:17 +00:00
Add Darkmode support for Sweetalert2 Modals
This commit is contained in:
@@ -1083,6 +1083,26 @@ a:focus {
|
|||||||
--fc-classic-button-foreground: #000;
|
--fc-classic-button-foreground: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- SweetAlert2 ----------------------------------------------------------
|
||||||
|
v11 keys its dark palette on [data-swal2-theme=dark], an attribute it sets
|
||||||
|
on its own container from the `theme` option - which defaults to "light",
|
||||||
|
so the confirm dialogs stayed white in dark mode. js/confirm_modal.js now
|
||||||
|
hands it the app's mode.
|
||||||
|
|
||||||
|
Same treatment as FullCalendar above: its dark theme is its own near-black
|
||||||
|
(#19191a) next to a #212529 page, so the two seed variables are repointed
|
||||||
|
onto the app's colours. Everything else in its dark block - text, input
|
||||||
|
background, validation message - derives from these two, so nothing further
|
||||||
|
needs restating here. */
|
||||||
|
[data-swal2-theme=dark] {
|
||||||
|
--swal2-dark-theme-black: var(--bs-body-bg);
|
||||||
|
--swal2-dark-theme-white: var(--bs-body-color);
|
||||||
|
|
||||||
|
/* The popup is borderless by default, which reads fine as a white panel on
|
||||||
|
the backdrop but leaves a #212529 one with no edge against it. */
|
||||||
|
--swal2-border: 1px solid var(--bs-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
/* --- Close button focus ring ---------------------------------------------
|
/* --- Close button focus ring ---------------------------------------------
|
||||||
Bootstrap styles .btn-close on plain :focus rather than :focus-visible, so
|
Bootstrap styles .btn-close on plain :focus rather than :focus-visible, so
|
||||||
any programmatic or mouse-driven focus leaves a visible ring on it. Keyboard
|
any programmatic or mouse-driven focus leaves a visible ring on it. Keyboard
|
||||||
|
|||||||
@@ -24,6 +24,10 @@ document.addEventListener('click', function (e) {
|
|||||||
const destructive = link.classList.contains('text-danger');
|
const destructive = link.classList.contains('text-danger');
|
||||||
|
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
|
// SweetAlert2 has no idea about Bootstrap's mode - it keys its own dark
|
||||||
|
// palette off the `theme` option and defaults to 'light', so the dialog
|
||||||
|
// stayed white on a dark page. Read at fire time, not at load.
|
||||||
|
theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light',
|
||||||
title: link.dataset.confirmTitle || 'Are you sure?',
|
title: link.dataset.confirmTitle || 'Are you sure?',
|
||||||
text: link.dataset.confirmText || '',
|
text: link.dataset.confirmText || '',
|
||||||
icon: link.dataset.confirmIcon || (destructive ? 'warning' : 'question'),
|
icon: link.dataset.confirmIcon || (destructive ? 'warning' : 'question'),
|
||||||
|
|||||||
Reference in New Issue
Block a user