Skip to content

Fix form-text contrast in dark mode #214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jamesmontemagno merged 3 commits into from
Dec 15, 2025
Merged

Fix form-text contrast in dark mode #214

jamesmontemagno merged 3 commits into from
Dec 15, 2025
+6 −1

Conversation

Copy link

Copilot AI commented Dec 15, 2025 •
edited
Loading

Bootstrap's .form-text helper class was rendering with insufficient contrast in dark mode—black text on dark purple background made the Analysis Type dropdown description nearly unreadable.

Changes

  • Override .form-text to use theme-aware --text-secondary variable
  • Applies to all form helper text throughout the application
/* Form text - ensure proper contrast in both light and dark themes */
.form-text {
    color: var(--text-secondary) !important;
}

Contrast ratios

  • Dark mode: 9.99:1 (#c8c0e7 on #201729)
  • Light mode: 6.78:1 (#5d5777 on #ffffff)

Both exceed WCAG AA standards.

Original prompt

This section details on the original issue you should resolve

<issue_title>Bad contrast on subtext on Feedback Analysis page (Dark Mode)</issue_title>
<issue_description>Image

On the main Feedback Analysis page when using dark mode the following text is black on a dark purple background making it almost impossible to see.

Analyzes feedback as if it's about YOUR product, focusing on improvements and user needs.

I highlighted the text in the screenshot to make it more visible.</issue_description>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@jamesmontemagno
Add CSS override for .form-text to fix dark mode contrast
d82ea4b 
Co-authored-by: jamesmontemagno <1676321+jamesmontemagno@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix bad contrast on subtext in dark mode Fix form-text contrast in dark mode Dec 15, 2025
@jamesmontemagno jamesmontemagno marked this pull request as ready for review December 15, 2025 22:47
@github-actions
Copy link

github-actions bot commented Dec 15, 2025

🚀 Staging Deployment Ready!

Your changes from commit 4afa7ad have been deployed to staging:

🌐 Staging URL: https://staging.feedbackflow.app

You can test your changes there before merging to production.

This comment will be updated with each new commit to this PR.

@jamesmontemagno jamesmontemagno merged commit 2aeace9 into main Dec 15, 2025
4 checks passed
@github-actions
Copy link

github-actions bot commented Dec 15, 2025

🎉 PR Merged

Your changes have been merged to main and will be deployed to production shortly!

The staging environment can be reused for future PRs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jamesmontemagno jamesmontemagno Awaiting requested review from jamesmontemagno

Assignees

@jamesmontemagno jamesmontemagno

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bad contrast on subtext on Feedback Analysis page (Dark Mode)

2 participants

@jamesmontemagno