ashish-066 · anshika-guleria · Jun 6, 2026 · Jun 6, 2026 · Jun 16, 2026
diff --git a/frontend/website/index.html b/frontend/website/index.html
@@ -6,9 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="AlgoLedger — Track your DSA journey across LeetCode, Codeforces, and GeeksforGeeks. Analytics, streaks, and smart recommendations." />
     <title>AlgoLedger — DSA Progress Tracker</title>
+    <script>
+      (function () {
+        var t = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', t);
+      })();
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,500;1,9..144,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Caveat:wght@500;600;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,500;1,9..144,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Caveat:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/website/package-lock.json b/frontend/website/package-lock.json
diff --git a/frontend/website/src/App.jsx b/frontend/website/src/App.jsx
@@ -1,34 +1,45 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import ChallengePage from './pages/ChallengePage'
+import CommunityPage from './pages/CommunityPage'
+import ContestPage from './pages/ContestPage'
+import DashboardPage from './pages/DashboardPage'
 import LandingPage from './pages/LandingPage'
 import LoginPage from './pages/LoginPage'
-import SignupPage from './pages/SignupPage'
 import OnboardingPage from './pages/OnboardingPage'
-import DashboardPage from './pages/DashboardPage'
 import PracticePage from './pages/PracticePage'
 import ProfilePage from './pages/ProfilePage'
-import ChallengePage from './pages/ChallengePage'
-import ContestPage from './pages/ContestPage'
-import CommunityPage from './pages/CommunityPage'
+import SignupPage from './pages/SignupPage'
+import { TourProvider } from './tour/TourContext'
+import TourOverlay from './tour/TourOverlay'
+
 import UsernameSetupPage from './pages/UsernameSetupPage'
 import { Toaster } from "react-hot-toast";
+function ThemedToaster() {
+    return (
+        <Toaster
+            position="bottom-right"
+            toastOptions={{
+                duration: 3000,
+                style: {
+                    background: "var(--toast-bg)",
+                    color: "var(--toast-color)",
+                    border: "1px solid var(--toast-border)",
+                    borderRadius: "14px",
+                    padding: "14px 18px",
+                },
+            }}
+        />
+    );
+}
+
 
 export default function App() {
     return (
         <BrowserRouter>
-
-            <Toaster
-                position="bottom-right"
-                toastOptions={{
-                    duration: 3000,
-                    style: {
-                        background: "#111827",
-                        color: "#fff",
-                        border: "1px solid rgba(255,255,255,0.08)",
-                        borderRadius: "14px",
-                        padding: "14px 18px",
-                    },
-                }}
-            />
+            <TourProvider>
+            <ThemedToaster />
+            <TourOverlay />
             <Routes>
                 <Route path="/" element={<LandingPage />} />
                 <Route path="/login" element={<LoginPage />} />
@@ -46,6 +57,7 @@ export default function App() {
                 <Route path="*" element={<Navigate to="/" replace />} />
 
             </Routes>
+            </TourProvider>
         </BrowserRouter>
     )
-}
+}
diff --git a/frontend/website/src/components/Footer.jsx b/frontend/website/src/components/Footer.jsx
@@ -6,7 +6,7 @@ export default function Footer() {
             <div className="ml-footer-top">
 
                 <div className="ml-logo">
-                    <div className="ml-logo-icon">
+                    <div className="ml-logo-icon" style={{ color: 'var(--text-primary)' }}>
                         <svg
                             width="14"
                             height="14"
@@ -15,7 +15,7 @@ export default function Footer() {
                         >
                             <path
                                 d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
-                                stroke="#F5EBD6"
+                                stroke="currentColor"
                                 strokeWidth="2.2"
                                 strokeLinecap="round"
                                 strokeLinejoin="round"

diff --git a/frontend/website/src/components/Navbar.jsx b/frontend/website/src/components/Navbar.jsx
@@ -76,11 +76,11 @@ export default function Navbar({ scrolled }) {
                     minWidth: 0,
                 }}
             >
-                <div className="ml-logo-icon">
+                <div className="ml-logo-icon" style={{ color: 'var(--text-primary)' }}>
                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                         <path
                             d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
-                            stroke="#F5EBD6"
+                            stroke="currentColor"
                             strokeWidth="2.2"
                             strokeLinecap="round"
                             strokeLinejoin="round"
@@ -120,7 +120,7 @@ export default function Navbar({ scrolled }) {
                     width: '42px',
                     height: '42px',
                     fontSize: '1.6rem',
-                    color: '#F5EBD6',
+                    color: 'var(--text-primary)',
                     background: 'transparent',
                     border: 'none',
                     cursor: 'pointer',

diff --git a/frontend/website/src/components/Sidebar.jsx b/frontend/website/src/components/Sidebar.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { getUserName, getUserEmail, fetchDashboardData } from '../services/api'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { fetchDashboardData, getUserEmail, getUserName } from '../services/api'
 import { useProfilePic } from '../utils/profilePic'
 
 const NAV_ITEMS = [
@@ -12,7 +12,7 @@ const NAV_ITEMS = [
         ),
         label: 'Dashboard',
         path: '/dashboard',
-        color: '#6366F1',
+        color: 'var(--nav-dashboard)',
     },
     {
         icon: (
@@ -22,7 +22,7 @@ const NAV_ITEMS = [
         ),
         label: 'Training',
         path: '/problems',
-        color: '#22D3EE',
+        color: 'var(--nav-training)',
     },
     {
         icon: (
@@ -32,7 +32,7 @@ const NAV_ITEMS = [
         ),
         label: 'Challenges',
         path: '/challenges',
-        color: '#F59E0B',
+        color: 'var(--nav-challenges)',
     },
     {
         icon: (
@@ -42,7 +42,7 @@ const NAV_ITEMS = [
         ),
         label: 'Community',
         path: '/community',
-        color: '#34D399',
+        color: 'var(--nav-community)',
     },
     {
         icon: (
@@ -52,7 +52,7 @@ const NAV_ITEMS = [
         ),
         label: 'Profile',
         path: '/profile',
-        color: '#F472B6',
+        color: 'var(--nav-profile)',
     },
 ]