diff --git a/static/script.js b/static/script.js
index 577a5c2..023635b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -12,6 +12,33 @@
       // Storage can be unavailable in private browsing.
     }
 
+    import { ThemeProvider } from "./context/ThemeContext";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+);
+
+<button onClick={toggleTheme}>
+    🌙
+</button>
+
+useEffect(() => {
+    document.documentElement.setAttribute(
+        "data-theme",
+        theme
+    );
+}, [theme]);
+
+const [theme, setTheme] = useState(
+    localStorage.getItem("theme") || "light"
+);
+
+useEffect(() => {
+    localStorage.setItem("theme", theme);
+}, [theme]);
+
     document.querySelectorAll(".theme-toggle").forEach(function (button) {
       button.setAttribute("aria-pressed", isDark ? "true" : "false");
       button.setAttribute("aria-label", isDark ? "Switch to light mode" : "Switch to dark mode");
diff --git a/static/style.css b/static/style.css
index a4ababd..64bc8ef 100644
--- a/static/style.css
+++ b/static/style.css
@@ -125,6 +125,14 @@ html[data-theme="dark"] {
   --text-body:    #94a3b8;
   --text-light:   #64748b;
 
+  .dark {
+    background: #111;
+    color: white;
+}
+
+background: var(--bg);
+color: var(--text);
+
   /* ---- Border ---- */
   --border: #1e293b;