omroy07 · omroy07 · Jun 9, 2026 · Jun 9, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -5,20 +5,39 @@
     <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>
                 <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>
@@ -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
@@ -5,20 +5,39 @@
     <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>
                 <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>
@@ -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
@@ -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
@@ -4,20 +4,39 @@
     <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>
                 <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>
@@ -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
@@ -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>