Added dark mode.

ham-test-www.py

@@ -75,18 +75,99 @@ def generate_html(questions):
   <meta charset="UTF-8" />
   <title>HAM Radio Test</title>
   <style>
-    body {{ font-family: sans-serif; }}
-    h1, h2 {{ color: #333; }}
-    .question-box {{ background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-bottom: 2rem; }}
-    .answers label {{ display: block; margin: 0.5rem 0; }}
-    .nav-buttons {{ margin-top: 1rem; }}
-    .nav-buttons button {{ margin-right: 0.5rem; }}
-    .correct {{ color: green; }}
-    .incorrect {{ color: red; }}
+    body {{
+      font-family: sans-serif;
+      background-color: #ffffff;
+      color: #000000;
+      margin: 20px;
+      transition: background-color 0.3s, color 0.3s;
+    }}
+
+    .dark-mode {{
+      background-color: #121212;
+      color: #ffffff;
+    }}
+
+    .question-box {{
+      background: #fff;
+      padding: 1rem;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      margin-bottom: 2rem;
+    }}
+
+    .dark-mode .question-box {{
+      background: #1e1e1e;
+      box-shadow: 0 0 10px rgba(255,255,255,0.05);
+    }}
+
+    .answers label {{
+      display: block;
+      margin: 0.5rem 0;
+    }}
+
+    .nav-buttons {{
+      margin-top: 1rem;
+    }}
+
+    .nav-buttons button {{
+      margin-right: 0.5rem;
+    }}
+
+    .correct {{ color: limegreen; }}
+    .incorrect {{ color: tomato; }}
     #result {{ font-weight: bold; }}
+
+    .settings {{
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      z-index: 100;
+    }}
+
+    .gear-icon {{
+      font-size: 24px;
+      cursor: pointer;
+    }}
+
+    .settings-menu {{
+      display: none;
+      position: absolute;
+      top: 30px;
+      right: 0;
+      background: #f0f0f0;
+      border: 1px solid #ccc;
+      padding: 10px;
+      border-radius: 8px;
+      font-size: 14px;
+      width: 100px;
+      white-space: nowrap;
+    }}
+
+    .settings-menu.dark {{
+      background: #2a2a2a;
+      color: white;
+      border-color: #555;
+    }}
+
+    .settings:hover .settings-menu {{
+      display: block;
+    }}
+
+    .settings-menu input {{
+      margin-right: 6px;
+    }}
   </style>
 </head>
 <body>
+  <div class="settings">
+    <span class="gear-icon">&#9881;</span>
+    <div class="settings-menu" id="settingsMenu">
+      <label><input type="radio" name="theme" value="light" checked> Light Mode</label><br>
+      <label><input type="radio" name="theme" value="dark"> Dark Mode</label>
+    </div>
+  </div>
+
   <h1>HAM Radio Test</h1>
   <p>Select a test pool:</p>
   <select id="testSelect">
@@ -168,6 +249,23 @@ def generate_html(questions):
         <p>You answered ${{score}} questions correctly out of ${{answered}} questions answered. (${{percent}}%)</p>
       `;
     }}
+
+    // Theme toggle logic
+    const body = document.body;
+    const settingsMenu = document.getElementById('settingsMenu');
+    const radios = settingsMenu.querySelectorAll('input[name="theme"]');
+
+    radios.forEach(radio => {{
+      radio.addEventListener('change', () => {{
+        if (radio.value === 'dark') {{
+          body.classList.add('dark-mode');
+          settingsMenu.classList.add('dark');
+        }} else {{
+          body.classList.remove('dark-mode');
+          settingsMenu.classList.remove('dark');
+        }}
+      }});
+    }});
   </script>
 </body>
 </html>