thetechguardians · Suhaskumard · Jun 13, 2026 · Jun 13, 2026 · Jun 16, 2026 · Jun 16, 2026
diff --git a/Frontend/Analysis/analysis.css b/Frontend/Analysis/analysis.css
@@ -5,57 +5,7 @@
   font-family: "Poppins", sans-serif;
 }
 
-:root {
-  --bg-primary:    #0f1117;
-  --bg-secondary:  #161b27;
-  --bg-card:       #1a1f2e;
-  --text-primary:  #ffffff;
-  --text-muted:    #8892a4;
-  --text-heading:  #e2e8f0;
-  --border-color:  rgba(255, 255, 255, 0.1);
-  --border-strong: rgba(255, 255, 255, 0.2);
-  --shadow-color:  rgba(0, 0, 0, 0.4);
-  --input-bg:      #1a1f2e;
-  --btn-bg:        rgba(255, 255, 255, 0.07);
-  --btn-hover:     rgba(255, 255, 255, 0.12);
-  --bg-0: #020617;
-  --bg-1: #0f172a;
-  --bg-2: #1e293b;
-  --panel: rgba(255, 255, 255, 0.08);
-  --panel-strong: rgba(255, 255, 255, 0.12);
-  --text: #f8fafc;
-  --muted: #cbd5e1;
-  --muted-2: #94a3b8;
-  --accent: #38bdf8;
-  --accent-2: #0ea5e9;
-  --danger: #ef4444;
-  --warning: #f59e0b;
-  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
-}
-
-[data-theme="light"] {
-  --bg-primary:    #f4f6fa;
-  --bg-secondary:  #eaecf2;
-  --bg-card:       #ffffff;
-  --text-primary:  #0f1117;
-  --text-muted:    #5a6475;
-  --text-heading:  #1a202c;
-  --border-color:  rgba(0, 0, 0, 0.1);
-  --border-strong: rgba(0, 0, 0, 0.2);
-  --shadow-color:  rgba(0, 0, 0, 0.1);
-  --input-bg:      #ffffff;
-  --btn-bg:        rgba(0, 0, 0, 0.04);
-  --btn-hover:     rgba(0, 0, 0, 0.08);
-  --bg-0:          #f8fafc;
-  --bg-1:          #eef6ff;
-  --bg-2:          #e2e8f0;
-  --panel:         rgba(255, 255, 255, 0.85);
-  --panel-strong:  rgba(255, 255, 255, 0.95);
-  --text:          #1e293b;
-  --muted:         #475569;
-  --muted-2:       #64748b;
-  --shadow:        0 10px 30px rgba(0, 0, 0, 0.08);
-}
+
 
 html {
   scroll-behavior: smooth;

diff --git a/Frontend/Analysis/analysis.html b/Frontend/Analysis/analysis.html
@@ -9,8 +9,8 @@
 
     <title>Climate Shield | Analysis</title>
 
-    <link rel="stylesheet"
-          href="analysis.css" />
+    <link rel="stylesheet" href="../theme.css" />
+    <link rel="stylesheet" href="analysis.css" />
 
     <script src="../theme.js"></script>
 

diff --git a/Frontend/index.html b/Frontend/index.html
@@ -7,6 +7,7 @@
 
     <title>Climate Shield | Home</title>
 
+    <link rel="stylesheet" href="theme.css" />
     <link rel="stylesheet" href="style.css" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/Frontend/script.js b/Frontend/script.js
@@ -207,59 +207,47 @@ window.onload = function () {
     const insightElement = document.getElementById("climate-insight");
     const anomalyElement = document.getElementById("anomaly-result");
 
-    if (!insightElement || !anomalyElement) {
-        return;
-    }
-
-    const climateInsightElement =
-        document.getElementById("climate-insight");
-
-    insightElement.innerText = insight;
-
-    if (climateInsightElement) {
+    if (insightElement) {
         const insight = generateClimateInsight(
             1.8,
             1.2,
             "Andhra Pradesh"
         );
-
-        climateInsightElement.innerText = insight;
+        insightElement.innerText = insight;
     }
 
-    if (anomalyResultElement) {
+    if (anomalyElement) {
         const tempData = [28, 29, 30, 45, 31, 29];
-
         const results = detectAnomalies(tempData);
-
         const anomalies = results.filter(
             r => r.isAnomaly
         );
 
-    anomalyElement.innerHTML =
-        anomalies.length === 0
-            ? "✅ No unusual climate spikes detected"
-            : anomalies.map(a =>
-                `⚠️ Anomaly: ${a.value}°C (z=${a.zScore.toFixed(2)})`
-            ).join("<br>");
-};
-};
-
-// Scroll to Top Button
-const scrollTopBtn = document.getElementById("scrollTopBtn");
-
-if (scrollTopBtn) {
-  window.addEventListener("scroll", () => {
-    if (window.scrollY > 300) {
-      scrollTopBtn.classList.add("show");
-    } else {
-      scrollTopBtn.classList.remove("show");
-    }
-  });
+       anomalyElement.innerHTML =
+            anomalies.length === 0
+                ? "✅ No unusual climate spikes detected"
+                : anomalies.map(a =>
+                    `⚠️ Anomaly: ${a.value}°C (z=${a.zScore.toFixed(2)})`
+                ).join("<br>");
+    } // Closes whatever block wrapped the anomaly logic
+
+    // Scroll to Top Button
+    const scrollTopBtn = document.getElementById("scrollTopBtn");
+
+    if (scrollTopBtn) {
+        window.addEventListener("scroll", () => {
+            if (window.scrollY > 300) {
+                scrollTopBtn.classList.add("show");
+            } else {
+                scrollTopBtn.classList.remove("show");
+            }
+        });
 
-  scrollTopBtn.addEventListener("click", () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    });
-  });
-}
+        scrollTopBtn.addEventListener("click", () => {
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth"
+            });
+        });
+    }
+}; 
diff --git a/Frontend/style.css b/Frontend/style.css
@@ -5,58 +5,7 @@
   font-family: "Poppins", sans-serif;
 }
 
-:root {
-  --bg-primary:    #0f1117;
-  --bg-secondary:  #161b27;
-  --bg-card:       #1a1f2e;
-  --text-primary:  #ffffff;
-  --text-muted:    #8892a4;
-  --text-heading:  #e2e8f0;
-  --border-color:  rgba(255, 255, 255, 0.1);
-  --border-strong: rgba(255, 255, 255, 0.2);
-  --shadow-color:  rgba(0, 0, 0, 0.4);
-  --input-bg:      #1a1f2e;
-  --btn-bg:        rgba(255, 255, 255, 0.07);
-  --btn-hover:     rgba(255, 255, 255, 0.12);
-  --bg-0: #020617;
-  --bg-1: #0f172a;
-  --bg-2: #1e293b;
-  --panel: rgba(255, 255, 255, 0.08);
-  --panel-strong: rgba(255, 255, 255, 0.12);
-  --text: #f8fafc;
-  --muted: #cbd5e1;
-  --muted-2: #94a3b8;
-  --accent: #38bdf8;
-  --accent-2: #0ea5e9;
-  --success: #22c55e;
-  --danger: #ef4444;
-  --warning: #f59e0b;
-  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
-}
-
-[data-theme="light"] {
-  --bg-primary:    #f4f6fa;
-  --bg-secondary:  #eaecf2;
-  --bg-card:       #ffffff;
-  --text-primary:  #0f1117;
-  --text-muted:    #5a6475;
-  --text-heading:  #1a202c;
-  --border-color:  rgba(0, 0, 0, 0.1);
-  --border-strong: rgba(0, 0, 0, 0.2);
-  --shadow-color:  rgba(0, 0, 0, 0.1);
-  --input-bg:      #ffffff;
-  --btn-bg:        rgba(0, 0, 0, 0.04);
-  --btn-hover:     rgba(0, 0, 0, 0.08);
-  --bg-0:          #f8fafc;
-  --bg-1:          #edf2f7;
-  --bg-2:          #dbeafe;
-  --panel:         rgba(255, 255, 255, 0.85);
-  --panel-strong:  rgba(255, 255, 255, 0.95);
-  --text:          #0f172a;
-  --muted:         #334155;
-  --muted-2:       #64748b;
-  --shadow:        0 10px 30px rgba(0, 0, 0, 0.08);
-}
+
 
 .theme-toggle {
   width: 42px;

diff --git a/Frontend/theme.css b/Frontend/theme.css
@@ -0,0 +1,52 @@
+:root {
+  --bg-primary:    #0f1117;
+  --bg-secondary:  #161b27;
+  --bg-card:       #1a1f2e;
+  --text-primary:  #ffffff;
+  --text-muted:    #8892a4;
+  --text-heading:  #e2e8f0;
+  --border-color:  rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(255, 255, 255, 0.2);
+  --shadow-color:  rgba(0, 0, 0, 0.4);
+  --input-bg:      #1a1f2e;
+  --btn-bg:        rgba(255, 255, 255, 0.07);
+  --btn-hover:     rgba(255, 255, 255, 0.12);
+  --bg-0: #020617;
+  --bg-1: #0f172a;
+  --bg-2: #1e293b;
+  --panel: rgba(255, 255, 255, 0.08);
+  --panel-strong: rgba(255, 255, 255, 0.12);
+  --text: #f8fafc;
+  --muted: #cbd5e1;
+  --muted-2: #94a3b8;
+  --accent: #38bdf8;
+  --accent-2: #0ea5e9;
+  --success: #22c55e;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
+}
+
+[data-theme="light"] {
+  --bg-primary:    #f4f6fa;
+  --bg-secondary:  #eaecf2;
+  --bg-card:       #ffffff;
+  --text-primary:  #0f1117;
+  --text-muted:    #5a6475;
+  --text-heading:  #1a202c;
+  --border-color:  rgba(0, 0, 0, 0.1);
+  --border-strong: rgba(0, 0, 0, 0.2);
+  --shadow-color:  rgba(0, 0, 0, 0.1);
+  --input-bg:      #ffffff;
+  --btn-bg:        rgba(0, 0, 0, 0.04);
+  --btn-hover:     rgba(0, 0, 0, 0.08);
+  --bg-0:          #f8fafc;
+  --bg-1:          #eef6ff;
+  --bg-2:          #e2e8f0;
+  --panel:         rgba(255, 255, 255, 0.85);
+  --panel-strong:  rgba(255, 255, 255, 0.95);
+  --text:          #1e293b;
+  --muted:         #475569;
+  --muted-2:       #64748b;
+  --shadow:        0 10px 30px rgba(0, 0, 0, 0.08);
+}
diff --git a/Frontend/theme.js b/Frontend/theme.js
@@ -1,25 +1,44 @@
 (function () {
+  function getSystemPreference() {
+    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  }
+
   const saved = localStorage.getItem('theme');
-  const preferred = window.matchMedia('(prefers-color-scheme: light)').matches
-    ? 'light' : 'dark';
-  const initial = saved || preferred;
+  let initial = saved || getSystemPreference();
 
   document.documentElement.setAttribute('data-theme', initial);
 
+  // Listen for system theme changes dynamically
+  window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', function(e) {
+    // Only apply system theme if the user hasn't set a manual override
+    if (!localStorage.getItem('theme')) {
+      const newTheme = e.matches ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', newTheme);
+
+      const icon = document.getElementById('theme-icon');
+      if (icon) {
+        icon.textContent = newTheme === 'light' ? '🌙' : '☀️';
+      }
+
+      window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: newTheme } }));
+    }
+  });
+
   document.addEventListener('DOMContentLoaded', function () {
     const btn  = document.getElementById('theme-toggle');
     const icon = document.getElementById('theme-icon');
 
     if (!btn || !icon) return;
 
-    icon.textContent = initial === 'light' ? '🌙' : '☀️';
+    // Set initial icon state based on the calculated initial theme
+    icon.textContent = document.documentElement.getAttribute('data-theme') === 'light' ? '🌙' : '☀️';
 
     btn.addEventListener('click', function () {
       const current = document.documentElement.getAttribute('data-theme');
       const next    = current === 'dark' ? 'light' : 'dark';
 
       document.documentElement.setAttribute('data-theme', next);
-      localStorage.setItem('theme', next);
+      localStorage.setItem('theme', next); // User manually set a theme
       icon.textContent = next === 'light' ? '🌙' : '☀️';
 
       // Notify analysis.js to swap the map tile layer if it's listening