From d4a7857c16c57ed90432360c0b82b6615b6dd974 Mon Sep 17 00:00:00 2001
From: Aditya8369 <mahajan2005aditya@gmail.com>
Date: Tue, 9 Jun 2026 17:35:19 +0530
Subject: [PATCH] task-Add a light/dark theme for homepage

---
 404.html                                      |   2 +
 PhotoSynthesis/PhotoSynthesisQuiz.html        |   4 +-
 ...PhotosynthesisLightAbsorptionSpectrum.html |   4 +-
 PhotoSynthesis/Photosynthesistheory.html      |   4 +-
 .../Predator_Prey.html                        |   2 +
 .../PreyPredatorQuiz.html                     |   4 +-
 .../PreyPredatortheory.html                   |   2 +
 atomic_structure/atomic.html                  |   4 +-
 calculus/calculus.html                        |   2 +
 chemical_bonding/chemical_bonding.html        |  13 +-
 chemical_bonding/chemical_bonding.js          |  10 +-
 chemistryquiz/atomic_structurequiz.html       |   2 +
 chemistryquiz/chemical_bondingquiz.html       |   2 +
 chemistryquiz/equilibriumquiz.html            |   2 +
 chemistryquiz/thermoquiz.html                 |   2 +
 community.html                                |  26 +++-
 courses.html                                  |  26 +++-
 equilibrium/equilibrium.html                  |   2 +
 explore.html                                  |  26 +++-
 geometry/geometry.html                        |   2 +
 home.css                                      |  56 +++++--
 home.html                                     |  63 ++++----
 index.html                                    |  38 +----
 learner.html                                  |  26 +++-
 log/login.css                                 |  40 ++---
 log/login.html                                |   2 +
 log/register.html                             |   2 +
 mathsquiz/calculusquiz.html                   |   2 +
 mathsquiz/geometryquiz.html                   |   2 +
 mathsquiz/probabilityquiz.html                |   2 +
 mathsquiz/vectorquiz.html                     |   2 +
 motion/motion.html                            |  17 +-
 my_progress.html                              |  50 ++++--
 nlm/nlm.html                                  |  17 +-
 parents.html                                  |  26 +++-
 probability/probability.html                  |   2 +
 projectile/projectile.html                    |  17 +-
 quiz/motionquiz.html                          |   2 +
 quiz/nlmquiz.html                             |   2 +
 quiz/projectilequiz.html                      |   2 +
 quiz/rayquiz.html                             |   2 +
 ray/ray.html                                  |  17 +-
 resources.html                                |  26 +++-
 styles.css                                    |  86 +++++++---
 sub/biology.html                              |   2 +
 sub/chemistry.html                            |   2 +
 sub/maths.html                                |   2 +
 sub/physics.html                              |   2 +
 teachers.html                                 |  30 +++-
 thermo/thermo.html                            |   2 +
 variables.css                                 | 147 ++++++++++++++++++
 vector3d/vector3d.html                        |   2 +
 52 files changed, 613 insertions(+), 218 deletions(-)
 create mode 100644 variables.css

diff --git a/404.html b/404.html
index 043d963..4210a5b 100644
--- a/404.html
+++ b/404.html
@@ -7,6 +7,8 @@
     <meta name="description" content="Page not found – LearnSphere. The page you are looking for does not exist.">
     <meta name="robots" content="noindex, nofollow">
     <title>404 – Page Not Found | LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <style>
         :root {
             --color-bg-start: #0d0d0d;
diff --git a/PhotoSynthesis/PhotoSynthesisQuiz.html b/PhotoSynthesis/PhotoSynthesisQuiz.html
index d484989..ef4f41f 100644
--- a/PhotoSynthesis/PhotoSynthesisQuiz.html
+++ b/PhotoSynthesis/PhotoSynthesisQuiz.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Photosynthesis Quiz</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -154,7 +156,7 @@
   </style>
 </head>
 <body class="dark-mode">
-  <button class="theme-toggle" onclick="toggleTheme()">🌗 Toggle Theme</button>
+  <button class="theme-toggle" onclick="toggleTheme()" id="themeToggleBtn" aria-label="Toggle theme"></button>
   <h1>🧪 Photosynthesis Quiz</h1>
 
   <form id="quizForm">
diff --git a/PhotoSynthesis/PhotosynthesisLightAbsorptionSpectrum.html b/PhotoSynthesis/PhotosynthesisLightAbsorptionSpectrum.html
index d9f61d9..cee657c 100644
--- a/PhotoSynthesis/PhotosynthesisLightAbsorptionSpectrum.html
+++ b/PhotoSynthesis/PhotosynthesisLightAbsorptionSpectrum.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Photosynthesis Light Absorption Spectrum Simulator</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <style>
     :root {
       --chlorophyll-a: #4CAF50;
@@ -197,7 +199,7 @@
   </style>
 </head>
 <body class="dark-mode">
-  <button class="theme-toggle" onclick="toggleTheme()">🌗 Toggle Theme</button>
+  <button class="theme-toggle" onclick="toggleTheme()" id="themeToggleBtn" aria-label="Toggle theme"></button>
   <header>
     <h1>Photosynthesis Light Absorption Spectrum Simulator</h1>
     <p>Explore how plants absorb different wavelengths of light for photosynthesis</p>
diff --git a/PhotoSynthesis/Photosynthesistheory.html b/PhotoSynthesis/Photosynthesistheory.html
index 841ec29..464d0d9 100644
--- a/PhotoSynthesis/Photosynthesistheory.html
+++ b/PhotoSynthesis/Photosynthesistheory.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Theory – Photosynthesis Simulator</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -86,7 +88,7 @@
   </style>
 </head>
 <body class="dark-mode">
-  <button class="theme-toggle" onclick="toggleTheme()">🌗 Toggle Theme</button>
+  <button class="theme-toggle" onclick="toggleTheme()" id="themeToggleBtn" aria-label="Toggle theme"></button>
   <h1>Understanding Photosynthesis and the Simulator</h1>
 
   <div class="section">
diff --git a/Predator_Prey_Population_Dynamics/Predator_Prey.html b/Predator_Prey_Population_Dynamics/Predator_Prey.html
index 694b5b2..f91c98c 100644
--- a/Predator_Prey_Population_Dynamics/Predator_Prey.html
+++ b/Predator_Prey_Population_Dynamics/Predator_Prey.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Predator-Prey Dynamics Simulation</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         :root {
diff --git a/Predator_Prey_Population_Dynamics/PreyPredatorQuiz.html b/Predator_Prey_Population_Dynamics/PreyPredatorQuiz.html
index 60f1a1f..df106fc 100644
--- a/Predator_Prey_Population_Dynamics/PreyPredatorQuiz.html
+++ b/Predator_Prey_Population_Dynamics/PreyPredatorQuiz.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Predator-Prey Quiz</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -156,7 +158,7 @@
   </style>
 </head>
 <body class="dark-mode">
-  <button class="theme-toggle" onclick="toggleTheme()">🌗 Toggle Theme</button>
+  <button class="theme-toggle" onclick="toggleTheme()" id="themeToggleBtn" aria-label="Toggle theme"></button>
   <h1>🦊 Predator-Prey Quiz</h1>
 
   <form id="quizForm">
diff --git a/Predator_Prey_Population_Dynamics/PreyPredatortheory.html b/Predator_Prey_Population_Dynamics/PreyPredatortheory.html
index 55560dc..4fdfdb1 100644
--- a/Predator_Prey_Population_Dynamics/PreyPredatortheory.html
+++ b/Predator_Prey_Population_Dynamics/PreyPredatortheory.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Lotka-Volterra Theory</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <style>
     body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
diff --git a/atomic_structure/atomic.html b/atomic_structure/atomic.html
index be52df8..ecef08f 100644
--- a/atomic_structure/atomic.html
+++ b/atomic_structure/atomic.html
@@ -7,6 +7,8 @@
   <meta name="description" content="Interactive Atomic Structure and Periodic Trends learning module with theory, animation, formulas, quizzes, and activities." />
 
   <title>Atomic Structure & Periodic Trends | LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
 
   <!-- External CSS -->
   <link rel="stylesheet" href="atomic.css" />
@@ -17,7 +19,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 
-<body onload="loadTheme()">
+<body >
 
   <main class="container">
 
diff --git a/calculus/calculus.html b/calculus/calculus.html
index b9e1efe..e2eadc2 100644
--- a/calculus/calculus.html
+++ b/calculus/calculus.html
@@ -11,6 +11,8 @@
     content="Interactive Calculus learning platform covering limits, derivatives, integrals, animations, theory, formulas, quizzes, and simulations." />
 
   <title>Calculus – Limits, Derivatives & Integrals | LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
 
   <!-- CSS -->
   <link rel="stylesheet" href="calculus.css" />
diff --git a/chemical_bonding/chemical_bonding.html b/chemical_bonding/chemical_bonding.html
index 2db6d1a..4771b5a 100644
--- a/chemical_bonding/chemical_bonding.html
+++ b/chemical_bonding/chemical_bonding.html
@@ -24,18 +24,17 @@
   <link
     href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
     rel="stylesheet">
-</head>
 
-<body onload="loadTheme()">
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script></head>
+
+<body >
 
   <!-- Dark Mode Toggle -->
   <button
     class="dark-toggle"
-    onclick="toggleDarkMode()"
-    aria-label="Toggle Dark Mode">
-
-    🌙 Dark Mode
-  </button>
+    id="themeToggleBtn" class="dark-toggle"
+    aria-label="Toggle Dark Mode" id="themeToggleBtn" aria-label="Toggle theme" aria-label="Toggle theme"></button>
 
   <!-- Main Container -->
   <main class="container">
diff --git a/chemical_bonding/chemical_bonding.js b/chemical_bonding/chemical_bonding.js
index 06aaafa..4634434 100644
--- a/chemical_bonding/chemical_bonding.js
+++ b/chemical_bonding/chemical_bonding.js
@@ -63,15 +63,9 @@ function submitFeedback() {
   }
 }
 
-function toggleDarkMode() {
-  document.body.classList.toggle("dark-mode");
-  localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
-}
+/* Unified Theme Manager overrides */
 
-function loadTheme() {
-  if (localStorage.getItem("darkMode") === "true") {
-    document.body.classList.add("dark-mode");
-  }
+/* Unified Theme Manager overrides */
 }
 
 const canvas = document.getElementById('moleculeCanvas');
diff --git a/chemistryquiz/atomic_structurequiz.html b/chemistryquiz/atomic_structurequiz.html
index 9828233..80b115f 100644
--- a/chemistryquiz/atomic_structurequiz.html
+++ b/chemistryquiz/atomic_structurequiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="atomic_structurequiz.css">
 </head>
 
diff --git a/chemistryquiz/chemical_bondingquiz.html b/chemistryquiz/chemical_bondingquiz.html
index 4c82d3d..c0e32a5 100644
--- a/chemistryquiz/chemical_bondingquiz.html
+++ b/chemistryquiz/chemical_bondingquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="chemical_bondingquiz.css">
 </head>
 
diff --git a/chemistryquiz/equilibriumquiz.html b/chemistryquiz/equilibriumquiz.html
index e62adab..b410470 100644
--- a/chemistryquiz/equilibriumquiz.html
+++ b/chemistryquiz/equilibriumquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="equilibriumquiz.css">
 </head>
 
diff --git a/chemistryquiz/thermoquiz.html b/chemistryquiz/thermoquiz.html
index e9ff31e..59dc3e4 100644
--- a/chemistryquiz/thermoquiz.html
+++ b/chemistryquiz/thermoquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="thermoquiz.css">
 </head>
 
diff --git a/community.html b/community.html
index 425ada0..92fd73c 100644
--- a/community.html
+++ b/community.html
@@ -5,13 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Join the LearnSphere community — connect with learners and educators in our discussion forum.">
     <title>Community – LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -19,6 +35,9 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -41,6 +60,7 @@ <h2>Why LearnSphere?</h2>
         <button class="cta">Start Learning</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/courses.html b/courses.html
index 455b9e2..febfb37 100644
--- a/courses.html
+++ b/courses.html
@@ -5,13 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Browse LearnSphere's courses in Physics, Maths, Chemistry, and Biology.">
     <title>Courses – LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -19,6 +35,9 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -40,6 +59,7 @@ <h2>Why LearnSphere?</h2>
         <button class="cta">Start Learning</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/equilibrium/equilibrium.html b/equilibrium/equilibrium.html
index 10b6953..1908bff 100644
--- a/equilibrium/equilibrium.html
+++ b/equilibrium/equilibrium.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Chemical Equilibrium & Le Chatelier’s Principle - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="equilibrium.css" />
 </head>
 
diff --git a/explore.html b/explore.html
index 514d9cc..b76adae 100644
--- a/explore.html
+++ b/explore.html
@@ -4,13 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Learners - LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -18,6 +34,9 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -40,6 +59,7 @@ <h2>Why LearnSphere?</h2>
         <button class="cta">Start Learning</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/geometry/geometry.html b/geometry/geometry.html
index b6fd6c1..be49543 100644
--- a/geometry/geometry.html
+++ b/geometry/geometry.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Coordinate Geometry & Conic Sections</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="geometry.css" />
 </head>
 
diff --git a/home.css b/home.css
index 718e271..016218d 100644
--- a/home.css
+++ b/home.css
@@ -6,32 +6,37 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #121212; /* Dark background */
-    color: #e0e0e0; /* Light text */
+    background-color: var(--bg-color);
+    background: var(--bg-gradient);
+    color: var(--text-color);
     min-height: 100vh;
+    transition: var(--theme-transition);
 }
 
 /* Study Progress & Chatbot Section */
 .study-progress, .chatbot {
-    background: #1e1e1e; /* Dark background */
+    background: var(--tracker-bg);
     padding: 20px;
     margin: 20px auto;
     width: 50%;
     border-radius: 8px;
-    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.1);
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--card-border);
+    transition: var(--theme-transition);
 }
 
 .study-progress h2, .chatbot h2 {
-    color: #66fcf1; /* Soft Cyan for contrast */
+    color: var(--accent-color);
 }
 
 /* Progress List */
 #progressList li {
-    background: #2a2a2a; /* Slightly lighter dark */
+    background: var(--progress-item-bg);
     padding: 10px;
     margin: 5px;
     border-radius: 5px;
-    color: #ffffff;
+    color: var(--text-color);
+    transition: var(--theme-transition);
 }
 
 /* Chatbox */
@@ -39,11 +44,13 @@ body {
     width: 90%;
     height: 200px;
     overflow-y: auto;
-    background: #2a2a2a; /* Darker background */
+    background: var(--progress-item-bg);
     padding: 10px;
     margin-bottom: 10px;
     border-radius: 5px;
-    color: white;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    transition: var(--theme-transition);
 }
 
 /* User Input */
@@ -51,21 +58,36 @@ body {
     width: 80%;
     padding: 10px;
     margin-bottom: 10px;
-    background: #333; /* Dark input field */
-    color: white;
-    border: 1px solid #444;
+    background: var(--progress-item-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    transition: var(--theme-transition);
 }
 
 /* Buttons */
-button {
-    background-color: #66fcf1;
-    color: #121212;
+button, .logout-button {
+    background-color: var(--btn-primary-bg);
+    color: white;
     border: none;
     padding: 10px 15px;
     border-radius: 5px;
     cursor: pointer;
+    font-weight: bold;
+    transition: var(--theme-transition);
 }
 
-button:hover {
-    background-color: #45a29e;
+button:hover, .logout-button:hover {
+    background-color: var(--btn-primary-hover);
 }
+
+.logout-button {
+    background-color: var(--btn-secondary-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+}
+
+.logout-button:hover {
+    background-color: var(--btn-secondary-hover);
+}
+
diff --git a/home.html b/home.html
index a65704e..3ea53b5 100644
--- a/home.html
+++ b/home.html
@@ -5,15 +5,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Your LearnSphere Dashboard — choose a subject, track your progress, and chat with the AI tutor.">
     <title>Dashboard – LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
     <link rel="stylesheet" href="home.css">
     <style>
         body {
-            background: linear-gradient(135deg, #0d0d0d, #1a1a2e);
-            color: #ffffff;
-            font-family: 'Arial', sans-serif;
+            background: var(--bg-gradient);
+            color: var(--text-color);
+            font-family: 'Poppins', 'Inter', 'Arial', sans-serif;
             text-align: center;
             margin: 0;
             padding: 0;
+            transition: var(--theme-transition);
         }
 
         .container {
@@ -28,8 +30,8 @@
             to   { opacity: 1; transform: translateY(0); }
         }
 
-        .title { font-size: 2.5rem; text-shadow: 0 0 10px cyan; }
-        .description { font-size: 1.2rem; margin-bottom: 20px; opacity: 0.8; }
+        .title { font-size: 2.5rem; text-shadow: var(--hero-title-shadow); }
+        .description { font-size: 1.2rem; margin-bottom: 20px; color: var(--text-muted); }
 
         .button-container {
             display: grid;
@@ -39,21 +41,21 @@
         }
 
         .button {
-            background: #007bff;
+            background: var(--btn-primary-bg);
             color: white;
             text-decoration: none;
             padding: 12px 15px;
             border-radius: 8px;
             font-size: 1rem;
-            transition: 0.3s;
-            box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+            transition: var(--theme-transition);
+            box-shadow: var(--card-shadow);
             border: none;
             cursor: pointer;
             position: relative;
             overflow: hidden;
         }
 
-        .button:hover { background: #0056b3; transform: scale(1.05); }
+        .button:hover { background: var(--btn-primary-hover); transform: scale(1.05); }
 
         @media (max-width: 600px) {
             .title { font-size: 2rem; }
@@ -62,35 +64,37 @@
 
         /* ── Progress Tracker ─────────────────────────────────────────────── */
         .progress-overview {
-            background: #1a1a2e;
+            background: var(--tracker-bg);
             border-radius: 10px;
             padding: 20px;
             margin: 20px auto;
-            box-shadow: 0 0 15px rgba(0,255,255,0.15);
+            box-shadow: var(--card-shadow);
+            transition: var(--theme-transition);
         }
 
-        .progress-overview h2 { color: #66fcf1; margin-bottom: 10px; }
+        .progress-overview h2 { color: var(--accent-color); margin-bottom: 10px; }
 
         /* Completion bar */
         .progress-bar-track {
-            background: #2a2a2a;
+            background: var(--border-color);
             border-radius: 50px;
             height: 12px;
             overflow: hidden;
             margin-bottom: 8px;
+            transition: var(--theme-transition);
         }
 
         #progress-bar-fill {
             height: 100%;
             width: 0%;
-            background: linear-gradient(90deg, #007bff, #66fcf1);
+            background: var(--progress-bar-fill);
             border-radius: 50px;
             transition: width 0.5s ease;
         }
 
         #progress-summary {
             font-size: 0.85rem;
-            color: rgba(255,255,255,0.6);
+            color: var(--text-muted);
             margin-bottom: 14px;
         }
 
@@ -106,17 +110,18 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            background: #2a2a2a;
+            background: var(--progress-item-bg);
             padding: 10px 14px;
             margin: 6px 0;
             border-radius: 6px;
-            border-left: 4px solid #444;
-            transition: border-color 0.3s;
+            border-left: 4px solid var(--border-color);
+            transition: var(--theme-transition);
+            color: var(--text-color);
         }
 
-        #progressList li.progress-completed  { border-color: #66fcf1; }
-        #progressList li.progress-in-progress { border-color: #f0a500; }
-        #progressList li.progress-not-started { border-color: #555; }
+        #progressList li.progress-completed  { border-color: var(--completed-color); }
+        #progressList li.progress-in-progress { border-color: var(--in-progress-color); }
+        #progressList li.progress-not-started { border-color: var(--not-started-color); }
 
         .progress-label { font-size: 0.95rem; flex: 1; }
 
@@ -136,10 +141,11 @@
         .progress-badge:active { transform: scale(0.95); }
 
         .progress-badge:focus-visible {
-            outline: 2px solid cyan;
+            outline: 2px solid var(--accent-color);
             outline-offset: 2px;
         }
     </style>
+    <script src="theme.js"></script>
 </head>
 <body>
 
@@ -205,11 +211,14 @@ <h2 id="chatbot-heading">🤖 Ask Your AI Tutor</h2>
             </div>
         </section>
 
-        <button
-            id="logoutButton"
-            class="logout-button"
-            aria-label="Log out of LearnSphere"
-        >Logout</button>
+        <div class="footer-actions" style="margin-top: 30px; display: flex; justify-content: center; gap: 15px; align-items: center;">
+            <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme" style="background: var(--btn-secondary-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: var(--theme-transition);"></button>
+            <button
+                id="logoutButton"
+                class="logout-button"
+                aria-label="Log out of LearnSphere"
+            >Logout</button>
+        </div>
     </div>
 
     <script src="progress.js"></script>
diff --git a/index.html b/index.html
index d911608..8d3af95 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="LearnSphere – An AI-powered educational platform providing world-class education to everyone, anywhere.">
     <title>LearnSphere - Quality Education</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
 
-    <header class="navbar" role="banner">
+        <header class="navbar" role="banner">
         <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
 
         <!-- Hamburger button — visible only on mobile -->
@@ -36,6 +38,8 @@
             </ul>
         </nav>
 
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -60,37 +64,9 @@ <h2>Real results.</h2>
         </section>
     </main>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
-    <script>
-        // Hamburger menu toggle
-        const hamburgerBtn = document.getElementById("hamburgerBtn");
-        const navMenu = document.getElementById("navMenu");
-
-        hamburgerBtn.addEventListener("click", () => {
-            const isOpen = navMenu.classList.toggle("is-open");
-            hamburgerBtn.classList.toggle("is-open", isOpen);
-            hamburgerBtn.setAttribute("aria-expanded", isOpen.toString());
-        });
-
-        // Close menu when a nav link is clicked (single-page anchor behaviour)
-        navMenu.querySelectorAll("a").forEach(link => {
-            link.addEventListener("click", () => {
-                navMenu.classList.remove("is-open");
-                hamburgerBtn.classList.remove("is-open");
-                hamburgerBtn.setAttribute("aria-expanded", "false");
-            });
-        });
-
-        // Close menu on Escape key
-        document.addEventListener("keydown", (e) => {
-            if (e.key === "Escape" && navMenu.classList.contains("is-open")) {
-                navMenu.classList.remove("is-open");
-                hamburgerBtn.classList.remove("is-open");
-                hamburgerBtn.setAttribute("aria-expanded", "false");
-                hamburgerBtn.focus();
-            }
-        });
-    </script>
+    
 </body>
 
 </html>
diff --git a/learner.html b/learner.html
index 90256db..88b97f6 100644
--- a/learner.html
+++ b/learner.html
@@ -4,13 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Learners – LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -18,6 +34,9 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -40,6 +59,7 @@ <h2>Why LearnSphere?</h2>
         <button class="cta">Start Learning</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/log/login.css b/log/login.css
index f6d053c..235a2a7 100644
--- a/log/login.css
+++ b/log/login.css
@@ -3,9 +3,9 @@
 }
 
 body {
-    background: linear-gradient(135deg, #0d0d0d, #1a1a2e);
-    color: #ffffff;
-    font-family: 'Arial', sans-serif;
+    background: var(--bg-gradient);
+    color: var(--text-color);
+    font-family: 'Poppins', 'Inter', 'Arial', sans-serif;
     text-align: center;
     margin: 0;
     padding: 0;
@@ -13,6 +13,7 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    transition: var(--theme-transition);
 }
 
 /* ── Accessibility: Screen-reader only text ───────────────────────────────── */
@@ -30,13 +31,15 @@ body {
 
 /* ── Auth Container ───────────────────────────────────────────────────────── */
 .auth-container {
-    background: #1a1a2e;
+    background: var(--card-bg);
     padding: 30px;
     border-radius: 10px;
-    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+    box-shadow: var(--card-shadow);
+    border: 1px solid var(--card-border);
     width: 350px;
     text-align: center;
     animation: fadeIn 0.5s ease-out;
+    transition: var(--theme-transition);
 }
 
 @keyframes fadeIn {
@@ -48,7 +51,8 @@ body {
 h2 {
     font-size: 1.8rem;
     margin-bottom: 15px;
-    text-shadow: 0 0 10px cyan;
+    text-shadow: var(--hero-title-shadow);
+    transition: var(--theme-transition);
 }
 
 /* ── Form Groups ──────────────────────────────────────────────────────────── */
@@ -68,21 +72,21 @@ input {
     width: 100%;
     padding: 10px 12px;
     border-radius: 5px;
-    border: 1px solid transparent;
-    background: #0d0d0d;
-    color: white;
+    border: 1px solid var(--border-color);
+    background: var(--progress-item-bg);
+    color: var(--text-color);
     font-size: 1rem;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    transition: var(--theme-transition), border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 input:focus {
     outline: none;
-    border-color: cyan;
-    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.25);
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--glass-border);
 }
 
 input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--text-muted);
 }
 
 /* ── Password field with toggle button ───────────────────────────────────── */
@@ -112,27 +116,27 @@ input::placeholder {
 
 .toggle-password:hover,
 .toggle-password:focus {
-    color: cyan;
-    outline: 2px solid cyan;
+    color: var(--accent-color);
+    outline: 2px solid var(--accent-color);
     outline-offset: 2px;
 }
 
 /* ── Submit Button ────────────────────────────────────────────────────────── */
 .auth-button {
     width: 100%;
-    background: #007bff;
+    background: var(--btn-primary-bg);
     color: white;
     padding: 12px;
     border: none;
     border-radius: 8px;
     font-size: 1rem;
     cursor: pointer;
-    transition: background 0.3s ease, transform 0.2s ease;
+    transition: var(--theme-transition), transform 0.2s ease;
     margin-top: 4px;
 }
 
 .auth-button:hover {
-    background: #0056b3;
+    background: var(--btn-primary-hover);
 }
 
 .auth-button:focus-visible {
diff --git a/log/login.html b/log/login.html
index cb9ef7c..3f6565b 100644
--- a/log/login.html
+++ b/log/login.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Log in to your LearnSphere account to access courses, track your progress, and use the AI tutor.">
     <title>Login – LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="login.css">
 </head>
 <body>
diff --git a/log/register.html b/log/register.html
index 984ebf4..8530abc 100644
--- a/log/register.html
+++ b/log/register.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Create your free LearnSphere account to access AI-powered tutoring, courses, and learning tools.">
     <title>Sign Up – LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="login.css">
 </head>
 <body>
diff --git a/mathsquiz/calculusquiz.html b/mathsquiz/calculusquiz.html
index 57d508f..4c2dc00 100644
--- a/mathsquiz/calculusquiz.html
+++ b/mathsquiz/calculusquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="calculusquiz.css">
 </head>
 
diff --git a/mathsquiz/geometryquiz.html b/mathsquiz/geometryquiz.html
index 4ec08ca..874ba6e 100644
--- a/mathsquiz/geometryquiz.html
+++ b/mathsquiz/geometryquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="geometryquiz.css">
 </head>
 
diff --git a/mathsquiz/probabilityquiz.html b/mathsquiz/probabilityquiz.html
index fac0320..118f3fa 100644
--- a/mathsquiz/probabilityquiz.html
+++ b/mathsquiz/probabilityquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="probabilityquiz.css">
 </head>
 
diff --git a/mathsquiz/vectorquiz.html b/mathsquiz/vectorquiz.html
index 851b688..e710cd1 100644
--- a/mathsquiz/vectorquiz.html
+++ b/mathsquiz/vectorquiz.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="vectorquiz.css">
 </head>
 
diff --git a/motion/motion.html b/motion/motion.html
index 3ea53d1..cbfc71f 100644
--- a/motion/motion.html
+++ b/motion/motion.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Motion Simulation - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="motion.css">
     <style>
         body {
@@ -202,8 +204,8 @@
     </style>
 </head>
 
-<body onload="loadTheme()">
-    <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Dark Mode</button>
+<body >
+    <button class="dark-toggle" id="themeToggleBtn" class="dark-toggle" id="themeToggleBtn" aria-label="Toggle theme" aria-label="Toggle theme"></button>
 
     <div class="container">
         <h1 class="title">Motion Simulation</h1>
@@ -369,16 +371,9 @@ <h2>Equations of Motion</h2>
             }, 100);  // Small delay to ensure canvas is loaded
         }
 
-        function toggleDarkMode() {
-            let body = document.body;
-            body.classList.toggle("dark-mode");
-            localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-        }
+        
 
-        function loadTheme() {
-            if (localStorage.getItem("darkMode") === "true") {
-                document.body.classList.add("dark-mode");
-            }
+        
         }
     </script>
 
diff --git a/my_progress.html b/my_progress.html
index 9e39e2a..242acda 100644
--- a/my_progress.html
+++ b/my_progress.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>My Progress - LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
   <link rel="stylesheet" href="styles.css" />
   <style>
     .progress-wrap {
@@ -100,21 +102,38 @@
 
 <body>
 
-  <header class="navbar">
-    <div class="logo"><a href="index.html">LearnSphere</a></div>
-    <nav>
-      <ul>
-        <li><a href="explore.html">Explore</a></li>
-        <li><a href="courses.html">Courses</a></li>
-        <li><a href="resources.html">Resources</a></li>
-        <li><a href="community.html">Community</a></li>
-      </ul>
-    </nav>
-    <div class="buttons">
-      <button class="login"><a href="log/login.html">Log in</a></button>
-      <button class="signup"><a href="log/register.html">Sign up</a></button>
-    </div>
-  </header>
+      <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
+            <ul>
+                <li><a href="explore.html">Explore</a></li>
+                <li><a href="courses.html">Courses</a></li>
+                <li><a href="resources.html">Resources</a></li>
+                <li><a href="community.html">Community</a></li>
+            </ul>
+        </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
+        <div class="buttons">
+            <button class="login"><a href="log/login.html">Log in</a></button>
+            <button class="signup"><a href="log/register.html">Sign up</a></button>
+        </div>
+    </header>
 
   <div class="progress-wrap">
     <h1>My Progress</h1>
@@ -162,6 +181,7 @@ <h2 style="margin-top:0">Topic-wise performance</h2>
 
   <script src="quizProgress.js"></script>
   <script src="my_progress.js"></script>
+    <script src="navbar.js"></script>
 </body>
 
 </html>
diff --git a/nlm/nlm.html b/nlm/nlm.html
index 5f24c84..d8f2f3b 100644
--- a/nlm/nlm.html
+++ b/nlm/nlm.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Newton's Law of Motion Simulation - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="nlm.css">
     <style>
         body {
@@ -202,8 +204,8 @@
     </style>
 </head>
 
-<body onload="loadTheme()">
-    <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Dark Mode</button>
+<body >
+    <button class="dark-toggle" id="themeToggleBtn" class="dark-toggle" id="themeToggleBtn" aria-label="Toggle theme" aria-label="Toggle theme"></button>
 
     <div class="container">
         <h1 class="title">Newton's Laws of Motion Simulation</h1>
@@ -370,16 +372,9 @@ <h2>Equations of Motion</h2>
             }, 100);  // Small delay to ensure canvas is loaded
         }
 
-        function toggleDarkMode() {
-            let body = document.body;
-            body.classList.toggle("dark-mode");
-            localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-        }
+        
 
-        function loadTheme() {
-            if (localStorage.getItem("darkMode") === "true") {
-                document.body.classList.add("dark-mode");
-            }
+        
         }
     </script>
 
diff --git a/parents.html b/parents.html
index 7dbc7c6..f04d6fc 100644
--- a/parents.html
+++ b/parents.html
@@ -4,13 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Parents – LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -18,6 +34,9 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -40,6 +59,7 @@ <h2>Why LearnSphere?</h2>
         <button class="cta">Start Learning</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/probability/probability.html b/probability/probability.html
index 27ef9eb..b9b85fe 100644
--- a/probability/probability.html
+++ b/probability/probability.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Probability & Statistics</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="probability.css" />
 </head>
 
diff --git a/projectile/projectile.html b/projectile/projectile.html
index 93f558d..c6e26eb 100644
--- a/projectile/projectile.html
+++ b/projectile/projectile.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Projectile Motion</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="ProjectileMotion.css">
     <style>
         body {
@@ -202,8 +204,8 @@
     </style>
 </head>
 
-<body onload="loadTheme()">
-    <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Dark Mode</button>
+<body >
+    <button class="dark-toggle" id="themeToggleBtn" class="dark-toggle" id="themeToggleBtn" aria-label="Toggle theme" aria-label="Toggle theme"></button>
 
     <div class="container">
         <h1>Projectile Motion Simulation</h1>
@@ -342,16 +344,9 @@ <h2>Motion in Physics</h2>
             }, 100);  // Small delay to ensure canvas is loaded
         }
 
-        function toggleDarkMode() {
-            let body = document.body;
-            body.classList.toggle("dark-mode");
-            localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-        }
+        
 
-        function loadTheme() {
-            if (localStorage.getItem("darkMode") === "true") {
-                document.body.classList.add("dark-mode");
-            }
+        
         }
     </script>
 
diff --git a/quiz/motionquiz.html b/quiz/motionquiz.html
index 503cbfb..62b24c4 100644
--- a/quiz/motionquiz.html
+++ b/quiz/motionquiz.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="motionquiz.css">
 </head>
 
diff --git a/quiz/nlmquiz.html b/quiz/nlmquiz.html
index fe2ee18..1b7da5d 100644
--- a/quiz/nlmquiz.html
+++ b/quiz/nlmquiz.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="nlmquiz.css">
 </head>
 
diff --git a/quiz/projectilequiz.html b/quiz/projectilequiz.html
index 50dffbe..11fd05d 100644
--- a/quiz/projectilequiz.html
+++ b/quiz/projectilequiz.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Physics Projectile Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="projectilequiz.css">
 </head>
 
diff --git a/quiz/rayquiz.html b/quiz/rayquiz.html
index e3d2e91..3e700ec 100644
--- a/quiz/rayquiz.html
+++ b/quiz/rayquiz.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Physics Motion Quiz - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="rayquiz.css">
 </head>
 
diff --git a/ray/ray.html b/ray/ray.html
index bf9ddf4..443c5a4 100644
--- a/ray/ray.html
+++ b/ray/ray.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ray Optics - LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="ray.css">
     <style>
         body {
@@ -202,8 +204,8 @@
     </style>
 </head>
 
-<body onload="loadTheme()">
-    <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Dark Mode</button>
+<body >
+    <button class="dark-toggle" id="themeToggleBtn" class="dark-toggle" id="themeToggleBtn" aria-label="Toggle theme" aria-label="Toggle theme"></button>
 
     <div class="container">
         <h1>Mirror Reflection Simulation</h1>
@@ -348,16 +350,9 @@ <h2>Motion in Physics</h2>
             }, 100);  // Small delay to ensure canvas is loaded
         }
 
-        function toggleDarkMode() {
-            let body = document.body;
-            body.classList.toggle("dark-mode");
-            localStorage.setItem("darkMode", body.classList.contains("dark-mode"));
-        }
+        
 
-        function loadTheme() {
-            if (localStorage.getItem("darkMode") === "true") {
-                document.body.classList.add("dark-mode");
-            }
+        
         }
     </script>
 
diff --git a/resources.html b/resources.html
index 98ef39e..f67a909 100644
--- a/resources.html
+++ b/resources.html
@@ -4,13 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Resources - LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -18,6 +34,9 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
             <button class="login"><a href="log/login.html">Log in</a></button>
             <button class="signup"><a href="log/register.html">Sign up</a></button>
@@ -40,6 +59,7 @@ <h2>Everything You Need to Learn</h2>
         <button class="cta">Browse Resources</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
index 61940a3..c37582d 100644
--- a/styles.css
+++ b/styles.css
@@ -3,13 +3,14 @@
 }
 
 body {
-    background: linear-gradient(135deg, #0d0d0d, #1a1a2e);
-    color: #ffffff;
-    font-family: 'Arial', sans-serif;
+    background: var(--bg-gradient);
+    color: var(--text-color);
+    font-family: 'Poppins', 'Inter', 'Arial', sans-serif;
     text-align: center;
     margin: 0;
     padding: 0;
     min-height: 100vh;
+    transition: var(--theme-transition);
 }
 
 /* ─── Navbar ──────────────────────────────────────────────────────────────── */
@@ -17,18 +18,23 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #002244;
+    background: var(--navbar-bg);
     padding: 15px 20px;
-    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+    box-shadow: var(--card-shadow);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--card-border);
     position: relative;
     z-index: 100;
+    transition: var(--theme-transition);
 }
 
 .logo {
     font-size: 1.8rem;
     font-weight: bold;
-    color: cyan;
+    color: var(--logo-color);
     flex-shrink: 0;
+    transition: var(--theme-transition);
 }
 
 .logo a {
@@ -50,15 +56,15 @@ body {
 
 .navbar ul li a {
     text-decoration: none;
-    color: white;
+    color: var(--nav-link);
     font-size: 1.2rem;
-    transition: color 0.3s;
+    transition: var(--theme-transition);
 }
 
 .navbar ul li a:hover,
 .navbar ul li a:focus {
-    color: cyan;
-    outline: 2px solid cyan;
+    color: var(--nav-link-hover);
+    outline: 2px solid var(--nav-link-hover);
     outline-offset: 2px;
     border-radius: 2px;
 }
@@ -70,14 +76,14 @@ body {
 }
 
 .buttons button {
-    background: #007bff;
+    background: var(--btn-primary-bg);
     color: white;
     padding: 10px 15px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1rem;
-    transition: background 0.3s;
+    transition: var(--theme-transition);
 }
 
 .buttons button a {
@@ -86,7 +92,35 @@ body {
 }
 
 .buttons button:hover {
-    background: #0056b3;
+    background: var(--btn-primary-hover);
+}
+
+/* ─── Theme Toggle Button ─────────────────────────────────────────────────── */
+.theme-btn {
+    background: var(--btn-secondary-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    transition: var(--theme-transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.theme-btn:hover {
+    background: var(--btn-secondary-hover);
+    transform: translateY(-1px);
+    box-shadow: var(--card-shadow);
+}
+
+.theme-btn:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
 }
 
 /* ─── Hamburger Menu Button ───────────────────────────────────────────────── */
@@ -107,7 +141,7 @@ body {
     display: block;
     height: 3px;
     width: 100%;
-    background: #ffffff;
+    background: var(--text-color);
     border-radius: 3px;
     transition: transform 0.3s ease, opacity 0.3s ease;
 }
@@ -140,17 +174,20 @@ body {
 
 .hero h1 {
     font-size: 2.5rem;
-    text-shadow: 0 0 10px cyan;
+    text-shadow: var(--hero-title-shadow);
+    transition: var(--theme-transition);
 }
 
 .hero h2 {
     font-size: 2rem;
-    color: #00d9ff;
+    color: var(--hero-subtitle-color);
+    transition: var(--theme-transition);
 }
 
 .hero p {
     font-size: 1.2rem;
-    opacity: 0.8;
+    color: var(--text-muted);
+    transition: var(--theme-transition);
 }
 
 .cta-buttons {
@@ -158,7 +195,7 @@ body {
 }
 
 .cta {
-    background: #007bff;
+    background: var(--btn-primary-bg);
     color: white;
     padding: 12px 18px;
     margin: 5px;
@@ -166,11 +203,12 @@ body {
     font-size: 1rem;
     cursor: pointer;
     border: none;
-    transition: background 0.3s;
+    transition: var(--theme-transition);
 }
 
 .cta:hover {
-    background: #0056b3;
+    background: var(--btn-primary-hover);
+    transform: translateY(-2px);
 }
 
 .cta a {
@@ -200,10 +238,12 @@ body {
         top: 100%;
         left: 0;
         right: 0;
-        background: #002244;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+        background: var(--navbar-bg);
+        box-shadow: var(--card-shadow);
         padding: 12px 0;
         z-index: 99;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
     }
 
     .navbar nav.is-open {
@@ -226,7 +266,7 @@ body {
         padding: 12px 20px;
         text-align: center;
         font-size: 1.1rem;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        border-bottom: 1px solid var(--border-color);
     }
 
     /* Hide auth buttons on very small screens to save space */
diff --git a/sub/biology.html b/sub/biology.html
index ae277f4..2200565 100644
--- a/sub/biology.html
+++ b/sub/biology.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Explore Biology chapters on LearnSphere — Photosynthesis, Predator-Prey Dynamics, Human Anatomy, and more.">
     <title>Biology – LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <!--
         FIX: biology.html previously:
         1. Showed "Chemistry" as the page title and heading (copy-paste error)
diff --git a/sub/chemistry.html b/sub/chemistry.html
index ad4a0a0..f82beec 100644
--- a/sub/chemistry.html
+++ b/sub/chemistry.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Explore Chemistry chapters on LearnSphere — Atomic Structure, Chemical Bonding, Equilibrium, and Thermodynamics.">
     <title>Chemistry – LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="chemistry.css">
     <style>
         body {
diff --git a/sub/maths.html b/sub/maths.html
index 658e56e..9b11299 100644
--- a/sub/maths.html
+++ b/sub/maths.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Maths</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="maths.css" />
     <style>
         body {
diff --git a/sub/physics.html b/sub/physics.html
index 0c5c5f5..a9b5941 100644
--- a/sub/physics.html
+++ b/sub/physics.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Explore Physics chapters on LearnSphere — Motion, NLM, Projectile, and Ray Optics.">
     <title>Physics – LearnSphere</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
     <link rel="stylesheet" href="physics.css">
     <style>
         body {
diff --git a/teachers.html b/teachers.html
index c8a3039..3026d0f 100644
--- a/teachers.html
+++ b/teachers.html
@@ -4,13 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Teachers – LearnSphere</title>
+    <link rel="stylesheet" href="variables.css">
+    <script src="theme.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-    <header class="navbar">
-        <div class="logo"><a href="index.html">LearnSphere</a></div>
-        <nav>
+        <header class="navbar" role="banner">
+        <div class="logo"><a href="index.html" aria-label="LearnSphere Home">LearnSphere</a></div>
+
+        <!-- Hamburger button — visible only on mobile -->
+        <button
+            class="hamburger"
+            id="hamburgerBtn"
+            aria-label="Toggle navigation menu"
+            aria-expanded="false"
+            aria-controls="navMenu"
+        >
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+
+        <nav id="navMenu" role="navigation" aria-label="Main navigation">
             <ul>
                 <li><a href="explore.html">Explore</a></li>
                 <li><a href="courses.html">Courses</a></li>
@@ -18,9 +34,12 @@
                 <li><a href="community.html">Community</a></li>
             </ul>
         </nav>
+
+        <button id="themeToggleBtn" class="theme-btn" aria-label="Toggle theme"></button>
+
         <div class="buttons">
-            <button><a href="log/login.html" class="btn login">Log in</a></button>
-            <button><a href="log/register.html" class="btn signup">Sign up</a></button>
+            <button class="login"><a href="log/login.html">Log in</a></button>
+            <button class="signup"><a href="log/register.html">Sign up</a></button>
         </div>
     </header>
 
@@ -40,6 +59,7 @@ <h2>Why LearnSphere?</h2>
         <button class="cta">Start Learning</button>
     </section>
 
+    <script src="navbar.js"></script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/thermo/thermo.html b/thermo/thermo.html
index 3552eec..cd39b3c 100644
--- a/thermo/thermo.html
+++ b/thermo/thermo.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Thermodynamics & Reaction Kinetics Simulation</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="thermo.css" />
 </head>
 
diff --git a/variables.css b/variables.css
new file mode 100644
index 0000000..21c06d9
--- /dev/null
+++ b/variables.css
@@ -0,0 +1,147 @@
+/* variables.css — LearnSphere Global Design System Tokens */
+
+:root {
+    /* --- Dark Theme (Default) --- */
+    --bg-gradient: linear-gradient(135deg, #0b0f19, #111827);
+    --bg-color: #0b0f19;
+    --text-color: #f8fafc;
+    --text-muted: #94a3b8;
+    
+    --navbar-bg: rgba(17, 24, 39, 0.85);
+    --logo-color: #38bdf8;
+    --nav-link: #cbd5e1;
+    --nav-link-hover: #38bdf8;
+    
+    --btn-primary-bg: #0284c7;
+    --btn-primary-hover: #0369a1;
+    --btn-secondary-bg: #1e293b;
+    --btn-secondary-hover: #334155;
+    
+    --card-bg: rgba(30, 41, 59, 0.7);
+    --card-border: rgba(255, 255, 255, 0.08);
+    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    --border-color: #334155;
+    --accent-color: #38bdf8;
+    
+    --hero-title-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
+    --hero-subtitle-color: #38bdf8;
+    --glass-bg: rgba(17, 24, 39, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    
+    /* Progress Tracker & Chatbot */
+    --tracker-bg: rgba(30, 41, 59, 0.7);
+    --progress-item-bg: rgba(15, 23, 42, 0.6);
+    --progress-bar-fill: linear-gradient(90deg, #0284c7, #38bdf8);
+    --completed-color: #10b981;
+    --in-progress-color: #f59e0b;
+    --not-started-color: #64748b;
+    
+    --theme-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease;
+}
+
+[data-theme="light"] {
+    /* --- Light Theme --- */
+    --bg-gradient: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+    --bg-color: #f1f5f9;
+    --text-color: #0f172a;
+    --text-muted: #475569;
+    
+    --navbar-bg: rgba(255, 255, 255, 0.85);
+    --logo-color: #0284c7;
+    --nav-link: #334155;
+    --nav-link-hover: #0284c7;
+    
+    --btn-primary-bg: #0284c7;
+    --btn-primary-hover: #0369a1;
+    --btn-secondary-bg: #e2e8f0;
+    --btn-secondary-hover: #cbd5e1;
+    
+    --card-bg: rgba(255, 255, 255, 0.8);
+    --card-border: rgba(0, 0, 0, 0.06);
+    --card-shadow: 0 10px 25px -5px rgba(148, 163, 184, 0.15), 0 8px 10px -6px rgba(148, 163, 184, 0.1);
+    --border-color: #cbd5e1;
+    --accent-color: #0284c7;
+    
+    --hero-title-shadow: none;
+    --hero-subtitle-color: #0284c7;
+    --glass-bg: rgba(255, 255, 255, 0.8);
+    --glass-border: rgba(0, 0, 0, 0.06);
+    
+    /* Progress Tracker & Chatbot */
+    --tracker-bg: rgba(255, 255, 255, 0.8);
+    --progress-item-bg: rgba(241, 245, 249, 0.9);
+    --progress-bar-fill: linear-gradient(90deg, #0284c7, #06b6d4);
+    --completed-color: #059669;
+    --in-progress-color: #d97706;
+    --not-started-color: #94a3b8;
+}
+
+/* ==========================================
+   GLOBAL OVERRIDES FOR LIGHT MODE INHERITANCE
+   ========================================== */
+[data-theme="light"] body {
+    background: var(--bg-gradient) !important;
+    background-color: var(--bg-color) !important;
+    color: var(--text-color) !important;
+}
+
+[data-theme="light"] .container,
+[data-theme="light"] .dashboard-container,
+[data-theme="light"] .auth-container,
+[data-theme="light"] .study-progress,
+[data-theme="light"] .progress-overview,
+[data-theme="light"] .chatbot,
+[data-theme="light"] .feedback-card,
+[data-theme="light"] .feedback-popup,
+[data-theme="light"] .content {
+    background: var(--card-bg) !important;
+    background-color: var(--card-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--card-border) !important;
+    box-shadow: var(--card-shadow) !important;
+}
+
+[data-theme="light"] h1,
+[data-theme="light"] h2,
+[data-theme="light"] h3,
+[data-theme="light"] h4,
+[data-theme="light"] h5,
+[data-theme="light"] h6,
+[data-theme="light"] .title {
+    color: var(--text-color) !important;
+    text-shadow: var(--hero-title-shadow) !important;
+}
+
+[data-theme="light"] p,
+[data-theme="light"] .description,
+[data-theme="light"] .subtitle,
+[data-theme="light"] label,
+[data-theme="light"] .switch-auth {
+    color: var(--text-muted) !important;
+}
+
+[data-theme="light"] input,
+[data-theme="light"] textarea,
+[data-theme="light"] select,
+[data-theme="light"] #user-input,
+[data-theme="light"] #chat-box,
+[data-theme="light"] #userInput,
+[data-theme="light"] #chatbox,
+[data-theme="light"] #feedbackInput {
+    background: var(--progress-item-bg) !important;
+    background-color: var(--progress-item-bg) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+[data-theme="light"] #progressList li,
+[data-theme="light"] #progressList li.progress-item {
+    background: var(--progress-item-bg) !important;
+    color: var(--text-color) !important;
+}
+
+[data-theme="light"] .canvas-container {
+    background: var(--progress-item-bg) !important;
+    box-shadow: var(--card-shadow) !important;
+    border: 1px solid var(--border-color) !important;
+}
diff --git a/vector3d/vector3d.html b/vector3d/vector3d.html
index 6201206..9fd023f 100644
--- a/vector3d/vector3d.html
+++ b/vector3d/vector3d.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vectors and 3D Geometry</title>
+    <link rel="stylesheet" href="../variables.css">
+    <script src="../theme.js"></script>
   <link rel="stylesheet" href="vector3d.css" />
 </head>