From 01127d8a6983948b9134515acf2843a429994f7b Mon Sep 17 00:00:00 2001
From: Daniel LaForce <daniel@argobox.com>
Date: Wed, 23 Apr 2025 15:29:09 -0600
Subject: [PATCH] fix: Update theme toggle script and styles

---
 src/components/Header.astro |  89 +++++++++++++---------
 src/styles/theme.css        | 148 +++++++++++++++++++++---------------
 2 files changed, 140 insertions(+), 97 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index cd066a7..35eaa50 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -379,13 +379,14 @@ const navItems = [
 </style>
 
 <script>
-  // Only define one DOMContentLoaded event handler
+  // Updated theme toggle script for Header.astro
   document.addEventListener('DOMContentLoaded', () => {
-    const menuBtn = document.getElementById('mobile-menu-btn');
-    const mainNav = document.querySelector('.main-nav');
-    const header = document.querySelector('.site-header');
+    const themeToggle = document.getElementById('theme-toggle');
+    const menuBtn = document.getElementById('mobile-menu-btn'); // Added for mobile menu
+    const mainNav = document.querySelector('.main-nav'); // Added for mobile menu
+    const header = document.querySelector('.site-header'); // Added for scroll effect
     
-    // Mobile menu toggle
+    // Mobile menu toggle (Keep existing functionality)
     if (menuBtn && mainNav) {
       menuBtn.addEventListener('click', () => {
         mainNav.classList.toggle('active');
@@ -393,42 +394,60 @@ const navItems = [
       });
     }
     
-    // Header scroll effect
-    window.addEventListener('scroll', () => {
-      if (window.scrollY > 50) {
-        header?.classList.add('scrolled');
-      } else {
-        header?.classList.remove('scrolled');
-      }
-    });
-    
-    // Theme toggle functionality - only define once
-    const themeToggle = document.getElementById('theme-toggle');
-    
-    if (themeToggle) {
-      themeToggle.addEventListener('click', () => {
-        document.documentElement.classList.toggle('light-mode');
-        
-        // Store preference in localStorage
-        const isLightMode = document.documentElement.classList.contains('light-mode');
-        localStorage.setItem('theme', isLightMode ? 'light' : 'dark');
+    // Header scroll effect (Keep existing functionality)
+    if (header) { // Check if header exists
+      window.addEventListener('scroll', () => {
+        if (window.scrollY > 50) {
+          header.classList.add('scrolled');
+        } else {
+          header.classList.remove('scrolled');
+        }
       });
-      
-      // Apply saved theme preference
-      const savedTheme = localStorage.getItem('theme');
-      if (savedTheme === 'light') {
-        document.documentElement.classList.add('light-mode');
-      }
     }
-    
-    // Add interactive network nodes animation
+
+    // Theme Toggle Logic
+    if (themeToggle) {
+      // Force initial theme class application based on localStorage or preference
+      const savedTheme = localStorage.getItem('theme');
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      
+      // Apply light mode only if explicitly set or if preference is light
+      if (savedTheme === 'light' || (!savedTheme && !prefersDark)) {
+        document.documentElement.classList.add('light-mode');
+        console.log('Initial theme set to light');
+      } else {
+        document.documentElement.classList.remove('light-mode'); // Default to dark
+        console.log('Initial theme set to dark');
+      }
+      
+      // Add click event that logs for debugging
+      themeToggle.addEventListener('click', () => {
+        // Check if light-mode class is *currently* present before toggling
+        const isCurrentlyLight = document.documentElement.classList.contains('light-mode');
+        console.log('Theme toggle clicked, current mode:', isCurrentlyLight ? 'light' : 'dark');
+        
+        if (isCurrentlyLight) {
+          // Switch to dark
+          document.documentElement.classList.remove('light-mode');
+          localStorage.setItem('theme', 'dark');
+          console.log('Switched to dark mode');
+        } else {
+          // Switch to light
+          document.documentElement.classList.add('light-mode');
+          localStorage.setItem('theme', 'light');
+          console.log('Switched to light mode');
+        }
+      });
+    } else {
+      console.warn("Theme toggle button not found.");
+    }
+
+    // Add interactive network nodes animation (Keep existing functionality)
     const header_el = document.querySelector('.site-header');
-    
     if (header_el) {
-      // Create animated nodes
       for (let i = 0; i < 5; i++) {
         const node = document.createElement('div');
-        node.className = 'nav-node';
+        node.className = 'nav-node'; // Ensure this class exists in your CSS
         node.style.left = `${Math.random() * 100}%`;
         node.style.animationDelay = `${Math.random() * 5}s`;
         node.style.animationDuration = `${5 + Math.random() * 5}s`;
diff --git a/src/styles/theme.css b/src/styles/theme.css
index c20ca55..069422a 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -1,82 +1,106 @@
-/* Theme Variables - Dark/Light Mode Support */
+/* src/styles/theme.css */
 
-/* Dark theme (default) */
-html {
-  /* Keep the default dark theme as defined in BaseLayout */
+/* Base Variables (Dark Mode Default) */
+:root {
+  --bg-primary: #0f1219;
+  --bg-secondary: #161a24;
+  --bg-tertiary: #1e2330;
+  --bg-code: #1a1e2a;
+  --text-primary: #e2e8f0;
+  --text-secondary: #a0aec0;
+  --text-tertiary: #718096;
+  --accent-primary: #06b6d4; /* Cyan */
+  --accent-secondary: #3b82f6; /* Blue */
+  --accent-tertiary: #8b5cf6; /* Violet */
+  --glow-primary: rgba(6, 182, 212, 0.2);
+  --glow-secondary: rgba(59, 130, 246, 0.2);
+  --glow-tertiary: rgba(139, 92, 246, 0.2);
+  --border-primary: rgba(255, 255, 255, 0.1);
+  --border-secondary: rgba(255, 255, 255, 0.05);
+  --card-bg: rgba(24, 28, 44, 0.5);
+  --card-border: rgba(56, 189, 248, 0.2); /* Cyan border */
+  --ui-element: #1e293b;
+  --ui-element-hover: #334155;
+  --container-padding: clamp(1rem, 5vw, 3rem);
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-mono: 'JetBrains Mono', monospace;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --bg-primary-rgb: 15, 18, 25; /* Added RGB for gradients */
+  --bg-secondary-rgb: 22, 26, 36; /* Added RGB for gradients */
 }
 
-/* Light theme */
-html.light-mode {
-  /* Primary Colors */
-  --bg-primary: #f8fafc;
-  --bg-secondary: #f1f5f9;
-  --bg-tertiary: #e2e8f0;
+/* Light Mode Variables */
+:root.light-mode {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc; /* Lighter secondary */
+  --bg-tertiary: #f1f5f9; /* Even lighter tertiary */
   --bg-code: #f1f5f9;
-  --text-primary: #0f172a;
-  --text-secondary: #334155;
-  --text-tertiary: #64748b;
-  
-  /* Accent Colors remain the same for brand consistency */
-  
-  /* Glow Effects - lighter for light mode */
-  --glow-primary: rgba(6, 182, 212, 0.1);
-  --glow-secondary: rgba(59, 130, 246, 0.1);
-  --glow-tertiary: rgba(139, 92, 246, 0.1);
-  
-  /* Border Colors */
-  --border-primary: rgba(0, 0, 0, 0.1);
+  --text-primary: #1e293b; /* Darker primary text */
+  --text-secondary: #475569; /* Darker secondary text */
+  --text-tertiary: #64748b; /* Darker tertiary text */
+  --accent-primary: #0891b2; /* Slightly darker cyan */
+  --accent-secondary: #2563eb; /* Slightly darker blue */
+  --accent-tertiary: #7c3aed; /* Slightly darker violet */
+  --glow-primary: rgba(8, 145, 178, 0.15);
+  --glow-secondary: rgba(37, 99, 235, 0.15);
+  --glow-tertiary: rgba(124, 58, 237, 0.15);
+  --border-primary: rgba(0, 0, 0, 0.1); /* Darker borders */
   --border-secondary: rgba(0, 0, 0, 0.05);
-  
-  /* Card Background */
-  --card-bg: rgba(255, 255, 255, 0.8);
-  --card-border: rgba(56, 189, 248, 0.3); /* Slightly stronger border */
-  
-  /* UI Element Colors */
-  --ui-element: #e2e8f0;
+  --card-bg: rgba(255, 255, 255, 0.8); /* White card with opacity */
+  --card-border: rgba(37, 99, 235, 0.3); /* Blue border */
+  --ui-element: #e2e8f0; /* Lighter UI elements */
   --ui-element-hover: #cbd5e1;
+  --bg-primary-rgb: 255, 255, 255; /* Added RGB for gradients */
+  --bg-secondary-rgb: 248, 250, 252; /* Added RGB for gradients */
 }
 
-/* Background adjustments for light mode */
-html.light-mode body {
-  background-image: 
-    radial-gradient(circle at 20% 35%, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
-    radial-gradient(circle at 75% 15%, rgba(59, 130, 246, 0.05) 0%, transparent 45%),
-    radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
+/* Ensure transitions for smooth theme changes */
+body, .site-header, .site-footer, .post-card, input, select, button, pre, code {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 
-/* Adding light mode grid overlay */
-html.light-mode body::before {
-  background-image: 
-    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
+/* Apply base styles using variables */
+/* (Keep existing base styles from BaseLayout.astro's <style is:global> here if they are not theme-dependent) */
+
+/* Example: Ensure header background uses variables */
+.site-header {
+  /* Use RGB variables for background gradients with opacity */
+  background: linear-gradient(180deg, rgba(var(--bg-secondary-rgb), 0.9), rgba(var(--bg-primary-rgb), 0.8));
+  border-bottom-color: var(--border-primary);
+  /* Other header styles */
 }
 
-/* Theme transition for smooth switching */
-html, body, * {
-  transition: 
-    background-color 0.3s ease,
-    color 0.3s ease,
-    border-color 0.3s ease,
-    box-shadow 0.3s ease;
+.site-header.scrolled {
+  background: rgba(var(--bg-primary-rgb), 0.95);
+  /* Other scrolled styles */
 }
 
-/* Knowledge Graph light mode adjustments */
-html.light-mode .graph-container {
-  background: rgba(248, 250, 252, 0.6);
+/* Example: Ensure card styles use variables */
+.post-card {
+  background: var(--card-bg);
+  border-color: var(--card-border);
+  /* Other card styles */
 }
 
-html.light-mode .graph-loading {
-  background: rgba(241, 245, 249, 0.7);
+/* Ensure code blocks adapt */
+pre, code {
+  background-color: var(--bg-code);
+  color: var(--text-secondary); /* Or adjust as needed */
 }
 
-html.light-mode .graph-filters {
-  background: rgba(241, 245, 249, 0.7);
+/* Ensure inputs/selects adapt */
+input, select {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-primary);
 }
 
-html.light-mode .graph-legend {
-  background: rgba(241, 245, 249, 0.7);
-}
-
-html.light-mode .node-details {
-  background: rgba(248, 250, 252, 0.9);
-}
\ No newline at end of file
+/* Add any other theme-dependent styles here */
\ No newline at end of file