From c834919a3c9beceb7c7e8562da444062f7fc9be9 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 30 Nov 2025 09:35:31 +0000
Subject: [PATCH] fix: Default to light theme for all first-time visitors

First-time visitors now always see light theme (paper aesthetic)
regardless of their system dark mode preference.

Users can still switch to dark or auto mode, and their preference
is saved to localStorage for future visits.

This maintains the professional CV paper appearance as the default
experience while giving users full control over their preference.
---
 static/js/color-theme.js |  6 +++---
 templates/index.html     | 14 +++-----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/static/js/color-theme.js b/static/js/color-theme.js
index f6fb03b..3e200cc 100644
--- a/static/js/color-theme.js
+++ b/static/js/color-theme.js
@@ -53,8 +53,8 @@ function initColorTheme() {
     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';
+    // Fallback: Get saved preference or default to 'light' (paper aesthetic)
+    const savedTheme = localStorage.getItem('color-theme-mode') || 'light';
     setColorTheme(savedTheme);
   }
 }
@@ -65,7 +65,7 @@ function setupColorThemeButton() {
   if (button) {
     button.addEventListener('click', () => {
       // Get current theme
-      const currentTheme = localStorage.getItem('color-theme-mode') || 'auto';
+      const currentTheme = localStorage.getItem('color-theme-mode') || 'light';
 
       // Cycle: auto → light → dark → auto
       if (currentTheme === 'auto') {
diff --git a/templates/index.html b/templates/index.html
index 6e4080f..6a16e0a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -71,17 +71,9 @@
     </style>
     <script>
     (function() {
-      let theme = localStorage.getItem('color-theme-mode');
-
-      // If no saved preference, set default based on device type
-      if (!theme) {
-        // Mobile devices default to light theme, desktop to auto
-        // Check multiple properties for better detection
-        const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
-        const isMobile = width <= 768;
-        theme = isMobile ? 'light' : 'auto';
-      }
-
+      // First-time visitors ALWAYS get light theme (paper aesthetic)
+      // Users can switch to dark/auto and their preference is saved
+      let theme = localStorage.getItem('color-theme-mode') || 'light';
       document.documentElement.setAttribute('data-color-theme', theme);
     })();
     </script>