Fix invisible dark-mode text in shared modal components - #234
Merged
Merged
Conversation
DialogModal, ConfirmationModal, and the underlying Modal.vue panel hardcoded bg-white with no dark: variant, and their title/content text used text-gray-900/text-gray-600 with no dark: variants either. Since Tailwind's dark mode here follows the OS prefers-color-scheme media query with no in-app toggle, any visitor with OS dark mode enabled saw near-black text on a white panel that itself never adapted, rendering these modals effectively illegible. This affected every consumer app-wide: Delivery Details, API Token, Event trigger, and all delete/confirmation modals. Bring the panel background and text colors in line with the dark: variants already used elsewhere in the app (dark:bg-gray-800, dark:text-white, dark:text-gray-400, dark:bg-gray-700 for footers).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was broken
The shared modal components (
Modal.vue,DialogModal.vue,ConfirmationModal.vue) hardcoded abg-whitepanel background andtext-gray-900/text-gray-600text colors with nodark:variants. This app uses Tailwind's defaultmedia-based dark mode strategy (no in-app toggle, nodarkModekey intailwind.config.js), so dark styling activates automatically from the OS'sprefers-color-scheme: dark.For any visitor with OS dark mode enabled, the modal panel stayed white-on-white... actually stayed white, but the surrounding page went dark, while the title/content text stayed near-black (
text-gray-900) — in practice this reads as unreadable/very low contrast once other on-page elements correctly switch to their dark variants. This affected every consumer of these shared components app-wide: Delivery Details, API Token, Event trigger, and all delete/confirmation modals (Profile forms, Teams, Endpoints, Events, Deliveries pages).What changed
Added
dark:variants consistent with the conventions already used elsewhere in the app:Modal.vue: panel wrapperbg-white→bg-white dark:bg-gray-800DialogModal.vue: title/content text getsdark:text-white/dark:text-gray-400; footerbg-gray-100→bg-gray-100 dark:bg-gray-700ConfirmationModal.vue: same background/text treatment, plus its icon circle (bg-red-100/text-red-600) gets matchingdark:variantsTesting
vendor/bin/pint --dirty— pass (no PHP files changed)npm run build— builds cleanlycomposer test(full PHPUnit suite) — 274 passed, 1 skipped, 0 failed; no regressionsThis is a CSS-only Vue template change with no backend behavior affected, so no new PHPUnit test was added — the repo has no JS unit-test runner (Vitest/Jest) configured, and the existing Playwright e2e suite is not wired into CI (tracked separately in #95). The full PHPUnit suite was run to confirm no backend regressions.
Fixes #149