Add smooth transitions for theme switching

_includes/header.html

@@ -1,8 +1,47 @@
-<button id="view-mode-toggle" class="theme-selector" type="button" title="Toggle dark mode" aria-pressed="false">
+<button id="view-mode-toggle" class="theme-selector" type="button" title="Toggle dark mode" aria-pressed="false" style="position: fixed; top: 10px; right: 90px; z-index: 1000; background: transparent; border: 2px solid #ccc; border-radius: 50%; cursor: pointer; padding: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
     <span class="visually-hidden">Toggle dark mode</span>
-    <img id="view-mode" alt="" src="/images/Dim-Night.png"/>
+    <img id="view-mode" alt="Dark mode toggle" src="/images/Dim-Night.png" width="24" height="24"/>
 </button>
 
+<script>
+// Direct implementation of dark mode toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const toggleButton = document.getElementById('view-mode-toggle');
+    const modeIcon = document.getElementById('view-mode');
+    const root = document.documentElement;
+    const logo = document.getElementById('go-back-home');
+
+    // Check initial state
+    const currentMode = localStorage.getItem('mode') || 'light';
+    if (currentMode === 'dark') {
+        root.setAttribute('data-theme-preference', 'dark');
+        toggleButton.setAttribute('aria-pressed', 'true');
+        modeIcon.src = '/images/sun-light.png';
+        if (logo) logo.src = '/images/logo_dark_1.png';
+    }
+
+    // Add click handler directly to button
+    toggleButton.addEventListener('click', function() {
+        const isDark = root.getAttribute('data-theme-preference') === 'dark';
+
+        // Toggle theme
+        if (isDark) {
+            root.removeAttribute('data-theme-preference');
+            localStorage.setItem('mode', 'light');
+            toggleButton.setAttribute('aria-pressed', 'false');
+            modeIcon.src = '/images/Dim-Night.png';
+            if (logo) logo.src = '/images/logo.png';
+        } else {
+            root.setAttribute('data-theme-preference', 'dark');
+            localStorage.setItem('mode', 'dark');
+            toggleButton.setAttribute('aria-pressed', 'true');
+            modeIcon.src = '/images/sun-light.png';
+            if (logo) logo.src = '/images/logo_dark_1.png';
+        }
+    });
+});
+</script>
+
 <header role="banner">
     <a id="forkme_banner" href="https://github.com/up-for-grabs/up-for-grabs.net">View on GitHub</a>
     <div class="container">

_includes/scripts.html

@@ -168,6 +168,7 @@
   src="{{ site.github.url }}javascripts/lib/require.js"
   data-main="javascripts/app"
 ></script>
+<script src="{{ site.github.url }}javascripts/dark-mode-debug.js"></script>
 <!-- Google Analytics -->
 <script>
   (function (i, s, o, g, r, a, m) {

javascripts/dark-mode-debug.js

@@ -0,0 +1,60 @@
+// Diagnostic script to troubleshoot dark mode toggle button
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('Dark mode debug script loaded');
+
+  // Find and remove any duplicate dark mode toggle buttons
+  const themeSelectors = document.querySelectorAll('.theme-selector');
+
+  if (themeSelectors.length > 1) {
+    console.log('Found multiple theme selectors:', themeSelectors.length);
+    // Keep the one we added to header.html and remove others
+    themeSelectors.forEach((button, index) => {
+      // The one we want to keep should be near the top of the page (in header)
+      if (index > 0) {
+        console.log('Removing duplicate theme selector:', button);
+        button.remove();
+      }
+    });
+  }
+
+  // Check if dark mode toggle button exists
+  const viewModeToggleButton = document.getElementById('view-mode-toggle');
+  if (!viewModeToggleButton) {
+    console.error('Dark mode toggle button not found!');
+    return;
+  }
+
+  console.log('Dark mode toggle button found:', viewModeToggleButton);
+
+  // Add a direct event listener to the button
+  viewModeToggleButton.addEventListener('click', function() {
+    console.log('Dark mode toggle button clicked!');
+
+    // Force toggle between light and dark mode
+    const root = document.documentElement;
+    const currentTheme = root.getAttribute('data-theme-preference');
+    const newTheme = currentTheme === 'dark' ? '' : 'dark';
+
+    console.log('Switching from', currentTheme || 'light', 'to', newTheme || 'light');
+
+    root.setAttribute('data-theme-preference', newTheme);
+
+    // Store the preference
+    window.localStorage.setItem('mode', newTheme || 'light');
+
+    // Update the button's aria-pressed state
+    viewModeToggleButton.setAttribute('aria-pressed', newTheme === 'dark' ? 'true' : 'false');
+
+    // Update the button image
+    const viewModeElement = document.getElementById('view-mode');
+    if (viewModeElement) {
+      viewModeElement.setAttribute('src', newTheme === 'dark' ? '/images/sun-light.png' : '/images/Dim-Night.png');
+    }
+
+    // Update the logo
+    const goBackHomeElement = document.getElementById('go-back-home');
+    if (goBackHomeElement) {
+      goBackHomeElement.setAttribute('src', newTheme === 'dark' ? '/images/logo_dark_1.png' : '/images/logo.png');
+    }
+  });
+});

stylesheets/stylesheet.css

@@ -1,5 +1,10 @@
 @import url(pygment_trac.css);
 
+/* Add transitions for smooth theme changes */
+html, body, a, button, .data-box, header, footer, #main-container, .project-title {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
 /* Default [Light Mode] */
 :root {
   --body-back: #f9f9f9;