Add Light/Dark Mode Toggle for Better User Experience

Makefile

@@ -0,0 +1,20 @@
+VENV := .venv
+PYTHON := python
+
+ifeq ($(OS),Windows_NT)
+PY := $(VENV)\Scripts\python.exe
+PIP := $(VENV)\Scripts\pip.exe
+else
+PY := $(VENV)/bin/python
+PIP := $(VENV)/bin/pip
+endif
+
+.PHONY: run venv install
+
+venv:
+	$(PYTHON) -m venv $(VENV)
+	$(PIP) install --upgrade pip
+	$(PIP) install -r requirements.txt
+
+run: venv
+	$(PY) manage.py runserver 0.0.0.0:8000

README.md

@@ -84,3 +84,28 @@ pip install -r requirements.txt
 ```bash
 python manage.py runserver
 ```
+
+## ⚙️ Run with Make
+
+- **Run locally:**
+
+```bash
+make run
+```
+
+- **Notes:**
+	- On first run the `Makefile` creates a virtual environment in `.venv` and installs `requirements.txt`.
+	- If you don't have `make` (common on Windows), run these commands instead:
+
+```bash
+python -m venv .venv
+.venv\Scripts\pip install -r requirements.txt   # Windows
+.venv\Scripts\python manage.py runserver 0.0.0.0:8000
+```
+
+Or on Unix/macOS:
+
+```bash
+.venv/bin/pip install -r requirements.txt
+.venv/bin/python manage.py runserver 0.0.0.0:8000
+```

static/js/script.js

@@ -67,3 +67,56 @@ if (photoInput)
 // Scroll to Bottom
 const conversationThread = document.querySelector(".room__box");
 if (conversationThread) conversationThread.scrollTop = conversationThread.scrollHeight;
+
+// Theme toggle: persist preference in localStorage and apply on load
+const themeToggle = document.getElementById('theme-toggle');
+const themeKey = 'studybuddy_theme';
+
+function applyTheme(theme) {
+  if (theme === 'light') {
+    document.body.classList.add('light');
+  } else {
+    document.body.classList.remove('light');
+  }
+  updateThemeIcon(theme);
+}
+
+function updateThemeIcon(theme) {
+  if (!themeToggle) return;
+  const icon = document.getElementById('theme-icon');
+  if (!icon) return;
+  if (theme === 'light') {
+    // show moon (switch to dark)
+    icon.innerHTML = '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" fill="currentColor"></path>';
+  } else {
+    // show sun (switch to light)
+    icon.innerHTML = '<path d="M6.76 4.84l-1.8-1.79L3.17 5.84l1.79 1.79 1.8-2.79zM1 13h3v-2H1v2zm10 9h2v-3h-2v3zm7.03-2.03l1.79 1.79 1.79-1.79-1.79-1.79-1.79 1.79zM20 13h3v-2h-3v2zM12 6a6 6 0 100 12 6 6 0 000-12z" fill="currentColor"></path>';
+  }
+}
+
+// On load: read saved preference or system preference
+(function() {
+  let saved = null;
+  try {
+    saved = localStorage.getItem(themeKey);
+  } catch (e) {
+    // ignore
+  }
+  if (saved === 'light' || saved === 'dark') {
+    applyTheme(saved);
+  } else {
+    const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
+    applyTheme(prefersLight ? 'light' : 'dark');
+  }
+})();
+
+if (themeToggle) {
+  themeToggle.addEventListener('click', () => {
+    const isLight = document.body.classList.contains('light');
+    const newTheme = isLight ? 'dark' : 'light';
+    applyTheme(newTheme);
+    try {
+      localStorage.setItem(themeKey, newTheme);
+    } catch (e) {}
+  });
+}

static/styles/main.css

@@ -1,3 +1,4 @@
+/* Keep minimal — main colors are defined in style.css variables */
 body{
-    background-color: aquamarine;
+    background-color: var(--color-bg);
 }

static/styles/style.css

@@ -14,6 +14,21 @@
   --color-error: #fc4b0b;
 }
 
+/* Light theme overrides (applied when `body` has the `light` class) */
+body.light {
+  --color-main: #1f8feb;
+  --color-main-light: #e6f6ff;
+  --color-dark: #0f1720;
+  --color-dark-medium: #2b3440;
+  --color-dark-light: #56606f;
+  --color-light: #0b0b0b;
+  --color-gray: #6b6b6b;
+  --color-light-gray: #3b3b3b;
+  --color-bg: #ffffff;
+  --color-success: #17b978;
+  --color-error: #d64545;
+}
+
 /*========== base styles ==========*/
 
 * {
@@ -50,6 +65,7 @@ body {
   color: var(--color-light-gray);
   background-color: var(--color-bg);
   min-height: 100vh;
+  transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 img {

templates/navbar.html

@@ -17,6 +17,11 @@ <h1>StudyBuddy</h1>
         </label>
       </form>
       <nav class="header__menu">
+        <button id="theme-toggle" class="btn btn--link" aria-label="Toggle theme" title="Toggle light/dark theme">
+          <svg id="theme-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" fill="currentColor"></path>
+          </svg>
+        </button>
 
 
         <!-- Logged In -->