the dark mode fix is in

assets/css/src/input.css

@@ -6,7 +6,22 @@
     .btn-primary {
         @apply inline-flex items-center px-6 py-2.5 border border-transparent rounded-full shadow-md text-sm font-medium text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all;
     }
+    /* Default icon style (moon icon) */
+    #theme-toggle+.theme-toggle-btn i::before {
+        content: "\f186";
+        /* Moon icon */
+        font-family: "Font Awesome 5 Free";
+        font-weight: 900;
+        /* Solid icon */
+    }
 
+    /* Change to sun icon and color when checkbox is checked */
+    #theme-toggle:checked+.theme-toggle-btn i::before {
+        content: "\f185";
+        /* Sun icon */
+        color: theme('colors.yellow.400');
+        /* Tailwind yellow-400 color */
+    }
     .btn-secondary {
         @apply inline-flex items-center px-6 py-2.5 border border-gray-200 dark:border-gray-700 rounded-full shadow-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all;
     }
@@ -137,6 +152,6 @@
 
     /* Turnstile Widget */
     .turnstile {
-        @apply flex justify-center items-center my-4;
+        @apply flex items-center justify-center my-4;
     }
 }

static/css/tailwind.css

@@ -1435,6 +1435,25 @@ select {
   --tw-ring-offset-width: 2px;
 }
 
+/* Default icon style (moon icon) */
+
+#theme-toggle+.theme-toggle-btn i::before {
+  content: "\f186";
+  /* Moon icon */
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  /* Solid icon */
+}
+
+/* Change to sun icon and color when checkbox is checked */
+
+#theme-toggle:checked+.theme-toggle-btn i::before {
+  content: "\f185";
+  /* Sun icon */
+  color: #facc15;
+  /* Tailwind yellow-400 color */
+}
+
 .btn-secondary {
   display: inline-flex;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2098,18 +2117,10 @@ select {
   position: relative;
 }
 
-.right-3 {
-  right: 0.75rem;
-}
-
 .top-1\/2 {
   top: 50%;
 }
 
-.top-2\.5 {
-  top: 0.625rem;
-}
-
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -2305,6 +2316,10 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -2567,10 +2582,6 @@ select {
   background-color: rgb(255 255 255 / 0.7);
 }
 
-.bg-white\/80 {
-  background-color: rgb(255 255 255 / 0.8);
-}
-
 .bg-white\/90 {
   background-color: rgb(255 255 255 / 0.9);
 }
@@ -3156,10 +3167,6 @@ select {
   background-color: rgb(55 65 81 / 0.5);
 }
 
-.dark\:bg-gray-700\/80:is(.dark *) {
-  background-color: rgb(55 65 81 / 0.8);
-}
-
 .dark\:bg-gray-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));

static/js/main.js

@@ -1,12 +1,28 @@
-// Initialize dark mode from localStorage
+// Theme handling
 document.addEventListener('DOMContentLoaded', () => {
-    // Check if dark mode was previously enabled
-    const darkMode = localStorage.getItem('darkMode') === 'true';
-    if (darkMode) {
-        document.documentElement.classList.add('dark');
-        toggleIcons(true); // Ensure correct icon is shown
-    } else {
-        toggleIcons(false);
+    const themeToggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    
+    // Initialize toggle state based on current theme
+    if (themeToggle) {
+        themeToggle.checked = html.classList.contains('dark');
+        
+        // Handle toggle changes
+        themeToggle.addEventListener('change', function() {
+            const isDark = this.checked;
+            html.classList.toggle('dark', isDark);
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+        
+        // Listen for system theme changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                const isDark = e.matches;
+                html.classList.toggle('dark', isDark);
+                themeToggle.checked = isDark;
+            }
+        });
     }
 });
 
@@ -20,18 +36,40 @@ document.addEventListener('submit', (e) => {
     }
 });
 
-// Close mobile menu when clicking outside
-document.addEventListener('click', (e) => {
-    const mobileMenu = document.querySelector('[x-show="mobileMenuOpen"]');
-    const menuButton = document.querySelector('[x-on\\:click="mobileMenuOpen = !mobileMenuOpen"]');
+// Mobile menu toggle
+const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+const mobileMenu = document.getElementById('mobileMenu');
 
-    if (mobileMenu && menuButton && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
-        const alpineData = mobileMenu._x_dataStack && mobileMenu._x_dataStack[0];
-        if (alpineData && alpineData.mobileMenuOpen) {
-            alpineData.mobileMenuOpen = false;
+if (mobileMenuBtn && mobileMenu) {
+    mobileMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+    });
+}
+
+// User dropdown toggle
+const userMenuBtn = document.getElementById('userMenuBtn');
+const userDropdown = document.getElementById('userDropdown');
+
+if (userMenuBtn && userDropdown) {
+    userMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        userDropdown.classList.toggle('active');
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
+            userDropdown.classList.remove('active');
         }
+    });
+
+    // Close dropdown when pressing escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            userDropdown.classList.remove('active');
         }
-});
+    });
+}
 
 // Handle flash messages
 document.addEventListener('DOMContentLoaded', () => {
@@ -51,7 +89,7 @@ document.addEventListener('DOMContentLoaded', () => {
         tooltip.addEventListener('mouseenter', (e) => {
             const text = e.target.getAttribute('data-tooltip');
             const tooltipEl = document.createElement('div');
-            tooltipEl.className = 'tooltip bg-gray-900 text-white px-2 py-1 rounded text-sm absolute z-50';
+            tooltipEl.className = 'absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded tooltip';
             tooltipEl.textContent = text;
             document.body.appendChild(tooltipEl);
             
@@ -66,79 +104,3 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 });
-
-// Handle dropdown menus
-document.addEventListener('click', (e) => {
-    const dropdowns = document.querySelectorAll('[x-show]');
-    dropdowns.forEach(dropdown => {
-        if (!dropdown.contains(e.target) && 
-            !e.target.matches('[x-on\\:click*="open = !open"]')) {
-            const alpineData = dropdown._x_dataStack && dropdown._x_dataStack[0];
-            if (alpineData && alpineData.open) {
-                alpineData.open = false;
-            }
-        }
-    });
-});
-
-// Theme management
-const themeManager = {
-    init() {
-        // Set up toggle button when DOM is loaded
-        document.addEventListener('DOMContentLoaded', () => {
-            const toggleBtn = document.getElementById('theme-toggle');
-            if (toggleBtn) {
-                toggleBtn.addEventListener('click', () => {
-                    this.toggleTheme();
-                });
-            }
-
-            // Watch for system theme changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-                if (!localStorage.theme) {
-                    this.setTheme(e.matches ? 'dark' : 'light');
-                }
-            });
-
-            // Set initial theme icon state
-            this.updateThemeIcon();
-        });
-    },
-
-    setTheme(theme) {
-        if (theme === 'dark') {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
-        
-        localStorage.setItem('theme', theme);
-        this.updateThemeIcon();
-    },
-
-    toggleTheme() {
-        const isDark = document.documentElement.classList.contains('dark');
-        this.setTheme(isDark ? 'light' : 'dark');
-    },
-
-    updateThemeIcon() {
-        const isDark = document.documentElement.classList.contains('dark');
-        const sunIcon = document.querySelector('#theme-toggle .fa-sun');
-        const moonIcon = document.querySelector('#theme-toggle .fa-moon');
-        
-        if (sunIcon && moonIcon) {
-            // Show sun icon in dark mode (to indicate you can switch to light)
-            // Show moon icon in light mode (to indicate you can switch to dark)
-            if (isDark) {
-                sunIcon.classList.remove('hidden');
-                moonIcon.classList.add('hidden');
-            } else {
-                sunIcon.classList.add('hidden');
-                moonIcon.classList.remove('hidden');
-            }
-        }
-    }
-};
-
-// Initialize theme management
-themeManager.init();

templates/base/base.html

@@ -1,25 +1,30 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{% block title %}ThrillWiki{% endblock %}</title>
 
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
 
     <!-- Prevent flash of wrong theme -->
     <script>
       // Get theme from localStorage or system preference
-        let theme = localStorage.getItem('theme');
+      let theme = localStorage.getItem("theme");
       if (!theme) {
-            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-            localStorage.setItem('theme', theme);
+        theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+        localStorage.setItem("theme", theme);
       }
       // Apply theme immediately before page loads
-        if (theme === 'dark') {
-            document.documentElement.classList.add('dark');
+      if (theme === "dark") {
+        document.documentElement.classList.add("dark");
       }
     </script>
 
@@ -27,10 +32,13 @@
     <script src="https://unpkg.com/htmx.org@1.9.6"></script>
 
     <!-- Tailwind CSS -->
-    <link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
+    <link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
 
     <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    />
 
     {% block extra_head %}{% endblock %}
 
@@ -49,20 +57,26 @@
       #theme-toggle {
         width: 40px;
         height: 40px;
-            display: flex;
         align-items: center;
         justify-content: center;
       }
     </style>
-</head>
-<body class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white">
+  </head>
+  <body
+    class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
+  >
     <!-- Header -->
-    <header class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
+    <header
+      class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
+    >
       <nav class="container px-6 py-4 mx-auto">
         <div class="flex items-center justify-between">
           <!-- Logo -->
           <div class="flex items-center">
-                    <a href="{% url 'home' %}" class="px-3 text-2xl font-bold text-transparent transition-transform bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105">
+            <a
+              href="{% url 'home' %}"
+              class="px-3 text-2xl font-bold text-transparent transition-transform bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
+            >
               ThrillWiki
             </a>
           </div>
@@ -83,11 +97,12 @@
           <div class="flex-1 hidden max-w-md mx-8 md:flex">
             <form action="{% url 'search' %}" method="get" class="w-full">
               <div class="relative">
-                            <input type="text" name="q" placeholder="Search parks and rides..." 
-                                   class="w-full px-4 py-2 text-gray-900 transition-all border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary">
-                            <button type="submit" class="absolute right-3 top-2.5">
-                                <i class="text-gray-400 transition-colors fas fa-search hover:text-primary"></i>
-                            </button>
+                <input
+                  type="text"
+                  name="q"
+                  placeholder="Search parks and rides..."
+                  class="w-full px-4 py-2 text-gray-900 transition-all border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                />
               </div>
             </form>
           </div>
@@ -95,19 +110,34 @@
           <!-- Right Side Menu -->
           <div class="flex items-center space-x-6">
             <!-- Theme Toggle -->
-                    <button id="theme-toggle" class="inline-flex items-center justify-center p-2 text-gray-500 transition-all border border-gray-200 rounded-lg bg-white/80 dark:bg-gray-700/80 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 dark:border-gray-600">
-                        <i class="text-lg fas fa-moon"></i>
-                    </button>
+            <label for="theme-toggle" class="cursor-pointer">
+              <input type="checkbox" id="theme-toggle" class="hidden" />
+              <div
+                class="inline-flex items-center justify-center p-2 text-gray-500 transition-all bg-white border border-gray-200 rounded-lg theme-toggle-btn hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600"
+                role="button"
+                aria-label="Toggle dark mode"
+              >
+                <i class="text-lg fas"></i>
+              </div>
+            </label>
 
             <!-- User Menu -->
             {% if user.is_authenticated %}
             <div class="relative">
-                            <button id="userMenuBtn" class="flex items-center space-x-2 transition-transform hover:scale-105">
+              <button
+                id="userMenuBtn"
+                class="flex items-center space-x-2 transition-transform hover:scale-105"
+              >
                 {% if user.profile.avatar %}
-                                    <img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}" 
-                                         class="w-8 h-8 rounded-full ring-2 ring-primary/20">
+                <img
+                  src="{{ user.profile.avatar.url }}"
+                  alt="{{ user.username }}"
+                  class="w-8 h-8 rounded-full ring-2 ring-primary/20"
+                />
                 {% else %}
-                                    <div class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary">
+                <div
+                  class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary"
+                >
                   {{ user.username.0|upper }}
                 </div>
                 {% endif %}
@@ -116,7 +146,10 @@
               <!-- Dropdown Menu -->
               <div id="userDropdown" class="dropdown-menu">
                 <div class="py-1">
-                                    <a href="{% url 'user_profile' user.username %}" class="menu-item">
+                  <a
+                    href="{% url 'user_profile' user.username %}"
+                    class="menu-item"
+                  >
                     <i class="w-5 fas fa-user"></i>
                     <span>Profile</span>
                   </a>
@@ -154,14 +187,20 @@
             {% endif %}
 
             <!-- Mobile Menu Button -->
-                    <button id="mobileMenuBtn" class="p-2 text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400">
+            <button
+              id="mobileMenuBtn"
+              class="p-2 text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+            >
               <i class="fas fa-bars"></i>
             </button>
           </div>
         </div>
 
         <!-- Mobile Menu -->
-            <div id="mobileMenu" class="hidden py-2 mt-4 md:hidden bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-xl">
+        <div
+          id="mobileMenu"
+          class="hidden py-2 mt-4 md:hidden bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-xl"
+        >
           <a href="{% url 'parks:park_list' %}" class="mobile-nav-link">
             <i class="w-5 fas fa-map-marker-alt"></i>
             <span>Parks</span>
@@ -171,8 +210,12 @@
             <span>Rides</span>
           </a>
           <form action="{% url 'search' %}" method="get" class="px-4 py-2">
-                    <input type="text" name="q" placeholder="Search parks and rides..." 
-                           class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white">
+            <input
+              type="text"
+              name="q"
+              placeholder="Search parks and rides..."
+              class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white"
+            />
           </form>
         </div>
       </nav>
@@ -182,7 +225,9 @@
     {% if messages %}
     <div class="container px-6 mx-auto mt-4">
       {% for message in messages %}
-                <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
+      <div
+        class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
+      >
         {{ message }}
       </div>
       {% endfor %}
@@ -195,15 +240,25 @@
     </main>
 
     <!-- Footer -->
-    <footer class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
+    <footer
+      class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
+    >
       <div class="container px-6 py-6 mx-auto">
         <div class="flex items-center justify-between">
           <div class="text-gray-600 dark:text-gray-400">
             <p>&copy; {% now "Y" %} ThrillWiki. All rights reserved.</p>
           </div>
           <div class="space-x-4">
-                    <a href="{% url 'terms' %}" class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary">Terms</a>
-                    <a href="{% url 'privacy' %}" class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary">Privacy</a>
+            <a
+              href="{% url 'terms' %}"
+              class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+              >Terms</a
+            >
+            <a
+              href="{% url 'privacy' %}"
+              class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
+              >Privacy</a
+            >
           </div>
         </div>
       </div>
@@ -211,42 +266,6 @@
 
     <!-- Custom JavaScript -->
     <script src="{% static 'js/main.js' %}"></script>
-    <script>
-        // Mobile menu toggle
-        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
-        const mobileMenu = document.getElementById('mobileMenu');
-        
-        if (mobileMenuBtn && mobileMenu) {
-            mobileMenuBtn.addEventListener('click', () => {
-                mobileMenu.classList.toggle('hidden');
-            });
-        }
-
-        // User dropdown toggle
-        const userMenuBtn = document.getElementById('userMenuBtn');
-        const userDropdown = document.getElementById('userDropdown');
-        
-        if (userMenuBtn && userDropdown) {
-            userMenuBtn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                userDropdown.classList.toggle('active');
-            });
-
-            // Close dropdown when clicking outside
-            document.addEventListener('click', (e) => {
-                if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
-                    userDropdown.classList.remove('active');
-                }
-            });
-
-            // Close dropdown when pressing escape
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    userDropdown.classList.remove('active');
-                }
-            });
-        }
-    </script>
     {% block extra_scripts %}{% endblock %}
-</body>
+  </body>
 </html>