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
This commit is contained in:
juanatsap
2025-11-23 08:37:29 +00:00
parent dc5bb3d4f3
commit 2f466e46bc
3 changed files with 128 additions and 4 deletions
+13 -3
View File
@@ -44,9 +44,19 @@ function setColorTheme(mode) {
// Initialize color theme
function initColorTheme() {
// Get saved preference or default to 'auto'
const savedTheme = localStorage.getItem('color-theme-mode') || 'auto';
setColorTheme(savedTheme);
// Check if theme was already set by FOUC prevention script
const existingTheme = document.documentElement.getAttribute('data-color-theme');
// If theme is already set (by FOUC script), save it to localStorage
if (existingTheme) {
// Save the FOUC-detected theme to localStorage
localStorage.setItem('color-theme-mode', existingTheme);
setColorTheme(existingTheme);
} else {
// Fallback: Get saved preference or default to 'auto'
const savedTheme = localStorage.getItem('color-theme-mode') || 'auto';
setColorTheme(savedTheme);
}
}
// Setup button click handler