diff --git a/css/itflow_custom.css b/css/itflow_custom.css index 43f33160d..8b4032904 100644 --- a/css/itflow_custom.css +++ b/css/itflow_custom.css @@ -1083,6 +1083,26 @@ a:focus { --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 --------------------------------------------- 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 diff --git a/js/confirm_modal.js b/js/confirm_modal.js index e755a3b6a..718df23b4 100644 --- a/js/confirm_modal.js +++ b/js/confirm_modal.js @@ -24,6 +24,10 @@ document.addEventListener('click', function (e) { const destructive = link.classList.contains('text-danger'); 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?', text: link.dataset.confirmText || '', icon: link.dataset.confirmIcon || (destructive ? 'warning' : 'question'),