Feature: Global Dark Mode / Theme Toggle

[Adithyakp86]

Description

The site currently uses a light-colored aesthetic but does not offer a dark theme option. Modern web projects should support a dark mode option to improve readability in low-light environments and allow users to select their visual preference.

We should implement a global dark theme option toggle in the header navigation that saves the user's selection locally.

---

Proposed Solution / Technical Guidance

1. Refactor Colors to CSS Custom Properties (public/styles.css):

   • Move color tokens (backgrounds, text, card styles, borders) into CSS variables (:root selector).
   • Create a [data-theme="dark"] color overrides selector:

     :root {
       --bg-primary: #ffffff;
       --text-primary: #1a202c;
       /* other variables */
     }
     
     [data-theme="dark"] {
       --bg-primary: #0f172a;
       --text-primary: #f8fafc;
       /* dark variables overrides */
     }

2. Add Toggle Button (views/partials/header.ejs):

   • Add a toggle button (e.g., featuring a sun/moon icon) next to the navigation links.

3. Implement Theme Switcher Script (public/script.js):

   • Write logic to check the initial theme preference:
     1. Check if a theme is saved in localStorage.getItem('theme').
     2. Fall back to the user's system preferences using window.matchMedia('(prefers-color-scheme: dark)').
   • Update the data-theme attribute on document.documentElement based on the preference.
   • Bind a click listener to the theme toggle button to switch modes, update the document attribute, and save the preference in localStorage.

---

Files to Modify

• public/styles.css
• views/partials/header.ejs (or where the global navigation lives)
• public/script.js

---

Definition of Done

• A theme toggle button appears in the main navigation.
• Toggling the button switches colors site-wide without requiring a page refresh.
• User's theme selection is stored in localStorage and persists across sessions/pages.
• System color scheme preference (light/dark mode) is respected on first visit.