added dark mode

synculous-client/src/components/notifications/PushNotificationToggle.tsx

@@ -83,14 +83,14 @@ export default function PushNotificationToggle() {
   return (
     <div className="flex items-center justify-between p-4">
       <div>
-        <p className="font-medium text-gray-900">Push notifications</p>
-        <p className="text-sm text-gray-500">Get reminders on this device</p>
+        <p className="font-medium text-gray-900 dark:text-gray-100">Push notifications</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Get reminders on this device</p>
       </div>
       <button
         onClick={toggle}
         disabled={loading}
         className={`w-12 h-7 rounded-full transition-colors ${
-          enabled ? 'bg-indigo-500' : 'bg-gray-300'
+          enabled ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
         } ${loading ? 'opacity-50' : ''}`}
       >
         <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${

synculous-client/src/components/theme/ThemeProvider.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface ThemeContextType {
+  isDark: boolean;
+  toggleDark: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const dark = stored === 'dark' || (!stored && prefersDark);
+    setIsDark(dark);
+    if (dark) {
+      document.documentElement.classList.add('dark');
+    }
+  }, []);
+
+  const toggleDark = () => {
+    setIsDark((prev) => {
+      const next = !prev;
+      if (next) {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
+      }
+      return next;
+    });
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDark, toggleDark }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}