feat: implement dark mode support with theme toggle and persistence

README.md

@@ -80,6 +80,7 @@ To run the tests locally, use:
 
 ## ✨ Key Features
 *   **Interactive Dashboard**: Real-time summary of pending, overdue, and recently completed tasks with visual charts.
+*   **Dark Mode Support**: Full dark theme support with persistence across sessions using `localStorage`.
 *   **Full CRUD Cycle**: Create, Read, Update, and Delete tasks.
 *   **Due Date Tracking**: Set deadlines for tasks and track overdue items.
 *   **Quick Status Toggle**: Instantly mark tasks as Done or Undone from the main list view.

src/main/resources/static/styles.css

@@ -1,17 +1,30 @@
 /* Custom Task Manager Styles */
 
+:root {
+    --task-card-bg: #ffffff;
+    --task-card-text: #212529;
+}
+
+[data-bs-theme="dark"] {
+    --task-card-bg: #2b3035;
+    --task-card-text: #dee2e6;
+}
+
 body {
-    background-color: #f8f9fa;
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
 }
 
 /* Task Card Hover Effects */
 .task-card {
     transition: transform 0.2s, box-shadow 0.2s;
+    background-color: var(--task-card-bg);
+    color: var(--task-card-text);
 }
 
 .task-card:hover {
     transform: translateY(-3px);
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
 }
 
 /* Priority Indicator Borders */
@@ -44,3 +57,15 @@ body.auth-page {
     align-items: center;
     min-height: 100vh;
 }
+
+/* Dark Mode Toggle Button Positioning */
+.theme-toggle {
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 20px;
+    transition: background-color 0.3s;
+}
+
+.theme-toggle:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}

src/main/resources/templates/dashboard.html

@@ -29,6 +29,9 @@
                 </li>
             </ul>
             <div class="d-flex align-items-center">
+                <button class="btn btn-link nav-link me-3 theme-toggle" id="themeToggle" title="Toggle Dark Mode">
+                    <span id="themeIcon">🌙</span>
+                </button>
                 <span class="navbar-text me-3 text-white" th:text="'Logged in as: ' + ${#authentication.name}"></span>
                 <form th:action="@{/logout}" method="post" class="m-0">
                     <button class="btn btn-outline-light btn-sm" type="submit">Logout</button>
@@ -174,6 +177,29 @@ <h5 class="card-title mb-4">Tasks by Priority</h5>
         ctxPriority.fillText("No priority data available", 150, 150);
     }
     /*]]>*/
+
+    // Theme Management
+    const themeToggle = document.getElementById('themeToggle');
+    const themeIcon = document.getElementById('themeIcon');
+    const htmlElement = document.documentElement;
+
+    // Load saved theme
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    htmlElement.setAttribute('data-bs-theme', savedTheme);
+    updateIcon(savedTheme);
+
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = htmlElement.getAttribute('data-bs-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        htmlElement.setAttribute('data-bs-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        updateIcon(newTheme);
+    });
+
+    function updateIcon(theme) {
+        themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
 </script>
 
 </body>

src/main/resources/templates/edit-task.html

@@ -14,6 +14,9 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
     <div class="container">
         <a class="navbar-brand" th:href="@{/tasks}">Task Manager</a>
+        <button class="btn btn-link nav-link theme-toggle" id="themeToggle" title="Toggle Dark Mode">
+            <span id="themeIcon">🌙</span>
+        </button>
     </div>
 </nav>
 
@@ -60,5 +63,29 @@ <h2 class="card-title mb-4 text-center">Edit Task</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+    // Theme Management
+    const themeToggle = document.getElementById('themeToggle');
+    const themeIcon = document.getElementById('themeIcon');
+    const htmlElement = document.documentElement;
+
+    // Load saved theme
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    htmlElement.setAttribute('data-bs-theme', savedTheme);
+    updateIcon(savedTheme);
+
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = htmlElement.getAttribute('data-bs-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        htmlElement.setAttribute('data-bs-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        updateIcon(newTheme);
+    });
+
+    function updateIcon(theme) {
+        themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
+</script>
 </body>
 </html>

src/main/resources/templates/login.html

@@ -45,5 +45,10 @@ <h1 class="h3 mb-4 fw-normal text-center">Task Manager Login</h1>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+    // Apply saved theme on load
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-bs-theme', savedTheme);
+</script>
 </body>
 </html>

src/main/resources/templates/register.html

@@ -43,5 +43,10 @@ <h1 class="h3 mb-4 fw-normal text-center">Create Account</h1>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script>
+    // Apply saved theme on load
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-bs-theme', savedTheme);
+</script>
 </body>
 </html>

src/main/resources/templates/tasks.html

@@ -30,6 +30,9 @@
                 </li>
             </ul>
             <div class="d-flex align-items-center">
+                <button class="btn btn-link nav-link me-3 theme-toggle" id="themeToggle" title="Toggle Dark Mode">
+                    <span id="themeIcon">🌙</span>
+                </button>
                 <span class="navbar-text me-3 text-white" th:text="'Logged in as: ' + ${#authentication.name}"></span>
                 <form th:action="@{/logout}" method="post" class="m-0">
                     <button class="btn btn-outline-light btn-sm" type="submit">Logout</button>
@@ -178,6 +181,29 @@ <h4 class="card-title mb-3">Add New Task</h4>
             alert('An error occurred while deleting the task.');
         }
     }
+
+    // Theme Management
+    const themeToggle = document.getElementById('themeToggle');
+    const themeIcon = document.getElementById('themeIcon');
+    const htmlElement = document.documentElement;
+
+    // Load saved theme
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    htmlElement.setAttribute('data-bs-theme', savedTheme);
+    updateIcon(savedTheme);
+
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = htmlElement.getAttribute('data-bs-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        htmlElement.setAttribute('data-bs-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        updateIcon(newTheme);
+    });
+
+    function updateIcon(theme) {
+        themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
 </script>
 </body>
 </html>