Add Dark/Light Theme toggle.

index.html

@@ -5,17 +5,63 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Linux Security & Administration Quiz (Ubuntu)</title>
 <style>
-  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
+  :root {
-  h1 { color: #333; }
+    --bg: #f5f5f5;
-  .question { margin-bottom: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    --fg: #333;
+    --card-bg: #fff;
+    --button-bg: #007bff;
+    --button-hover: #0056b3;
+  }
+  body.dark {
+    --bg: #1e1e1e;
+    --fg: #f5f5f5;
+    --card-bg: #2b2b2b;
+    --button-bg: #2196f3;
+    --button-hover: #1976d2;
+  }
+  body {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    background: var(--bg);
+    color: var(--fg);
+    transition: background 0.3s, color 0.3s;
+  }
+  h1 { text-align: center; }
+  .question {
+    margin-bottom: 20px;
+    background: var(--card-bg);
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: background 0.3s;
+  }
   .answers { list-style-type: none; padding: 0; }
-  .answers li { margin: 5px 0; cursor: pointer; }
+  .answers li { margin: 5px 0; cursor: pointer; border-radius: 4px; padding: 4px; }
-  button { margin-top: 10px; padding: 5px 10px; border: none; border-radius: 5px; background: #007bff; color: #fff; cursor: pointer; }
+  button {
-  button:hover { background: #0056b3; }
+    margin-top: 10px;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 5px;
+    background: var(--button-bg);
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+  button:hover { background: var(--button-hover); }
   .result { font-weight: bold; margin-top: 10px; }
+  #theme-toggle {
+    position: fixed;
+    top: 15px;
+    right: 20px;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+  }
 </style>
 </head>
 <body>
+<button id="theme-toggle" title="Toggle theme">🌙</button>
 <h1>Linux Security & Administration Quiz (Ubuntu)</h1>
 
 <div id="quiz-container"></div>
@@ -98,6 +144,17 @@ function checkAnswer(btn) {
   else { result.textContent = 'Incorrect. Correct answer: ' + correct.toUpperCase(); result.style.color = 'red'; }
 }
 
+const toggleBtn = document.getElementById('theme-toggle');
+function setTheme(dark) {
+  document.body.classList.toggle('dark', dark);
+  toggleBtn.textContent = dark ? '☀️' : '🌙';
+  localStorage.setItem('darkMode', dark);
+}
+toggleBtn.addEventListener('click', () => {
+  setTheme(!document.body.classList.contains('dark'));
+});
+if (localStorage.getItem('darkMode') === 'true') setTheme(true);
+
 renderQuiz();
 </script>
 </body>