css changes

[DineshSivalanka]

Summary [required]

This PR improves the readability and accessibility of roadmap comparison cards in dark mode by increasing the contrast between badge backgrounds and text colors. The updated styling ensures that skill tags, category badges, and comparison elements remain clearly visible and easier to read while maintaining a consistent visual design.

Related Issue [required]

Closes #838

Type of Change [required]

• Style — CSS or visual changes only, no logic change

What Was Changed [required]

File	Change made
static/style.css	Updated dark mode styling for roadmap comparison badges, skill tags, and comparison elements to improve text visibility and color contrast. Added lighter text colors and adjusted badge backgrounds for better accessibility.

How to Test This PR [required]

1. Clone this branch:

   git checkout style/dark-mode-badges

2. Install dependencies:

   pip install -r requirements.txt

3. Run the application:

   python app.py

4. Open http://127.0.0.1:5000

5. Enable Dark Mode using the theme toggle.

6. Navigate to the Compare page.

7. Compare two roadmaps (e.g., React vs Angular).

8. Scroll to the Side-by-Side Details and Skills Breakdown sections.

9. Verify that:

   • Skill tags are clearly readable.
   • Badge text has sufficient contrast against backgrounds.
   • Colors remain consistent across comparison cards.
   • No text blends into the background in dark mode.

Test Results [required]

Visual verification completed successfully:

• Improved readability of skill badges in dark mode.
• No UI breakage observed.
• Responsive layout verified on mobile and desktop viewports.
• No console errors introduced.

Screenshots (if UI change)

Before	After
Dark badges with low-contrast text	Improved badge visibility with higher contrast text and backgrounds

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines.
• My branch name follows the convention: style/dark-mode-badges
• I have run relevant tests and verified the application works correctly.
• I have not introduced any print() or console.log() debug statements.
• I have not modified files outside the scope of the linked issue.
• I tested the UI at both mobile (375px) and desktop (1280px) resolutions.
• No logic or backend functionality was modified.

Notes for Reviewer

This PR focuses solely on improving dark mode accessibility and visual consistency. No functional or behavioral changes were made. The update follows accessibility best practices by increasing contrast between badge text and backgrounds, making roadmap comparison information easier to read.

[vercel]

@DineshSivalanka is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.