Files
cv-site/templates
juanatsap 2f466e46bc feat: Default to light theme on mobile devices on first visit
Implements device-aware theme defaults:
- Mobile devices (≤768px): Default to light theme
- Desktop devices (>768px): Default to auto theme
- Saved preferences: Always respected regardless of device

Implementation:
1. FOUC Prevention Script (templates/index.html):
   - Detects device type using window.innerWidth/clientWidth/screen.width
   - Sets initial theme before page render to prevent flash
   - Mobile: 'light', Desktop: 'auto'

2. Theme Initialization (static/js/color-theme.js):
   - Modified initColorTheme() to respect FOUC-detected theme
   - Saves FOUC-detected theme to localStorage for persistence
   - Prevents overwriting mobile detection with 'auto' default

Test Coverage:
- Test 1: Mobile first visit → light theme 
- Test 2: Desktop first visit → auto theme 
- Test 3: Saved preference honored → dark theme 

Files Modified:
- templates/index.html: Added mobile detection in FOUC prevention
- static/js/color-theme.js: Respect FOUC-detected theme
- tests/mjs/49-mobile-light-theme-default.mjs: Comprehensive test suite

Screenshots:
- tests/screenshots/mobile-light-theme-default.png
- tests/screenshots/desktop-auto-theme-default.png
2025-11-23 08:37:29 +00:00
..