Fixed some small bugs after merge

cmd/web/assets/css/styles.css

@@ -1,5 +1,33 @@
 /* Pure CSS styles for Music Search */
 
+:root {
+    /* Light mode colors (default) */
+    --bg-primary: #f3f4f6;
+    --bg-secondary: #e5e7eb;
+    --bg-tertiary: #dcfce7;
+    --text-primary: #000;
+    --text-secondary: #374151;
+    --border-primary: #9ca3af;
+    --border-focus: #6b7280;
+    --accent-primary: #f97316;
+    --accent-hover: #ea580c;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] {
+    /* Dark mode colors matching frontend */
+    --bg-primary: #555;
+    --bg-secondary: #333;
+    --bg-tertiary: #2a2a2a;
+    --text-primary: #fff;
+    --text-secondary: #ff9c00;
+    --border-primary: #666;
+    --border-focus: #ff9c00;
+    --accent-primary: #ff9c00;
+    --accent-hover: #e68a00;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
 * {
     box-sizing: border-box;
     margin: 0;
@@ -10,7 +38,9 @@ html, body {
     height: 100%;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     line-height: 1.5;
-    background-color: #f3f4f6;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 main {
@@ -29,15 +59,15 @@ main {
     max-width: 600px;
     font-size: 1.5rem;
     padding: 0.5rem;
-    border: 1px solid #9ca3af;
+    border: 1px solid var(--border-primary);
     border-radius: 0.5rem;
-    background-color: #e5e7eb;
-    color: #000;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
 }
 
 #search_term:focus {
     outline: none;
-    border-color: #6b7280;
+    border-color: var(--border-focus);
 }
 
 #clear {
@@ -45,23 +75,48 @@ main {
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 0.5rem;
-    background-color: #f97316;
-    color: #fff;
+    background-color: var(--accent-primary);
+    color: var(--text-primary);
     cursor: pointer;
     margin-left: 1rem;
 }
 
 #clear:hover {
-    background-color: #ea580c;
+    background-color: var(--accent-hover);
 }
 
 #games-container {
     font-size: 1.5rem;
 }
 
+.game-text {
+    color: var(--text-primary);
+    word-break: break-word;
+}
+
+/* Dark mode toggle */
+#dark-mode-toggle {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    font-size: 1.2rem;
+    padding: 0.4rem 0.8rem;
+    border: none;
+    border-radius: 0.5rem;
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    cursor: pointer;
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+#dark-mode-toggle:hover {
+    background-color: var(--border-primary);
+}
+
 /* Game result cards */
 .bg-green-100 {
-    background-color: #dcfce7;
+    background-color: var(--bg-tertiary);
 }
 
 .p-4 {
@@ -69,7 +124,7 @@ main {
 }
 
 .shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
 }
 
 .rounded-lg {

cmd/web/hello.templ

@@ -2,6 +2,7 @@ package web
 
 templ HelloForm() {
 	@Base() {
+		<button id="dark-mode-toggle">🌙</button>
 		<div id="search-container">
 			<input id="search_term" name="search_term" type="text" hx-post="/find" hx-trigger="keyup changed delay:0.25s" hx-target="#games-container"/>
 			<button type="button" id="clear" name="clear">Clear</button>
@@ -12,8 +13,29 @@ templ HelloForm() {
 				if (document.readyState == 'complete') {
 					htmx.ajax('POST', '/find', '#games-container');
 					document.getElementById("search_term").focus();
+					
+					// Initialize dark mode from localStorage (default to dark)
+					const savedTheme = localStorage.getItem('theme') || 'dark';
+					if (savedTheme === 'dark') {
+						document.documentElement.setAttribute('data-theme', 'dark');
+						document.getElementById('dark-mode-toggle').textContent = '☀️';
+					}
 				}
 			});
+			
+			// Dark mode toggle functionality
+			document.getElementById("dark-mode-toggle").addEventListener("click", function() {
+				const html = document.documentElement;
+				const currentTheme = html.getAttribute('data-theme');
+				const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+				
+				html.setAttribute('data-theme', newTheme);
+				localStorage.setItem('theme', newTheme);
+				
+				// Update toggle button text
+				this.textContent = newTheme === 'dark' ? '☀️' : '🌙';
+			});
+			
 			document.getElementById("clear").addEventListener("click", function (event) {
 				document.getElementById("search_term").value = "";
 				htmx.ajax('POST', '/find', '#games-container');
@@ -26,7 +48,7 @@ templ HelloForm() {
 templ FoundGames(games []string) {
 	for _, game := range games {
 		<div class="bg-green-100 p-4 shadow-md rounded-lg mt-6">
-			<p>{ game }</p>
+			<p class="game-text">{ game }</p>
 		</div>
 	}
 }