Implement persisted dark mode toggle with class-based Tailwind theme

src/app/globals.css

@@ -7,11 +7,9 @@
   --background: #ffffff;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground: #ededed;
-    --background: #0a0a0a;
-  }
+.dark {
+  --foreground: #ededed;
+  --background: #0a0a0a;
 }
 
 body {

src/app/groups/[id]/page.tsx

@@ -41,8 +41,8 @@ export default function GroupDetailPage() {
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">{group.name}</h1>
-          <p className="text-gray-600 mt-1">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{group.name}</h1>
+          <p className="mt-1 text-gray-600 dark:text-gray-300">
             {formatAmount(group.contributionAmount)} tokens per cycle
           </p>
         </div>
@@ -65,8 +65,8 @@ export default function GroupDetailPage() {
           </div>
 
           <div className="space-y-4">
-            <div className="bg-white rounded-xl shadow-sm border p-6">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            <div className="rounded-xl border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+              <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
                 Actions
               </h3>
               <div className="space-y-3">
@@ -86,30 +86,30 @@ export default function GroupDetailPage() {
               </div>
             </div>
 
-            <div className="bg-white rounded-xl shadow-sm border p-6">
-              <h3 className="text-sm font-semibold text-gray-900 mb-3">
+            <div className="rounded-xl border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
                 Group Info
               </h3>
               <dl className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Status</dt>
-                  <dd className="font-medium text-gray-900">{group.status}</dd>
+                  <dt className="text-gray-500 dark:text-gray-400">Status</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">{group.status}</dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Members</dt>
-                  <dd className="font-medium text-gray-900">
+                  <dt className="text-gray-500 dark:text-gray-400">Members</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">
                     {group.members.length}/{group.maxMembers}
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Cycle</dt>
-                  <dd className="font-medium text-gray-900">
+                  <dt className="text-gray-500 dark:text-gray-400">Cycle</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">
                     {group.cycleLength / 86400} days
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-500">Pot Size</dt>
-                  <dd className="font-medium text-gray-900">
+                  <dt className="text-gray-500 dark:text-gray-400">Pot Size</dt>
+                  <dd className="font-medium text-gray-900 dark:text-gray-100">
                     {formatAmount(
                       group.contributionAmount * BigInt(group.members.length)
                     )}{" "}

src/app/groups/new/page.tsx

@@ -6,7 +6,7 @@ export default function NewGroupPage() {
     <>
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <h1 className="text-2xl font-bold text-gray-900 mb-8">
+        <h1 className="mb-8 text-2xl font-bold text-gray-900 dark:text-gray-100">
           Create a Savings Group
         </h1>
         <CreateGroupForm />

src/app/groups/page.tsx

@@ -47,11 +47,11 @@ export default function GroupsPage() {
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="flex justify-between items-center mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">Savings Groups</h1>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Savings Groups</h1>
         </div>
 
         {groups.length === 0 ? (
-          <div className="text-center py-12 text-gray-500">
+          <div className="py-12 text-center text-gray-500 dark:text-gray-400">
             No groups found. Create the first one!
           </div>
         ) : (

src/app/layout.tsx

@@ -14,8 +14,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className="min-h-screen bg-gray-50">
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen bg-gray-50 text-gray-900 transition-colors dark:bg-gray-950 dark:text-gray-100">
         <Providers>{children}</Providers>
       </body>
     </html>

src/app/page.tsx

@@ -39,7 +39,7 @@ export default function Home() {
         {/* How it works */}
         <section className="py-20">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <h2 className="mb-12 text-center text-3xl font-bold text-gray-900 dark:text-gray-100">
               How It Works
             </h2>
             <div className="grid md:grid-cols-4 gap-8">
@@ -73,20 +73,20 @@ export default function Home() {
                   <div className="w-12 h-12 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                     {item.step}
                   </div>
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {item.title}
                   </h3>
-                  <p className="text-gray-600 text-sm">{item.description}</p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
                 </div>
               ))}
             </div>
           </div>
         </section>
 
         {/* Features */}
-        <section className="bg-gray-100 py-20">
+        <section className="bg-gray-100 py-20 dark:bg-gray-900/40">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <h2 className="mb-12 text-center text-3xl font-bold text-gray-900 dark:text-gray-100">
               Why SoroSave?
             </h2>
             <div className="grid md:grid-cols-3 gap-8">
@@ -109,12 +109,12 @@ export default function Home() {
               ].map((feature) => (
                 <div
                   key={feature.title}
-                  className="bg-white p-6 rounded-xl shadow-sm"
+                  className="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-900 dark:ring-1 dark:ring-gray-800"
                 >
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">
                     {feature.title}
                   </h3>
-                  <p className="text-gray-600">{feature.description}</p>
+                  <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
                 </div>
               ))}
             </div>

src/app/providers.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
 import { connectWallet, getPublicKey, isFreighterInstalled } from "@/lib/wallet";
 
 interface WalletContextType {
@@ -11,6 +17,14 @@ interface WalletContextType {
   disconnect: () => void;
 }
 
+type Theme = "light" | "dark";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
 const WalletContext = createContext<WalletContextType>({
   address: null,
   isConnected: false,
@@ -19,13 +33,43 @@ const WalletContext = createContext<WalletContextType>({
   disconnect: () => {},
 });
 
+const ThemeContext = createContext<ThemeContextType>({
+  theme: "light",
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
 export function useWallet() {
   return useContext(WalletContext);
 }
 
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
 export function Providers({ children }: { children: React.ReactNode }) {
   const [address, setAddress] = useState<string | null>(null);
   const [isFreighterAvailable, setIsFreighterAvailable] = useState(false);
+  const [theme, setTheme] = useState<Theme>("light");
+
+  useEffect(() => {
+    const storedTheme = window.localStorage.getItem("sorosave-theme");
+    if (storedTheme === "light" || storedTheme === "dark") {
+      setTheme(storedTheme);
+      return;
+    }
+
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    setTheme(prefersDark ? "dark" : "light");
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.style.colorScheme = theme;
+    window.localStorage.setItem("sorosave-theme", theme);
+  }, [theme]);
 
   useEffect(() => {
     isFreighterInstalled().then(setIsFreighterAvailable);
@@ -44,17 +88,23 @@ export function Providers({ children }: { children: React.ReactNode }) {
     setAddress(null);
   }, []);
 
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+  }, []);
+
   return (
-    <WalletContext.Provider
-      value={{
-        address,
-        isConnected: !!address,
-        isFreighterAvailable,
-        connect,
-        disconnect,
-      }}
-    >
-      {children}
-    </WalletContext.Provider>
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      <WalletContext.Provider
+        value={{
+          address,
+          isConnected: !!address,
+          isFreighterAvailable,
+          connect,
+          disconnect,
+        }}
+      >
+        {children}
+      </WalletContext.Provider>
+    </ThemeContext.Provider>
   );
 }

src/components/ConnectWallet.tsx

@@ -13,7 +13,7 @@ export function ConnectWallet() {
         href="https://www.freighter.app/"
         target="_blank"
         rel="noopener noreferrer"
-        className="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-300"
+        className="rounded-lg bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
       >
         Install Freighter
       </a>
@@ -23,12 +23,12 @@ export function ConnectWallet() {
   if (isConnected && address) {
     return (
       <div className="flex items-center space-x-3">
-        <span className="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
+        <span className="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-200">
           {shortenAddress(address)}
         </span>
         <button
           onClick={disconnect}
-          className="text-sm text-red-600 hover:text-red-800"
+          className="text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
         >
           Disconnect
         </button>

src/components/ContributeModal.tsx

@@ -50,15 +50,17 @@ export function ContributeModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 max-w-md w-full mx-4">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">
+      <div className="mx-4 w-full max-w-md rounded-xl bg-white p-6 dark:bg-gray-900">
+        <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
           Confirm Contribution
         </h3>
 
-        <div className="bg-gray-50 rounded-lg p-4 mb-6">
+        <div className="mb-6 rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
           <div className="text-center">
-            <p className="text-sm text-gray-600 mb-1">Amount to contribute</p>
-            <p className="text-2xl font-bold text-gray-900">
+            <p className="mb-1 text-sm text-gray-600 dark:text-gray-300">
+              Amount to contribute
+            </p>
+            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
               {formatAmount(contributionAmount)} tokens
             </p>
           </div>
@@ -73,7 +75,7 @@ export function ContributeModal({
         <div className="flex space-x-3">
           <button
             onClick={onClose}
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
+            className="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
           >
             Cancel
           </button>