john-bampton · Subham-KRLX · Dec 15, 2025 · Dec 15, 2025 · Dec 15, 2025 · Dec 15, 2025
@@ -31,6 +31,12 @@
 
 let allUsers = [];
 let filteredUsers = [];
+let darkModeToggleElement = null;
+
+// Dark mode constants
+const DARK_MODE_KEY = 'darkMode';
+const THEME_ENABLED = 'enabled';
+const THEME_DISABLED = 'disabled';
 
 // ============================================================================
 // INITIALIZATION
@@ -41,6 +47,7 @@ document.addEventListener('DOMContentLoaded', initializeApp);
  * Initialize the application on page load
  */
 function initializeApp() {
+    initializeDarkMode();
     const cards = document.querySelectorAll('.card');
     showLoadingState();
     document.getElementById('totalCount').textContent = cards.length.toLocaleString();
@@ -508,3 +515,48 @@ function hideLoadingState() {
     if (loadingState) loadingState.style.display = 'none';
     if (loadingStateDesktop) loadingStateDesktop.style.display = 'none';
 }
+// ============================================================================
+// DARK MODE TOGGLE
+// ============================================================================
+/**
+ * Initialize dark mode functionality
+ * - Load saved preference from localStorage
+ * - Set up toggle button listener
+ * - Apply dark mode class if preference is set
+ * - Cache DOM element for performance
+ */
+function initializeDarkMode() {
+    darkModeToggleElement = document.getElementById('darkModeToggle');
+    const isDarkMode = localStorage.getItem(DARK_MODE_KEY) === THEME_ENABLED;
+
+    if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        updateDarkModeIcon(true);
+    }
+
+    if (darkModeToggleElement) {
+        darkModeToggleElement.addEventListener('click', toggleDarkMode);
+    }
+}
+
+/**
+ * Toggle dark mode on/off
+ * - Saves preference to localStorage
+ * - Applies/removes dark-mode class from body
+ */
+function toggleDarkMode() {
+    const isDarkMode = document.body.classList.toggle('dark-mode');
+    localStorage.setItem(DARK_MODE_KEY, isDarkMode ? THEME_ENABLED : THEME_DISABLED);
+    updateDarkModeIcon(isDarkMode);
+}
+
+/**
+ * Update dark mode toggle icon
+ * @param {boolean} isDarkMode - Whether dark mode is currently enabled
+ */
+function updateDarkModeIcon(isDarkMode) {
+    if (darkModeToggleElement) {
+        darkModeToggleElement.textContent = isDarkMode ? '☀️' : '🌙';
+        darkModeToggleElement.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+    }
+}
@@ -2,9 +2,28 @@
     box-sizing: border-box;
 }
 
+/* ============================================================================ */
+/* CSS VARIABLES FOR THEMING */
+/* ============================================================================ */
+:root {
+    --bg-color: #f0f2f5;
+    --text-color: #333;
+    --text-secondary: #666;
+    --card-bg: #ffffff;
+    --card-border: #ddd;
+    --input-bg: #ffffff;
+    --input-border: #ccc;
+    --header-bg: #ffffff;
+    --footer-bg: #ffffff;
+    --footer-border: #e0e0e0;
+    --link-color: #667eea;
+    --link-hover: #764ba2;
+}
+
 body {
     font-family: 'Arial', sans-serif;
-    background: #f0f2f5;
+    background: var(--bg-color);
+    color: var(--text-color);
     margin: 0;
     padding: 0;
 }
@@ -593,3 +612,166 @@ footer {
         display: none;
     }
 }
+
+/* ============================================================================ */
+/* DARK MODE STYLES - USING CSS VARIABLES */
+/* ============================================================================ */
+body.dark-mode {
+    --bg-color: #1e1e1e;
+    --text-color: #e0e0e0;
+    --text-secondary: #b0b0b0;
+    --card-bg: #2d2d2d;
+    --card-border: #444;
+    --input-bg: #3a3a3a;
+    --input-border: #555;
+    --header-bg: #2d2d2d;
+    --footer-bg: #2d2d2d;
+    --footer-border: #444;
+    --link-color: #667eea;
+    --link-hover: #764ba2;
+}
+
+body.dark-mode {
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+
+body.dark-mode h1 {
+    color: var(--text-color);
+}
+
+body.dark-mode .header-section {
+    background: var(--header-bg);
+}
+
+body.dark-mode .filters-aside {
+    background: var(--header-bg);
+    border-right: 1px solid var(--card-border);
+}
+
+body.dark-mode .filters-aside h2,
+body.dark-mode .filters-content,
+body.dark-mode .filters-content label {
+    color: var(--text-color);
+}
+
+body.dark-mode input[type="text"],
+body.dark-mode select {
+    background: var(--input-bg);
+    color: var(--text-color);
+    border: 1px solid var(--input-border);
+}
+
+body.dark-mode input[type="text"]::placeholder {
+    color: var(--text-secondary);
+}
+
+body.dark-mode input[type="text"]:focus,
+body.dark-mode select:focus {
+    border-color: var(--link-color);
+    background: var(--input-bg);
+}
+
+body.dark-mode .card {
+    background: var(--card-bg);
+    color: var(--text-color);
+    border: 1px solid var(--card-border);
+}
+
+body.dark-mode .card:hover {
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+body.dark-mode .details-box {
+    background: var(--bg-color);
+}
+
+body.dark-mode .details-box strong {
+    color: #fff;
+}
+
+body.dark-mode .details-box span {
+    color: var(--text-secondary);
+}
+
+body.dark-mode .details-box a,
+body.dark-mode footer a {
+    color: var(--link-color);
+}
+
+body.dark-mode .details-box a:hover,
+body.dark-mode footer a:hover {
+    color: var(--link-hover);
+}
+
+body.dark-mode .btn-apply,
+body.dark-mode .btn-reset {
+    background: var(--link-color);
+    color: white;
+    border: none;
+}
+
+body.dark-mode .btn-apply:hover,
+body.dark-mode .btn-reset:hover {
+    background: var(--link-hover);
+}
+
+body.dark-mode .results-info,
+body.dark-mode .results-info strong {
+    color: var(--text-color);
+}
+
+body.dark-mode footer {
+    background: var(--footer-bg);
+    color: var(--text-secondary);
+    border-top: 1px solid var(--footer-border);
+}
+
+/* Dark Mode Toggle Button */
+.dark-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    transition: all 0.3s ease;
+}
+
+.dark-mode-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+.dark-mode-toggle:active {
+    transform: scale(0.95);
+}
+
+body.dark-mode .dark-mode-toggle {
+    background: linear-gradient(135deg, #f4a460 0%, #ff8c69 100%);
+    box-shadow: 0 4px 15px rgba(255, 140, 105, 0.4);
+}
+
+body.dark-mode .dark-mode-toggle:hover {
+    box-shadow: 0 6px 20px rgba(255, 140, 105, 0.6);
+}
+
+@media (max-width: 768px) {
+    .dark-mode-toggle {
+        top: 10px;
+        right: 10px;
+        width: 45px;
+        height: 45px;
+        font-size: 18px;
+    }
+}
diff --git a/layouts/header.html b/layouts/header.html
@@ -37,6 +37,11 @@
         <img class="github-ribbon" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub">
     </a>
 
+<!-- Dark Mode Toggle Button -->
+<button id="darkModeToggle" class="dark-mode-toggle" title="Switch to Dark Mode" aria-label="Toggle dark mode">
+    🌙
+</button>
+
 <!-- Mobile Filter Toggle Button -->
 <button id="filterToggleBtn" class="filter-toggle-btn" onclick="toggleFiltersPanel()" aria-label="Toggle filters">
     🔍 Filters