mautic icon indicating copy to clipboard operation
mautic copied to clipboard

Fix: Improve dark theme contrast for token selection

Open cspenn opened this issue 10 months ago • 1 comments

Issue: #14659

This commit addresses a contrast issue in the dark theme where text within the token selection UI (and potentially other similar UI elements like tags or labels) was difficult to read.

The following adjustments were made to app/bundles/CoreBundle/Assets/css/app/less/variables.less within the :root[theme="dark"] definition:

  • Modified --layer-02 from #393939 to #333333 (darker background)
  • Modified --field-02 from #393939 to #333333 (darker background)
  • Modified --text-secondary from #c6c6c6 to #d0d0d0 (lighter text)
  • Modified --text-placeholder from #6f6f6f to #8a8a8a (lighter text)
  • Modified --text-helper from #8d8d8d to #9e9e9e (lighter text)

These changes increase the luminance difference between text and their typical backgrounds in the dark theme, improving readability and general accessibility for these UI components.

Q A
Bug fix? (use the a.b branch) ✔️❌
New feature/enhancement? (use the a.x branch) ✔️❌
Deprecations? ✔️❌
BC breaks? (use the c.x branch) ✔️❌
Automated tests included? ✔️❌
Related user documentation PR URL mautic/user-documentation#...
Related developer documentation PR URL mautic/developer-documentation-new#...
Issue(s) addressed Fixes #...

Description


📋 Steps to test this PR:

  1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)

cspenn avatar Jun 06 '25 17:06 cspenn

@cspenn thanks for your PR! Please fill in the PR description template. Since this is a UI change based on the title and description it would help a lot for testers if you'd show a screenshot of before and after.

Also, looking at the code changes there is lot more than just color changes. Is it related to this PR? Shouldn't it be pushed in a separate PR with its own description and testing steps?

escopecz avatar Jun 09 '25 15:06 escopecz

Hi @cspenn how are you getting on with addressing the feedback?

RCheesley avatar Jun 17 '25 09:06 RCheesley