Patrick Balsiger
4b1011ce5e
✨ Features: - Complete light theme with improved color palette - Theme switcher in header with sun/moon icons - Theme persistence using localStorage - Smooth transitions between themes 🎨 Theme Improvements: - Softer, easier-on-eyes light theme colors - Fixed text contrast issues across all components - Enhanced member card and tab text readability - Fixed hover effects that made text disappear - Improved member overlay header and body styling 🔧 Technical Implementation: - CSS variables system for easy theme management - JavaScript ThemeManager class for theme switching - Responsive design for mobile devices - Comprehensive hover state fixes - Z-index solutions for text visibility 📱 Components Fixed: - Member cards (hostname, IP, latency, details) - Navigation tabs and content - Task summaries and progress items - Capability forms and API endpoints - Member overlay popup - Form inputs and dropdowns - Status indicators and label chips 🎯 Accessibility: - WCAG AA contrast compliance - Proper color hierarchy - Clear visual feedback - Mobile-responsive design Files added: - public/styles/theme.css - Theme system and variables - public/scripts/theme-manager.js - Theme management logic - THEME_README.md - Comprehensive documentation - THEME_IMPROVEMENTS.md - Improvement details Files modified: - public/index.html - Added theme switcher and script includes - public/styles/main.css - Updated to use CSS variables
2.5 KiB
2.5 KiB
Theme Improvements - Better Contrast and Readability
Issues Fixed
1. Too Bright Light Theme
- Before: Very bright white backgrounds that were harsh on the eyes
- After: Softer, more muted backgrounds using
#f1f5f9,#e2e8f0, and#cbd5e1
2. Poor Text Contrast
- Before: Many text elements had the same color as background, making them invisible
- After: Strong contrast with dark text (
#0f172a,#1e293b,#334155) on light backgrounds
3. Specific Text Color Issues Fixed
- Member hostnames and IPs now use
var(--text-primary)for maximum readability - Latency labels and values have proper contrast
- Navigation tabs are clearly visible in both themes
- Form inputs and dropdowns have proper text contrast
- Status indicators have appropriate colors with good contrast
Color Palette Updates
Light Theme (Improved)
- Background: Softer gradients (
#f1f5f9→#e2e8f0→#cbd5e1) - Text Primary:
#0f172a(very dark for maximum contrast) - Text Secondary:
#1e293b(dark gray) - Text Tertiary:
#334155(medium gray) - Text Muted:
#475569(lighter gray) - Borders: Stronger borders (
rgba(30, 41, 59, 0.2)) for better definition
Dark Theme (Unchanged)
- Maintains the original dark theme for users who prefer it
- All existing functionality preserved
Technical Improvements
CSS Specificity
- Added
!importantrules for critical text elements to ensure they override any conflicting styles - Used
[data-theme="light"]selectors for theme-specific overrides
Contrast Ratios
- All text now meets WCAG AA contrast requirements
- Status indicators have clear, distinguishable colors
- Interactive elements have proper hover states
Readability Enhancements
- Removed problematic opacity values that made text invisible
- Ensured all form elements have proper text contrast
- Fixed dropdown options to be readable
- Improved error and success message visibility
Testing
To test the improvements:
- Open
http://localhost:8080in your browser - Click the theme toggle to switch to light theme
- Verify all text is clearly readable
- Check that the background is not too bright
- Test form interactions and dropdowns
- Verify status indicators are clearly visible
Files Modified
public/styles/theme.css- Updated color palette and added contrast fixespublic/styles/main.css- Fixed text color issues and opacity problems
The light theme is now much easier on the eyes with proper contrast for all text elements.