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
68 lines
2.5 KiB
Markdown
68 lines
2.5 KiB
Markdown
# 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 `!important` rules 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:
|
|
|
|
1. Open `http://localhost:8080` in your browser
|
|
2. Click the theme toggle to switch to light theme
|
|
3. Verify all text is clearly readable
|
|
4. Check that the background is not too bright
|
|
5. Test form interactions and dropdowns
|
|
6. Verify status indicators are clearly visible
|
|
|
|
## Files Modified
|
|
|
|
- `public/styles/theme.css` - Updated color palette and added contrast fixes
|
|
- `public/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.
|