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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user