 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 |
|