diff --git a/src/app/globals.css b/src/app/globals.css
index fb4bd21..065152f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,14 +7,14 @@
--background: #ffffff;
}
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground: #ededed;
- --background: #0a0a0a;
- }
+/* Dark mode via class (controlled by ThemeToggle) */
+.dark {
+ --foreground: #ededed;
+ --background: #0a0a0a;
}
body {
color: var(--foreground);
background: var(--background);
+ transition: background-color 0.2s ease, color 0.2s ease;
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 17200f3..cd77f19 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -14,8 +14,8 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
-
+
+
{children}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2d673aa..b7d117c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,6 +2,7 @@
import Link from "next/link";
import { ConnectWallet } from "./ConnectWallet";
+import { ThemeToggle } from "./ThemeToggle";
export function Navbar() {
return (
@@ -27,7 +28,10 @@ export function Navbar() {
-
+
+
+
+
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..80b680d
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+ const [dark, setDark] = useState(false);
+
+ // On mount, read saved preference or system preference
+ useEffect(() => {
+ const saved = localStorage.getItem("sorosave-theme");
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ const isDark = saved ? saved === "dark" : prefersDark;
+ setDark(isDark);
+ document.documentElement.classList.toggle("dark", isDark);
+ }, []);
+
+ const toggle = () => {
+ const next = !dark;
+ setDark(next);
+ document.documentElement.classList.toggle("dark", next);
+ localStorage.setItem("sorosave-theme", next ? "dark" : "light");
+ };
+
+ return (
+
+ );
+}