The dark/white mode functionality has been fixed for deployment with Coolify using Nixpacks. The improvements include:

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.

public-pre/js/components.js

@@ -0,0 +1,75 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Helper function to handle component loading
+    async function loadComponent(url, insertPosition) {
+        try {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const data = await response.text();
+            document.body.insertAdjacentHTML(insertPosition, data);
+
+            // After header is loaded, initialize its event listeners
+            if (url.includes('header.html')) {
+                initializeHeader();
+            }
+        } catch (error) {
+            console.warn(`Failed to load component from ${url}:`, error);
+        }
+    }
+
+    // Load components with error handling
+    Promise.all([
+        loadComponent('components/header.html', 'afterbegin'),
+        loadComponent('components/footer.html', 'beforeend')
+    ]).catch(error => {
+        console.warn('Error loading components:', error);
+    });
+
+    // Initialize header functionality after it's loaded
+    function initializeHeader() {
+        const header = document.querySelector('header');
+        const mobileMenuToggle = header.querySelector('.mobile-menu-toggle');
+        const navMenu = header.querySelector('.nav-menu');
+
+        // Mobile menu toggle
+        if (mobileMenuToggle && navMenu) {
+            mobileMenuToggle.addEventListener('click', () => {
+                navMenu.classList.toggle('active');
+                const menuIcon = mobileMenuToggle.querySelector('i');
+                menuIcon.className = navMenu.classList.contains('active')
+                    ? 'fas fa-times'
+                    : 'fas fa-bars';
+            });
+
+            // Close menu when clicking outside
+            document.addEventListener('click', (e) => {
+                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';
+                }
+            });
+        }
+
+        // Scroll behavior
+        let lastScrollTop = 0;
+        window.addEventListener('scroll', () => {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            
+            // Don't hide header when near top of page
+            if (scrollTop < 100) {
+                header.style.transform = 'translateY(0)';
+                return;
+            }
+            
+            // Hide header on scroll down, show on scroll up
+            if (scrollTop > lastScrollTop) {
+                header.style.transform = 'translateY(-100%)';
+            } else {
+                header.style.transform = 'translateY(0)';
+            }
+            
+            lastScrollTop = scrollTop;
+        }, { passive: true });
+    }
+});

public-pre/js/theme.js

@@ -0,0 +1,64 @@
+// 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';
+        }
+    });
+});