Skip to content

Fix dark mode visibility issues across analytics, syllabus, notes, an…#298

Open
GAURI167007 wants to merge 1 commit into
lovelymahor:mainfrom
GAURI167007:fix-darkmode-visibility
Open

Fix dark mode visibility issues across analytics, syllabus, notes, an…#298
GAURI167007 wants to merge 1 commit into
lovelymahor:mainfrom
GAURI167007:fix-darkmode-visibility

Conversation

@GAURI167007
Copy link
Copy Markdown

Related Issue

Closes #295

Dark Mode Visibility & Readability Improvements

Overview

This PR fixes multiple dark mode UI visibility issues across the Analytics, Syllabus, Notes, and Feedback pages.

Several sections across the website had text becoming invisible or difficult to read in dark mode because light-colored containers were combined with white/light text styles. This PR improves accessibility, readability, and overall UI consistency while preserving the existing visual design and animations.

The fixes were carefully implemented using scoped dark mode CSS overrides so the light theme remains completely unaffected.


Changes Made

1. Analytics Page Improvements

Fixed Dark Mode Visibility Issues

Resolved invisible or low-contrast text issues in:

  • Insights Summary section
  • Filter by Subject section
  • Download Notes section
  • Chart labels and legends

Improvements Added

  • Updated heading colors for dark mode
  • Fixed paragraph visibility inside light containers
  • Improved select dropdown readability
  • Updated button and filter text contrast
  • Ensured chart axis labels remain visible
  • Maintained the original card/container styling instead of forcing dark backgrounds

Technical Changes

Added dark mode scoped styling using:

html[data-theme="dark"]

Updated:

  • headings
  • labels
  • paragraph text
  • dropdowns
  • buttons
  • chart text colors

2. Syllabus Page Improvements

Fixed Issues

Resolved major dark mode problems where:

  • headings disappeared completely
  • section titles became invisible
  • subject titles were unreadable
  • filter labels blended into the background

UI Enhancements

Updated visibility for:

  • Hero section headings
  • Results section titles
  • Card titles
  • Subject headings
  • Filter labels
  • Dropdown text
  • Statistics section
  • Tags and metadata

Important Design Decision

The original UI design was preserved:

  • containers/cards were NOT converted to black
  • gradients and visual styling were kept intact
  • only text contrast and readability were improved

Technical Changes

Added scoped dark mode overrides for:

html[data-theme="dark"] .syllabus

Updated:

  • h1/h2/h3/h4 colors
  • card text
  • labels
  • select fields
  • metadata text
  • result counters

3. Notes Page Improvements

Fixed Issues

Applied the same dark mode fixes used in other pages to ensure consistency.

Updated Components

Fixed visibility problems in:

  • note cards
  • headings
  • filters
  • dropdowns
  • text sections
  • metadata labels

Improvements

  • Better text contrast
  • Improved readability
  • Consistent dark mode appearance
  • Preserved original layout and design

4. Feedback Page Improvements

Fixed Major Visibility Problems

Several texts inside feedback cards and containers became invisible in dark mode.

This PR resolves issues affecting:

  • student names
  • subject names
  • paragraph text
  • labels
  • feedback descriptions
  • modal text
  • form fields
  • select dropdowns
  • textarea content

Additional Fixes

Updated:

  • feedback card readability
  • modal accessibility
  • form input contrast
  • text visibility inside all feedback sections

Technical Changes

Added dark mode-specific overrides using:

html[data-theme="dark"] .feedback

Updated:

  • headings
  • spans
  • labels
  • form inputs
  • textareas
  • selects
  • feedback cards
  • modal content

Accessibility Improvements

Enhanced Readability

  • Improved contrast ratios for dark mode
  • Fixed invisible text issues
  • Ensured important content remains readable across all sections

Responsive Compatibility

Verified fixes across:

  • desktop
  • tablet
  • mobile layouts

Theme Consistency

  • Light theme remains unchanged
  • Dark theme now provides a much smoother user experience
  • Existing gradients, animations, and UI aesthetics were preserved

Technical Summary

CSS Improvements

Implemented scoped dark mode fixes using:

html[data-theme="dark"]

This approach:

  • prevents style leakage
  • keeps fixes component-specific
  • avoids breaking light mode styles

Components Updated

  • Analytics
  • Syllabus
  • Notes
  • Feedback

Preserved Existing Features

  • animations
  • responsive design
  • gradients
  • hover effects
  • layout structure
  • component styling

Result

The website now provides:

  • significantly improved dark mode readability
  • consistent text visibility across all pages
  • better accessibility
  • cleaner user experience
  • preserved original UI aesthetics without unnecessary redesigns

All major dark mode visibility issues reported in #295 have been resolved successfully.

EXAMPLE:

BEFORE:

Screenshot 2026-05-21 203849 Screenshot 2026-05-21 203746 Screenshot 2026-05-21 185318 Screenshot 2026-05-21 184020 Screenshot 2026-05-21 135636

AFTER:

Screenshot 2026-05-21 203503 Screenshot 2026-05-21 203630 Screenshot 2026-05-21 203653 Screenshot 2026-05-21 204138 Screenshot 2026-05-21 204202

@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

@GAURI167007 is attempting to deploy a commit to the Lovely Mahour's projects Team on Vercel.

A member of the Team first needs to authorize it.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode: Headings not visible on About page and other sections

1 participant