update dark and light mode

build.sh

@@ -1,8 +0,0 @@
-#!/bin/bash
-echo "Building Tailwind CSS..."
-npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
-
-echo "Building Zola site..."
-zola build
-
-echo "✅ Build complete!"

public/js/main.js

@@ -1,5 +1,7 @@
 // Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
+  console.log("DOM loaded - initializing dark mode");
+  
   const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
   const mobileMenu = document.getElementById('mobile-menu');
   const menuIcons = menuButton.querySelectorAll('svg');
@@ -20,4 +22,77 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     });
   }
+
+  // Theme toggle functionality
+  const themeToggleBtn = document.getElementById('theme-toggle');
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
+
+  // Check if dark mode is already enabled
+  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
+    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  console.log("Initial dark mode state:", isDarkMode);
+
+  // Set initial theme
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.remove('hidden');
+      themeToggleDarkIcon.classList.add('hidden');
+    }
+  } else {
+    document.documentElement.classList.remove('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.add('hidden');
+      themeToggleDarkIcon.classList.remove('hidden');
+    }
+  }
+
+  // Toggle theme function
+  function toggleTheme() {
+    console.log("Toggle theme clicked");
+    
+    // Add transition class
+    document.documentElement.classList.add('transition');
+    
+    // Toggle theme
+    const isDark = document.documentElement.classList.contains('dark');
+    console.log("Current dark mode:", isDark);
+    
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.add('hidden');
+        themeToggleDarkIcon.classList.remove('hidden');
+      }
+      console.log("Switched to light mode");
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+      }
+      console.log("Switched to dark mode");
+    }
+    
+    // Remove transition class after transition completes
+    setTimeout(() => {
+      document.documentElement.classList.remove('transition');
+    }, 300);
+  }
+
+  // Add event listeners to toggle buttons
+  if (themeToggleBtn) {
+    console.log("Adding event listener to theme toggle button");
+    themeToggleBtn.addEventListener('click', toggleTheme);
+  }
+  
+  if (mobileThemeToggleBtn) {
+    console.log("Adding event listener to mobile theme toggle button");
+    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
+  }
 });

start.sh

@@ -1,6 +0,0 @@
-#!/bin/bash
-echo "Starting Tailwind CSS watcher & Zola live server..."
-
-npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve
-
-echo "🚀 Development server running!"

static/js/main.js

@@ -1,5 +1,7 @@
 // Mobile menu toggle
 document.addEventListener('DOMContentLoaded', function() {
+  console.log("DOM loaded - initializing dark mode");
+  
   const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
   const mobileMenu = document.getElementById('mobile-menu');
   const menuIcons = menuButton.querySelectorAll('svg');
@@ -20,4 +22,77 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     });
   }
+
+  // Theme toggle functionality
+  const themeToggleBtn = document.getElementById('theme-toggle');
+  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
+
+  // Check if dark mode is already enabled
+  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
+    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  
+  console.log("Initial dark mode state:", isDarkMode);
+
+  // Set initial theme
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.remove('hidden');
+      themeToggleDarkIcon.classList.add('hidden');
+    }
+  } else {
+    document.documentElement.classList.remove('dark');
+    if (themeToggleLightIcon && themeToggleDarkIcon) {
+      themeToggleLightIcon.classList.add('hidden');
+      themeToggleDarkIcon.classList.remove('hidden');
+    }
+  }
+
+  // Toggle theme function
+  function toggleTheme() {
+    console.log("Toggle theme clicked");
+    
+    // Add transition class
+    document.documentElement.classList.add('transition');
+    
+    // Toggle theme
+    const isDark = document.documentElement.classList.contains('dark');
+    console.log("Current dark mode:", isDark);
+    
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.add('hidden');
+        themeToggleDarkIcon.classList.remove('hidden');
+      }
+      console.log("Switched to light mode");
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+      if (themeToggleLightIcon && themeToggleDarkIcon) {
+        themeToggleLightIcon.classList.remove('hidden');
+        themeToggleDarkIcon.classList.add('hidden');
+      }
+      console.log("Switched to dark mode");
+    }
+    
+    // Remove transition class after transition completes
+    setTimeout(() => {
+      document.documentElement.classList.remove('transition');
+    }, 300);
+  }
+
+  // Add event listeners to toggle buttons
+  if (themeToggleBtn) {
+    console.log("Adding event listener to theme toggle button");
+    themeToggleBtn.addEventListener('click', toggleTheme);
+  }
+  
+  if (mobileThemeToggleBtn) {
+    console.log("Adding event listener to mobile theme toggle button");
+    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
+  }
 });

tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     './content/**/*.md',
     './themes/**/*.html',
   ],
+  darkMode: 'class',
   theme: {
     extend: {},
   },

templates/base.html

@@ -5,10 +5,78 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
     <link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
+    <style>
+        /* Light mode (default) */
+        body {
+            background-color: #f3f4f6;
+            color: #1f2937;
+        }
+        header nav {
+            background-color: #1f2937;
+            color: #f9fafb;
+        }
+        footer {
+            background-color: #ffffff;
+        }
+        footer p {
+            color: #6b7280;
+        }
+        
+        /* Dark mode */
+        html.dark body {
+            background-color: #111827 !important;
+            color: #f9fafb !important;
+        }
+        html.dark header nav {
+            background-color: #1f2937 !important;
+        }
+        html.dark footer {
+            background-color: #1f2937 !important;
+        }
+        html.dark footer p {
+            color: #9ca3af !important;
+        }
+        html.dark a {
+            color: #60a5fa !important;
+        }
+        html.dark a:hover {
+            color: #93c5fd !important;
+        }
+        html.dark .bg-gray-100 {
+            background-color: #111827 !important;
+        }
+        html.dark .bg-white {
+            background-color: #1f2937 !important;
+        }
+        html.dark .text-gray-900 {
+            color: #f9fafb !important;
+        }
+        html.dark .text-gray-500 {
+            color: #9ca3af !important;
+        }
+        html.dark .border-gray-200 {
+            border-color: #374151 !important;
+        }
+        html.dark button.bg-gray-800 {
+            background-color: #111827 !important;
+        }
+        html.dark button.hover\:bg-gray-700:hover {
+            background-color: #374151 !important;
+        }
+        
+        /* Transition effects */
+        html.transition,
+        html.transition *,
+        html.transition *:before,
+        html.transition *:after {
+            transition: all 0.3s ease-in-out !important;
+            transition-delay: 0 !important;
+        }
+    </style>
     <script src="{{ get_url(path='js/main.js') }}" defer></script>
     {% block head %}{% endblock %}
 </head>
-<body class="bg-gray-100 min-h-screen flex flex-col min-h-screen">
+<body class="bg-gray-100 min-h-screen flex flex-col">
     <header>
         {% include "partials/navigation.html" %}
     </header>

templates/partials/navigation.html

@@ -20,6 +20,16 @@
           <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
             Tailwind Docs
           </a>
+          <button id="theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+            <!-- Sun icon (light mode) -->
+            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+            </svg>
+            <!-- Moon icon (dark mode) -->
+            <svg id="theme-toggle-dark-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+          </button>
         </div>
       </div>
       <div class="-mr-2 flex md:hidden">
@@ -46,6 +56,12 @@
       <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-900 text-white{% else %}text-gray-300 hover:bg-gray-700 hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
       <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
       <a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Tailwind Docs</a>
+      <button id="mobile-theme-toggle" type="button" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
+        <span>Toggle Dark Mode</span>
+        <svg id="mobile-theme-toggle-icon" class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+        </svg>
+      </button>
     </div>
   </div>
 </nav>