934aac41dc
Early theme initialization to prevent flashing Proper component and script loading order Enhanced error handling and fallbacks Better theme state persistence System theme preference detection The theme system will now work correctly in the production environment when deployed through Coolify with Nixpacks build pack.
65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
// Theme handling
|
|
function initTheme() {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const savedTheme = localStorage.getItem('theme');
|
|
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
updateThemeIcon(savedTheme);
|
|
} else if (prefersDark) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
updateThemeIcon('dark');
|
|
}
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeIcon(newTheme);
|
|
}
|
|
|
|
function updateThemeIcon(theme) {
|
|
const themeIcon = document.querySelector('.theme-toggle i');
|
|
if (themeIcon) {
|
|
themeIcon.className = theme === 'dark'
|
|
? 'fas fa-sun'
|
|
: 'fas fa-moon';
|
|
}
|
|
}
|
|
|
|
// Mobile menu handling
|
|
function toggleMobileMenu() {
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
navMenu.classList.toggle('active');
|
|
|
|
const menuIcon = document.querySelector('.mobile-menu-toggle i');
|
|
menuIcon.className = navMenu.classList.contains('active')
|
|
? 'fas fa-times'
|
|
: 'fas fa-bars';
|
|
}
|
|
|
|
// Initialize on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initTheme();
|
|
|
|
// Add click handlers
|
|
document.querySelector('.theme-toggle')?.addEventListener('click', toggleTheme);
|
|
document.querySelector('.mobile-menu-toggle')?.addEventListener('click', toggleMobileMenu);
|
|
|
|
// Close mobile menu when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
|
|
|
if (navMenu?.classList.contains('active') &&
|
|
!e.target.closest('.nav-menu') &&
|
|
!e.target.closest('.mobile-menu-toggle')) {
|
|
navMenu.classList.remove('active');
|
|
mobileMenuToggle.querySelector('i').className = 'fas fa-bars';
|
|
}
|
|
});
|
|
});
|