ManibalaSinha · Chizaram-Igolo · Feb 22, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 node_modules/
 client/node_modules/
 server/node_modules/
+__pycache__/
+*.pyc
+*.pyo
diff --git a/client/index.html b/client/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DevStations</title>
+    <script>
+      (function () {
+        var t = localStorage.getItem('theme') || 'light';
+        document.documentElement.setAttribute('data-theme', t);
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/src/ThemeContext.jsx b/client/src/ThemeContext.jsx
@@ -0,0 +1,24 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem('theme') || 'light'
+  );
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light'));
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -1,31 +1,21 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
+import { useTheme } from '../ThemeContext';
 
 export default function Navbar() {
+  const { theme, toggleTheme } = useTheme();
+
   return (
-    <nav
-      style={{
-        padding: '1rem',
-        backgroundColor: '#f8f9fa',
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        gap: '20px',       // space between links
-        boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
-        fontWeight: 'bold',
-      }}
-    >
-      <Link to="/" style={{ textDecoration: 'none', color: '#333' }}>
-        Home
-      </Link>
-      <Link to="/courses" style={{ textDecoration: 'none', color: '#333' }}>
-        Courses
-      </Link>
-      <Link to="/quiz" style={{ textDecoration: 'none', color: '#333' }}>
-        Quiz
-      </Link>
+    <nav className="navbar">
+      <Link to="/" className="navbar-link">Home</Link>
+      <Link to="/courses" className="navbar-link">Courses</Link>
+      <Link to="/quiz" className="navbar-link">Quiz</Link>
+      <button
+        className="theme-toggle"
+        onClick={toggleTheme}
+        aria-label="Toggle theme"
+      >
+        {theme === 'light' ? '🌙' : '☀️'}
+      </button>
     </nav>
   );
 }
-
-
diff --git a/client/src/index.css b/client/src/index.css
@@ -1,13 +1,90 @@
- /* client/src/index.css */
-
-/* src/index.css */
-.red-bordered-heading {
-  border: 2px solid red;
+/* client/src/index.css */
+
+/* ── Theme variables ───────────────────────────────── */
+:root {
+  --bg:          #ffffff;
+  --text:        #333333;
+  --muted:       #888888;
+  --nav-bg:      #f8f9fa;
+  --nav-shadow:  rgba(0, 0, 0, 0.1);
+  --card-border: #dddddd;
+  --card-text:   #444444;
 }
 
+[data-theme="dark"] {
+  --bg:          #121212;
+  --text:        #e0e0e0;
+  --muted:       #aaaaaa;
+  --nav-bg:      #1e1e1e;
+  --nav-shadow:  rgba(0, 0, 0, 0.5);
+  --card-border: #333333;
+  --card-text:   #cccccc;
+}
+
+/* ── Base ──────────────────────────────────────────── */
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-
+  background-color: var(--bg);
+  color: var(--text);
+  transition: background-color 0.25s, color 0.25s;
+}
+
+/* ── Existing ──────────────────────────────────────── */
+.red-bordered-heading {
+  border: 2px solid red;
+}
+
+/* ── Navbar ────────────────────────────────────────── */
+.navbar {
+  padding: 1rem;
+  background-color: var(--nav-bg);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 0 2px 5px var(--nav-shadow);
+  font-weight: bold;
+  transition: background-color 0.25s, box-shadow 0.25s;
+}
+
+.navbar-link {
+  text-decoration: none;
+  color: var(--text);
+  transition: color 0.25s;
+}
+
+.theme-toggle {
+  margin-left: auto;
+  background: none;
+  border: 1px solid var(--card-border);
+  border-radius: 4px;
+  padding: 0.25rem 0.6rem;
+  cursor: pointer;
+  color: var(--text);
+  font-size: 1rem;
+  transition: border-color 0.25s, color 0.25s;
+}
+
+.theme-toggle:hover {
+  border-color: var(--muted);
+}
+
+/* ── Mobile & tablet ───────────────────────────────── */
+@media (max-width: 768px) {
+  .navbar {
+    justify-content: space-around;
+    gap: 0;
+    padding: 0.75rem 0.5rem;
+  }
+
+  .navbar-link {
+    flex: 1;
+    text-align: center;
+    padding: 0.5rem 0;
+  }
+
+  .theme-toggle {
+    margin-left: 0;
+  }
 }
-
diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -3,12 +3,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App'
 import { HashRouter } from 'react-router-dom';
+import { ThemeProvider } from './ThemeContext';
 import './index.css';    // Optional global styles
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-  <HashRouter> {/* or HashRouter if deploying to GitHub Pages */}
-    <App />
+    <HashRouter>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
     </HashRouter>
   </React.StrictMode>
 );