Fix: Improve dark theme contrast for token selection
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-02from#393939to#333333(darker background) - Modified
--field-02from#393939to#333333(darker background) - Modified
--text-secondaryfrom#c6c6c6to#d0d0d0(lighter text) - Modified
--text-placeholderfrom#6f6f6fto#8a8a8a(lighter text) - Modified
--text-helperfrom#8d8d8dto#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:
- Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
@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?
Hi @cspenn how are you getting on with addressing the feedback?