feat: Implement light theme, mobile menu, font and image fallback

assets/js/main.js

@@ -2,6 +2,10 @@
 document.addEventListener('DOMContentLoaded', () => {
     console.log('Palina theme loaded!');
 
+    const htmlElement = document.documentElement;
+    // Remove 'hidden' class from html to prevent FOUC
+    htmlElement.classList.remove('hidden');
+
     // Staggered fade-in animation for post grid
     const gridItems = document.querySelectorAll('.post-grid-item');
     gridItems.forEach((item, index) => {
@@ -40,4 +44,50 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
+
+    // Theme Switcher
+    const themeToggle = document.getElementById('theme-toggle');
+    // const htmlElement = document.documentElement; // Already defined above
+
+    const currentTheme = localStorage.getItem('theme');
+    if (currentTheme) {
+        htmlElement.setAttribute('data-theme', currentTheme);
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+        // Default to light theme if system preference is light
+        htmlElement.setAttribute('data-theme', 'light');
+    }
+
+    if (themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            let newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+            htmlElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+        });
+    }
+
+    // Mobile Menu
+    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+    const mobileMenuClose = document.getElementById('mobile-menu-close');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (mobileMenuToggle && mobileMenu && mobileMenuClose) {
+        mobileMenuToggle.addEventListener('click', () => {
+            mobileMenu.classList.remove('-translate-x-full');
+            mobileMenu.classList.add('translate-x-0');
+        });
+
+        mobileMenuClose.addEventListener('click', () => {
+            mobileMenu.classList.remove('translate-x-0');
+            mobileMenu.classList.add('-translate-x-full');
+        });
+
+        // Close menu if a link is clicked
+        const mobileNavLinks = mobileMenu.querySelectorAll('a');
+        mobileNavLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.remove('translate-x-0');
+                mobileMenu.classList.add('-translate-x-full');
+            });
+        });
+    }
 });