dark mode fixes

public/css/style.css

@@ -101,6 +101,16 @@ body {
   background: rgba(255, 255, 255, 0.1);
 }
 
+/* Desktop: hide mobile toggle, show nav toggle */
+.mobile-theme-toggle {
+  display: none;
+}
+
+.nav-theme-item {
+  display: flex;
+  align-items: center;
+}
+
 .nav-toggle span {
   display: block;
   width: 24px;
@@ -186,8 +196,13 @@ body {
   color: #fff;
 }
 
+.btn-primary:visited {
+  color: #fff;
+}
+
 .btn-primary:hover {
   background: var(--primary-dark);
+  color: #fff;
 }
 
 .btn-success {
@@ -195,6 +210,10 @@ body {
   color: #fff;
 }
 
+.btn-success:visited {
+  color: #fff;
+}
+
 .btn-success:hover {
   background: #00a381;
 }
@@ -571,7 +590,7 @@ tr:hover {
   background: linear-gradient(135deg, var(--card-bg) 0%, #0d2618 100%);
 }
 
-[data-theme="dark"] a {
+[data-theme="dark"] a:not(.btn) {
   color: var(--primary);
 }
 
@@ -605,6 +624,15 @@ tr:hover {
     display: flex;
   }
 
+  /* Show mobile theme toggle, hide nav one */
+  .mobile-theme-toggle {
+    display: inline-flex;
+  }
+
+  .nav-theme-item {
+    display: none;
+  }
+
   .navbar {
     padding: 0 0.75rem;
     height: 52px;

src/views/home.ejs

@@ -7,6 +7,9 @@
     <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
       <a href="/hunts" class="btn btn-primary">Browse Hunts</a>
       <a href="/leaderboard" class="btn btn-outline">Leaderboard</a>
+      <% if (!currentUser) { %>
+        <a href="/auth/login" class="btn btn-success">Login</a>
+      <% } %>
     </div>
   </div>
 

src/views/partials/footer.ejs

@@ -3,22 +3,20 @@
   </footer>
   <script src="/js/timeago.js"></script>
   <script>
+    function setThemeIcons(isDark) {
+      var icon = isDark ? '\u2600\uFE0F' : '\uD83C\uDF19';
+      document.querySelectorAll('.theme-toggle').forEach(function(btn) { btn.textContent = icon; });
+    }
     function toggleTheme() {
       var html = document.documentElement;
       var current = html.getAttribute('data-theme');
       var next = current === 'dark' ? 'light' : 'dark';
       html.setAttribute('data-theme', next);
       localStorage.setItem('theme', next);
-      // Update toggle icon
+      setThemeIcons(next === 'dark');
-      var btn = document.querySelector('.theme-toggle');
-      if (btn) btn.textContent = next === 'dark' ? '\u2600\uFE0F' : '\uD83C\uDF19';
     }
     // Set correct icon on load
-    (function() {
+    setThemeIcons(document.documentElement.getAttribute('data-theme') === 'dark');
-      var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-      var btn = document.querySelector('.theme-toggle');
-      if (btn) btn.textContent = isDark ? '\u2600\uFE0F' : '\uD83C\uDF19';
-    })();
   </script>
 </body>
 </html>

src/views/partials/header.ejs

@@ -19,7 +19,7 @@
   <nav class="navbar">
     <a href="/" class="navbar-brand">&#x1F3AF; Loot Hunt</a>
     <div style="display: flex; align-items: center; gap: 0.25rem;">
-      <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">&#x1F319;</button>
+      <button class="theme-toggle mobile-theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">&#x1F319;</button>
       <button class="nav-toggle" aria-label="Toggle menu" onclick="document.querySelector('.navbar-nav').classList.toggle('open')">
         <span></span><span></span><span></span>
       </button>
@@ -37,6 +37,7 @@
         <li><a href="/auth/login">Login</a></li>
         <li><a href="/auth/register">Register</a></li>
       <% } %>
+      <li class="nav-theme-item"><button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle dark mode">&#x1F319;</button></li>
     </ul>
   </nav>
   <% if (typeof flash !== 'undefined' && flash) { %>