txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Default to light theme for all first-time visitors

Browse Source 
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.
This commit is contained in:
juanatsap
2025-11-30 09:35:31 +00:00
parent eb92f64e93
commit c834919a3c
2 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/color-theme.js
+3 -3
View File
@@ -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') {
templates/index.html
+3 -11
View File
@@ -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>