clause agent mode "make it look like papermod"

js/navigation.js

@@ -27,13 +27,14 @@
 		return;
 	}
 
-	if ( ! menu.classList.contains( 'nav-menu' ) ) {
-		menu.classList.add( 'nav-menu' );
+	// Add primary-menu class if it doesn't exist
+	if ( ! menu.classList.contains( 'primary-menu' ) ) {
+		menu.classList.add( 'primary-menu' );
 	}
 
 	// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
 	button.addEventListener( 'click', function() {
-		siteNavigation.classList.toggle( 'toggled' );
+		menu.classList.toggle( 'toggled' );
 
 		if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
 			button.setAttribute( 'aria-expanded', 'false' );
@@ -47,7 +48,7 @@
 		const isClickInside = siteNavigation.contains( event.target );
 
 		if ( ! isClickInside ) {
-			siteNavigation.classList.remove( 'toggled' );
+			menu.classList.remove( 'toggled' );
 			button.setAttribute( 'aria-expanded', 'false' );
 		}
 	} );

js/theme-toggle.js

@@ -0,0 +1,92 @@
+/**
+ * Theme toggle functionality
+ * Handles light/dark mode switching
+ */
+
+(function() {
+    'use strict';
+
+    // Get theme preference from localStorage or system preference
+    function getThemePreference() {
+        const stored = localStorage.getItem('achille-press-theme');
+        if (stored) {
+            return stored;
+        }
+        
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Set theme
+    function setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('achille-press-theme', theme);
+        
+        // Update meta theme-color for mobile browsers
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute('content', theme === 'dark' ? '#1a1a1a' : '#ffffff');
+        }
+    }
+
+    // Toggle theme
+    function toggleTheme() {
+        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        setTheme(newTheme);
+    }
+
+    // Initialize theme on page load
+    function initTheme() {
+        const theme = getThemePreference();
+        setTheme(theme);
+    }
+
+    // Setup theme toggle button
+    function setupThemeToggle() {
+        const themeToggle = document.querySelector('.theme-toggle');
+        if (themeToggle) {
+            themeToggle.addEventListener('click', toggleTheme);
+            
+            // Add keyboard support
+            themeToggle.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleTheme();
+                }
+            });
+        }
+    }
+
+    // Listen for system theme changes
+    function setupSystemThemeListener() {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addListener(function(e) {
+            // Only update if user hasn't manually set a preference
+            if (!localStorage.getItem('achille-press-theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        });
+    }
+
+    // Initialize everything when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            initTheme();
+            setupThemeToggle();
+            setupSystemThemeListener();
+        });
+    } else {
+        initTheme();
+        setupThemeToggle();
+        setupSystemThemeListener();
+    }
+
+    // Add meta theme-color if it doesn't exist
+    if (!document.querySelector('meta[name="theme-color"]')) {
+        const meta = document.createElement('meta');
+        meta.name = 'theme-color';
+        meta.content = '#ffffff';
+        document.head.appendChild(meta);
+    }
+
+})();