Issue: Dark Mode Readability Problems in Dashboard #88
Description
Issue: Dark Mode Readability Problems in Dashboard
Description
The current dark mode implementation in the dashboard has significant readability issues that make it difficult for users to read content, particularly in the resource cards and dropdown menus.
Problem Areas
1. Card Titles
- Card titles are using
text-slate-900which appears nearly black on the dark background - This creates extremely poor contrast and makes titles almost invisible
2. Card Descriptions
- Description text uses
text-slate-600which is too dark for the dark background - Users struggle to read the content of resource notes
3. Dropdown Menus
- The "More actions" dropdown menu lacks proper dark mode styling
- Menu items appear with dark text on a light background even in dark mode
- Delete button doesn't have appropriate dark mode hover states
4. Date and Border Elements
- Date text at the bottom of cards is not visible in dark mode
- Border separators between sections are too dark to see
- Collection count indicators lack proper dark mode colors
Screenshots
Expected Behavior
- Card titles should be clearly visible with high contrast (white or very light gray)
- Card descriptions should use a lighter gray color that's easy to read
- Dropdown menus should have dark backgrounds with light text
- All text elements should maintain WCAG AA contrast standards
- Border elements should be visible but subtle
Technical Details
- Affected Component:
app/components/Dashboard.tsx - Root Cause: Missing
dark:variants for text colors and backgrounds - Browser: All browsers
- Theme System: Tailwind CSS with
classdark mode strategy
Proposed Solution
Add appropriate dark: utility classes to all text and background elements:
- Card titles:
dark:text-white - Card descriptions:
dark:text-gray-300 - Dropdown menu background:
dark:bg-gray-800 - Dropdown menu items:
dark:text-gray-200 - Date text:
dark:text-gray-400 - Borders:
dark:border-gray-700
Priority
High - This affects user experience significantly and makes the dark mode feature nearly unusable.
Labels
bugui/uxdark-modeaccessibilityhigh-priority