feat: Add comprehensive light theme and theme switcher
✨ 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
This commit is contained in:
67
THEME_IMPROVEMENTS.md
Normal file
67
THEME_IMPROVEMENTS.md
Normal file
@@ -0,0 +1,67 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user