Fix/night mode toggle

script.js

@@ -20,20 +20,29 @@ let gameState = {
 let wordBank = [];
 
 document.addEventListener('DOMContentLoaded', function() {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('dark');
+        const themeIcon = document.querySelector('.theme-icon');
+        if (themeIcon) themeIcon.textContent = '☀️';
+    }
+
     loadWordBank();
     generateKeyboard();
 });
 
 function toggleTheme() {
+    document.body.classList.toggle('dark');
+
     const themeIcon = document.querySelector('.theme-icon');
-
-    if (themeIcon.textContent === '🌙') {
-        themeIcon.textContent = '☀️';
-    } else {
-        themeIcon.textContent = '🌙';
+    if (themeIcon) {
+        themeIcon.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
     }
+
+    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
 }
 
+
 function switchTab(tabName) {
     const tabs = document.querySelectorAll('.tab-content');
     tabs.forEach(tab => tab.classList.remove('active'));
@@ -135,6 +144,12 @@ function generateKeyboard() {
 function startGame() {
     const p1Name = document.getElementById('player1Name').value.trim();
     const p2Name = document.getElementById('player2Name').value.trim();
+
+    // ✅ Fix Issue #1: Prevent starting the game if BOTH names are empty
+    if (!p1Name && !p2Name) {
+        alert("Player name is required. Please enter at least one player name.");
+        return;
+    }
 
     gameState.player1.name = p1Name || 'Player 1';
     gameState.player2.name = p2Name || 'Player 2';

styles.css

@@ -527,3 +527,25 @@ body.dark-mode .add-word-form input {
 body.dark-mode .empty-state {
     color: #999;
 }
+body.dark {
+  background: #0f172a;
+  color: #e2e8f0;
+}
+
+body.dark .container,
+body.dark .tab-content,
+body.dark .card,
+body.dark .game-container,
+body.dark .word-bank-container {
+  background: #111827;
+  color: #e2e8f0;
+}
+
+body.dark button,
+body.dark input,
+body.dark textarea,
+body.dark select {
+  background: #1f2937;
+  color: #e2e8f0;
+  border-color: #374151;
+}