fix: improve dark theme contrast in download and legal/privacy modal (#2920)

[AnvitaPrasad]

🔗 Linked issue

Resolves #2920

📚 Description

This PR fixes dark-theme contrast issues in the homepage download section and legal/privacy modal.

In dark mode, multiple texts were hard to read due to light text on very light backgrounds (for example: “Try it now”, “JabRef is free and works across all your devices.”, inline “or”, “Also available for…”, and “Change Log / Development Builds”).

Changes made:

• Improved contrast in the download section by using explicit theme-aware text and link colors.
• Fixed legal/privacy modal readability by setting explicit readable text color on the modal surface.
• Improved modal close button visibility.

Screenshots

[Copilot]

Pull request overview

This PR updates landing page and modal styling to improve readability/contrast (including dark mode support on the download section) and make the modal close control more visible.

Changes:

• Adjust modal dialog base text color and close button visibility styling.
• Add dark-mode-aware background and text colors to the landing page download section.
• Update link color/hover styling in the download section for improved contrast across themes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
components/ModalDialog.vue	Tweaks modal text color and close button styling to improve visibility.
components/LandingPageDownload.client.vue	Adds dark-mode background/text/link styles to improve legibility in the download section.

---

You can also share your feedback on Copilot code review. Take the survey.

[github-actions]

Deployed b67b5a3 to https://gentle-forest-03418aa03-2924.westeurope.3.azurestaticapps.net

[koppor]

Great direction — switching to a consistent dark theme eliminates the critical contrast failures the previous design had (the faded headings in the light section were sitting around 1.8:1, well below WCAG AA). That's a meaningful accessibility win and the main text hierarchy now reads cleanly throughout.

Two things worth polishing before merge:

Section separation — the previous two-tone layout used the background shift as a structural cue to signal section boundaries. That affordance is gone now that both sections share the same dark background. Users scrolling past the fold lose their sense of position. Rather than a one-off fix, this is a good opportunity to introduce a small surface scale:

--surface-base:    #12121e;  /* page background */
--surface-raised:  #1a1a2e;  /* alternating sections */
--surface-overlay: #222238;  /* modals, dropdowns */

Alternating base → raised → base restores the spatial grammar and gives future contributors a system to work within rather than ad-hoc hex values.

Secondary text contrast — the helper text under the download buttons and the secondary navigation links ("Windows Portable", "Change Log", etc.) are sitting around 3.0–3.5:1. That clears the large-text threshold but misses WCAG AA for small normal-weight text (4.5:1). A simple nudge from ~#888 to ~#aaa fixes this without touching the visual feel.

The hard part (killing the broken light section) is done. These two follow-ups would make this a genuinely solid baseline for the dark theme going forward.

---

AI-generated comment by Claude Sonnet 4.6 Extended - prompted, iterated, and finally approved by @koppor

[ThiloteE]

Is this ready for review again or what's the status here? Anvita seems to have used AI and Koppor as well... so does somebody actually know if this PR is any good?

[ThiloteE]

Not sure, if playing AI ping pong and then going afk is the right thing to do when it comes to the frontpage of our website...