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

assets/css/tailwind.css

@@ -1,6 +1,16 @@
 @import "tailwindcss";
 
 @theme {
+  /* Default Custom Properties (Dark Theme) */
+  --bg-primary: var(--color-gray-900);
+  --bg-secondary: var(--color-gray-800);
+  --bg-tertiary: var(--color-gray-700);
+  --text-primary: var(--color-gray-100);
+  --text-secondary: var(--color-gray-400);
+  --text-tertiary: var(--color-gray-300);
+  --brand-primary: var(--color-indigo-600);
+  --brand-secondary: var(--color-indigo-700);
+
   --color-gray-900: #1a1a1a;
   --color-gray-800: #2b2b2b;
   --color-gray-700: #3c3c3c;
@@ -10,12 +20,31 @@
   --color-gray-100: #f5f5f5;
   --color-indigo-600: #4f46e5;
   --color-indigo-700: #4338ca;
-  --font-family-sans: "Inter", sans-serif;
+
+  /* Font Families */
+  --font-family-body: "Montserrat", sans-serif;
+  --font-family-heading: "Playfair Display", serif;
+}
+
+/* Light Theme Overrides (outside @theme block) */
+html[data-theme='light'] {
+  --bg-primary: var(--color-gray-100);
+  --bg-secondary: var(--color-gray-200);
+  --bg-tertiary: var(--color-gray-300);
+  --text-primary: var(--color-gray-900);
+  --text-secondary: var(--color-gray-600);
+  --text-tertiary: var(--color-gray-700);
 }
 
 @layer base {
   body {
-    @apply bg-gray-900 text-gray-100;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: var(--font-family-body); /* Apply default body font */
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-heading); /* Apply heading font */
   }
 }
 
@@ -46,3 +75,4 @@
 #lightbox.show {
     animation: fadeIn 0.3s ease-out forwards;
 }
+

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');
+            });
+        });
+    }
 });