From d8fde5b516d0a61e6f9ec1d83246f80c19474313 Mon Sep 17 00:00:00 2001
From: chelsea <chelsea@chelseawoodruff.net>
Date: Sun, 15 Feb 2026 23:11:33 -0600
Subject: [PATCH] added dark mode

---
 synculous-client/darkmode.md                  | 106 +++++++++++++++
 .../src/app/dashboard/history/page.tsx        |  26 ++--
 synculous-client/src/app/dashboard/layout.tsx |  41 ++++--
 .../app/dashboard/medications/new/page.tsx    |  50 +++----
 .../src/app/dashboard/medications/page.tsx    |  86 ++++++------
 synculous-client/src/app/dashboard/page.tsx   |  52 +++----
 .../dashboard/routines/[id]/launch/page.tsx   |  44 +++---
 .../src/app/dashboard/routines/[id]/page.tsx  | 128 +++++++++---------
 .../src/app/dashboard/routines/new/page.tsx   |  82 +++++------
 .../src/app/dashboard/routines/page.tsx       |  54 ++++----
 .../src/app/dashboard/settings/page.tsx       |  60 ++++----
 .../src/app/dashboard/stats/page.tsx          |  54 ++++----
 .../src/app/dashboard/templates/page.tsx      |  24 ++--
 synculous-client/src/app/globals.css          |  14 +-
 synculous-client/src/app/layout.tsx           |  14 +-
 synculous-client/src/app/login/page.tsx       |  16 +--
 .../notifications/PushNotificationToggle.tsx  |   6 +-
 .../src/components/theme/ThemeProvider.tsx    |  52 +++++++
 18 files changed, 543 insertions(+), 366 deletions(-)
 create mode 100644 synculous-client/darkmode.md
 create mode 100644 synculous-client/src/components/theme/ThemeProvider.tsx
diff --git a/synculous-client/darkmode.md b/synculous-client/darkmode.md
new file mode 100644
index 0000000..467e509
--- /dev/null
+++ b/synculous-client/darkmode.md
@@ -0,0 +1,106 @@
+# Dark Mode Implementation Plan
+
+## Context
+The Synculous client already has a bare `@media (prefers-color-scheme: dark)` in `globals.css` that only flips `body` background/foreground. Every component uses hardcoded Tailwind classes (`bg-white`, `bg-gray-50`, `text-gray-900`, etc.) with no `dark:` variants, so manually switching modes via a button has no effect. The goal is a user-controlled toggle that persists preference, respects the OS default, and applies comprehensive dark styles across all pages.
+
+---
+
+## Steps
+
+### 1. Configure Tailwind v4 for class-based dark mode
+**File:** `src/app/globals.css`
+
+Add the Tailwind v4 CSS directive that maps `dark:` utilities to an ancestor `.dark` class:
+```css
+@variant dark (&:where(.dark, .dark *));
+```
+Replace the `@media (prefers-color-scheme: dark)` block with a `.dark` selector:
+```css
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+}
+```
+
+### 2. Create ThemeProvider
+**New file:** `src/components/theme/ThemeProvider.tsx`
+
+A minimal React context provider:
+- State: `isDark: boolean`
+- On mount: reads `localStorage.getItem('theme')`, falls back to `window.matchMedia('(prefers-color-scheme: dark)').matches`
+- Applies/removes `dark` class on `document.documentElement`
+- `toggleDark()` function that flips state and saves to `localStorage`
+- Exports `useTheme()` hook
+
+### 3. Anti-flash script + wrap in layout
+**File:** `src/app/layout.tsx`
+
+- Add ThemeProvider wrapping `AuthProvider`
+- Add inline `<script>` before `<body>` content to set `.dark` class before hydration (prevents white flash)
+
+### 4. Dark mode toggle button in dashboard header
+**File:** `src/app/dashboard/layout.tsx`
+
+- Import `useTheme` from the ThemeProvider
+- Add a sun/moon icon button in the existing right-side icon row (between Settings and Logout)
+- `SunIcon` and `MoonIcon` already exist in `src/components/ui/Icons.tsx` — no new icons needed
+
+### 5. Add `dark:` variants to all components
+
+Color mapping:
+
+| Light class | Dark variant |
+|---|---|
+| `bg-white` | `dark:bg-gray-800` |
+| `bg-gray-50` | `dark:bg-gray-900` |
+| `bg-gray-100` | `dark:bg-gray-700` |
+| `bg-gray-200` | `dark:bg-gray-600` |
+| `text-gray-900` | `dark:text-gray-100` |
+| `text-gray-700` | `dark:text-gray-300` |
+| `text-gray-600` | `dark:text-gray-400` |
+| `text-gray-500` | `dark:text-gray-400` |
+| `border-gray-200` | `dark:border-gray-700` |
+| `border-gray-100` | `dark:border-gray-800` |
+| `border-gray-300` | `dark:border-gray-600` |
+| `bg-indigo-50` | `dark:bg-indigo-900/30` |
+| `bg-green-50` | `dark:bg-green-900/30` |
+| `bg-amber-50` | `dark:bg-amber-900/30` |
+| `bg-blue-50` | `dark:bg-blue-900/30` |
+| `bg-red-50` | `dark:bg-red-900/30` |
+
+**Files to update (in order):**
+1. `src/app/dashboard/layout.tsx` — shell, header, nav
+2. `src/app/dashboard/page.tsx` — Today view
+3. `src/app/dashboard/routines/page.tsx`
+4. `src/app/dashboard/routines/new/page.tsx`
+5. `src/app/dashboard/routines/[id]/page.tsx`
+6. `src/app/dashboard/routines/[id]/launch/page.tsx`
+7. `src/app/dashboard/routines/[id]/run/page.tsx`
+8. `src/app/dashboard/templates/page.tsx`
+9. `src/app/dashboard/history/page.tsx`
+10. `src/app/dashboard/stats/page.tsx`
+11. `src/app/dashboard/medications/page.tsx`
+12. `src/app/dashboard/medications/new/page.tsx`
+13. `src/app/dashboard/settings/page.tsx`
+14. `src/app/login/page.tsx`
+15. `src/components/session/VisualTimeline.tsx`
+16. `src/components/notifications/PushNotificationToggle.tsx`
+
+---
+
+## Files to create
+- `src/components/theme/ThemeProvider.tsx` (new)
+
+## Files to modify
+- `src/app/globals.css`
+- `src/app/layout.tsx`
+- All pages listed in step 5
+
+---
+
+## Verification
+1. Run `npm run dev` in `synculous-client/`
+2. Navigate to `/dashboard` — should default to OS preference
+3. Click the sun/moon toggle in the header — UI should switch immediately
+4. Refresh the page — theme should persist (no flash)
+5. Switch OS theme — manual override takes priority; no override follows OS
diff --git a/synculous-client/src/app/dashboard/history/page.tsx b/synculous-client/src/app/dashboard/history/page.tsx
index a1b207d..60ab092 100644
--- a/synculous-client/src/app/dashboard/history/page.tsx
+++ b/synculous-client/src/app/dashboard/history/page.tsx
@@ -95,13 +95,13 @@ export default function HistoryPage() {
 
   return (
     <div className="p-4 space-y-4">
-      <h1 className="text-2xl font-bold text-gray-900">History</h1>
+      <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">History</h1>
 
       {/* Filter */}
       <select
         value={selectedRoutine}
         onChange={(e) => setSelectedRoutine(e.target.value)}
-        className="w-full px-4 py-3 border border-gray-300 rounded-xl bg-white"
+        className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
       >
         <option value="all">All Routines</option>
         {routines.map((routine) => (
@@ -112,39 +112,39 @@ export default function HistoryPage() {
       </select>
 
       {history.length === 0 ? (
-        <div className="bg-white rounded-xl p-8 shadow-sm text-center">
-          <CalendarIcon className="text-gray-400 mx-auto mb-4" size={40} />
-          <h3 className="font-semibold text-gray-900 mb-1">No history yet</h3>
-          <p className="text-gray-500 text-sm">Complete a routine to see it here</p>
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
+          <CalendarIcon className="text-gray-400 dark:text-gray-500 mx-auto mb-4" size={40} />
+          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No history yet</h3>
+          <p className="text-gray-500 dark:text-gray-400 text-sm">Complete a routine to see it here</p>
         </div>
       ) : (
         <div className="space-y-3">
           {history.map((session) => (
             <div
               key={session.id}
-              className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-4"
+              className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-4"
             >
               <div className={`
                 w-10 h-10 rounded-full flex items-center justify-center
-                ${session.status === 'completed' ? 'bg-green-100' : 'bg-red-100'}
+                ${session.status === 'completed' ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'}
               `}>
                 {session.status === 'completed' ? (
-                  <CheckIcon className="text-green-600" size={20} />
+                  <CheckIcon className="text-green-600 dark:text-green-400" size={20} />
                 ) : (
-                  <XIcon className="text-red-600" size={20} />
+                  <XIcon className="text-red-600 dark:text-red-400" size={20} />
                 )}
               </div>
               <div className="flex-1">
-                <p className="font-medium text-gray-900">
+                <p className="font-medium text-gray-900 dark:text-gray-100">
                   {(session as any).routine_name || 'Routine'}
                 </p>
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-gray-500 dark:text-gray-400">
                   {formatDate(session.created_at)}
                 </p>
               </div>
               <span className={`
                 text-xs font-medium px-2 py-1 rounded-full
-                ${session.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}
+                ${session.status === 'completed' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'}
               `}>
                 {session.status}
               </span>
diff --git a/synculous-client/src/app/dashboard/layout.tsx b/synculous-client/src/app/dashboard/layout.tsx
index 4cbfe65..fddd0de 100644
--- a/synculous-client/src/app/dashboard/layout.tsx
+++ b/synculous-client/src/app/dashboard/layout.tsx
@@ -3,17 +3,20 @@
 import { useEffect, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { useAuth } from '@/components/auth/AuthProvider';
+import { useTheme } from '@/components/theme/ThemeProvider';
 import api from '@/lib/api';
-import { 
-  HomeIcon, 
-  ListIcon, 
-  CalendarIcon, 
-  BarChartIcon, 
+import {
+  HomeIcon,
+  ListIcon,
+  CalendarIcon,
+  BarChartIcon,
   PillIcon,
   SettingsIcon,
   LogOutIcon,
   CopyIcon,
-  HeartIcon
+  HeartIcon,
+  SunIcon,
+  MoonIcon,
 } from '@/components/ui/Icons';
 import Link from 'next/link';
 
@@ -32,6 +35,7 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }) {
   const { isAuthenticated, isLoading, logout } = useAuth();
+  const { isDark, toggleDark } = useTheme();
   const router = useRouter();
   const pathname = usePathname();
 
@@ -57,7 +61,7 @@ export default function DashboardLayout({
       <div className="min-h-screen flex items-center justify-center">
         <div className="animate-pulse flex flex-col items-center">
           <div className="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
-          <p className="mt-4 text-gray-600">Loading...</p>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
         </div>
       </div>
     );
@@ -75,22 +79,29 @@ export default function DashboardLayout({
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
         <div className="flex items-center justify-between px-4 py-3">
           <div className="flex items-center gap-2">
             <div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-pink-500 rounded-lg flex items-center justify-center">
               <HeartIcon className="text-white" size={16} />
             </div>
-            <span className="font-bold text-gray-900">Synculous</span>
+            <span className="font-bold text-gray-900 dark:text-gray-100">Synculous</span>
           </div>
           <div className="flex items-center gap-2">
-            <Link href="/dashboard/settings" className="p-2 text-gray-500 hover:text-gray-700">
+            <button
+              onClick={toggleDark}
+              className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              aria-label="Toggle dark mode"
+            >
+              {isDark ? <SunIcon size={20} /> : <MoonIcon size={20} />}
+            </button>
+            <Link href="/dashboard/settings" className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
               <SettingsIcon size={20} />
             </Link>
             <button
               onClick={logout}
-              className="p-2 text-gray-500 hover:text-gray-700"
+              className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
             >
               <LogOutIcon size={20} />
             </button>
@@ -102,7 +113,7 @@ export default function DashboardLayout({
         {children}
       </main>
 
-      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 safe-area-bottom">
+      <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 safe-area-bottom">
         <div className="flex justify-around py-2">
           {navItems.map((item) => {
             const isActive = pathname === item.href ||
@@ -113,8 +124,8 @@ export default function DashboardLayout({
                 href={item.href}
                 className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-colors ${
                   isActive
-                    ? 'text-indigo-600'
-                    : 'text-gray-500 hover:text-gray-700'
+                    ? 'text-indigo-600 dark:text-indigo-400'
+                    : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
                 }`}
               >
                 <item.icon size={20} />
diff --git a/synculous-client/src/app/dashboard/medications/new/page.tsx b/synculous-client/src/app/dashboard/medications/new/page.tsx
index b1c81f0..31cacfd 100644
--- a/synculous-client/src/app/dashboard/medications/new/page.tsx
+++ b/synculous-client/src/app/dashboard/medications/new/page.tsx
@@ -81,52 +81,52 @@ export default function NewMedicationPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
         <div className="flex items-center gap-3 px-4 py-3">
-          <button onClick={() => router.back()} className="p-1">
+          <button onClick={() => router.back()} className="p-1 text-gray-600 dark:text-gray-400">
             <ArrowLeftIcon size={24} />
           </button>
-          <h1 className="text-xl font-bold text-gray-900">Add Medication</h1>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Add Medication</h1>
         </div>
       </header>
 
       <form onSubmit={handleSubmit} className="p-4 space-y-6">
         {error && (
-          <div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
+          <div className="bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
             {error}
           </div>
         )}
 
-        <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Medication Name</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Medication Name</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g., Vitamin D"
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
             />
           </div>
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Dosage</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Dosage</label>
               <input
                 type="text"
                 value={dosage}
                 onChange={(e) => setDosage(e.target.value)}
                 placeholder="e.g., 1000"
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Unit</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Unit</label>
               <select
                 value={unit}
                 onChange={(e) => setUnit(e.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 outline-none"
               >
                 <option value="mg">mg</option>
                 <option value="mcg">mcg</option>
@@ -140,11 +140,11 @@ export default function NewMedicationPage() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Frequency</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Frequency</label>
             <select
               value={frequency}
               onChange={(e) => setFrequency(e.target.value)}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 outline-none"
             >
               <option value="daily">Daily</option>
               <option value="specific_days">Specific Days of Week</option>
@@ -156,7 +156,7 @@ export default function NewMedicationPage() {
           {/* Day-of-week picker for specific_days */}
           {frequency === 'specific_days' && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Days</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Days</label>
               <div className="flex gap-2 flex-wrap">
                 {DAY_OPTIONS.map(({ value, label }) => (
                   <button
@@ -166,7 +166,7 @@ export default function NewMedicationPage() {
                     className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
                       daysOfWeek.includes(value)
                         ? 'bg-indigo-600 text-white border-indigo-600'
-                        : 'bg-white text-gray-700 border-gray-300'
+                        : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
                     }`}
                   >
                     {label}
@@ -180,22 +180,22 @@ export default function NewMedicationPage() {
           {frequency === 'every_n_days' && (
             <div className="space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Every N Days</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Every N Days</label>
                 <input
                   type="number"
                   min={1}
                   value={intervalDays}
                   onChange={(e) => setIntervalDays(parseInt(e.target.value) || 1)}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Starting From</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Starting From</label>
                 <input
                   type="date"
                   value={startDate}
                   onChange={(e) => setStartDate(e.target.value)}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 outline-none"
                 />
               </div>
             </div>
@@ -205,17 +205,17 @@ export default function NewMedicationPage() {
           {frequency !== 'as_needed' && (
             <div>
               <div className="flex items-center justify-between mb-1">
-                <label className="block text-sm font-medium text-gray-700">Times</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Times</label>
                 <button
                   type="button"
                   onClick={handleAddTime}
-                  className="text-indigo-600 text-sm font-medium"
+                  className="text-indigo-600 dark:text-indigo-400 text-sm font-medium"
                 >
                   + Add Time
                 </button>
               </div>
               {frequency === 'daily' && (
-                <p className="text-xs text-gray-400 mb-2">Add multiple times for 2x, 3x, or more doses per day</p>
+                <p className="text-xs text-gray-400 dark:text-gray-500 mb-2">Add multiple times for 2x, 3x, or more doses per day</p>
               )}
               <div className="space-y-2">
                 {times.map((time, index) => (
@@ -224,13 +224,13 @@ export default function NewMedicationPage() {
                       type="time"
                       value={time}
                       onChange={(e) => handleTimeChange(index, e.target.value)}
-                      className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                      className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 outline-none"
                     />
                     {times.length > 1 && (
                       <button
                         type="button"
                         onClick={() => handleRemoveTime(index)}
-                        className="text-red-500 px-3"
+                        className="text-red-500 dark:text-red-400 px-3"
                       >
                         Remove
                       </button>
diff --git a/synculous-client/src/app/dashboard/medications/page.tsx b/synculous-client/src/app/dashboard/medications/page.tsx
index 986b32c..1a12099 100644
--- a/synculous-client/src/app/dashboard/medications/page.tsx
+++ b/synculous-client/src/app/dashboard/medications/page.tsx
@@ -214,7 +214,7 @@ export default function MedicationsPage() {
   return (
     <div className="p-4 space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">Medications</h1>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Medications</h1>
         <Link href="/dashboard/medications/new" className="bg-indigo-600 text-white p-2 rounded-full">
           <PlusIcon size={24} />
         </Link>
@@ -224,7 +224,7 @@ export default function MedicationsPage() {
       <PushNotificationToggle />
 
       {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg">
           {error}
         </div>
       )}
@@ -232,38 +232,38 @@ export default function MedicationsPage() {
       {/* Due Now Section */}
       {dueEntries.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Due</h2>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Due</h2>
           <div className="space-y-3">
             {dueEntries.map((entry) => (
               <div
                 key={`${entry.item.medication.id}-${entry.time}`}
-                className={`bg-white rounded-xl p-4 shadow-sm ${borderColor(entry.status)}`}
+                className={`bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm ${borderColor(entry.status)}`}
               >
                 <div className="flex items-center justify-between mb-2">
                   <div>
                     <div className="flex items-center gap-2">
-                      <h3 className="font-semibold text-gray-900">{entry.item.medication.name}</h3>
+                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">{entry.item.medication.name}</h3>
                       {entry.item.is_previous_day && (
-                        <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded">Yesterday</span>
+                        <span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 px-2 py-0.5 rounded">Yesterday</span>
                       )}
                     </div>
-                    <p className="text-sm text-gray-500">{entry.item.medication.dosage} {entry.item.medication.unit}</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{entry.item.medication.dosage} {entry.item.medication.unit}</p>
                   </div>
                 </div>
-                <div className="flex items-center justify-between bg-gray-50 rounded-lg p-3">
+                <div className="flex items-center justify-between bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
                   <div className="flex items-center gap-2">
-                    <ClockIcon size={16} className="text-gray-500" />
-                    <span className="font-medium">{entry.time}</span>
+                    <ClockIcon size={16} className="text-gray-500 dark:text-gray-400" />
+                    <span className="font-medium text-gray-900 dark:text-gray-100">{entry.time}</span>
                     {entry.status === 'overdue' && (
-                      <span className="text-xs text-red-600 font-medium">Overdue</span>
+                      <span className="text-xs text-red-600 dark:text-red-400 font-medium">Overdue</span>
                     )}
                   </div>
                   {entry.status === 'taken' ? (
-                    <span className="text-green-600 font-medium flex items-center gap-1">
+                    <span className="text-green-600 dark:text-green-400 font-medium flex items-center gap-1">
                       <CheckIcon size={16} /> Taken
                     </span>
                   ) : entry.status === 'skipped' ? (
-                    <span className="text-gray-400 font-medium">Skipped</span>
+                    <span className="text-gray-400 dark:text-gray-500 font-medium">Skipped</span>
                   ) : (
                     <div className="flex gap-2">
                       <button
@@ -274,7 +274,7 @@ export default function MedicationsPage() {
                       </button>
                       <button
                         onClick={() => handleSkip(entry.item.medication.id, entry.time)}
-                        className="text-gray-500 px-2 py-1"
+                        className="text-gray-500 dark:text-gray-400 px-2 py-1"
                       >
                         Skip
                       </button>
@@ -290,18 +290,18 @@ export default function MedicationsPage() {
       {/* PRN Section */}
       {prnEntries.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">As Needed</h2>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">As Needed</h2>
           <div className="space-y-3">
             {prnEntries.map((item) => (
-              <div key={item.medication.id} className="bg-white rounded-xl p-4 shadow-sm">
+              <div key={item.medication.id} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
                 <div className="flex items-center justify-between mb-2">
                   <div>
-                    <h3 className="font-semibold text-gray-900">{item.medication.name}</h3>
-                    <p className="text-sm text-gray-500">{item.medication.dosage} {item.medication.unit}</p>
+                    <h3 className="font-semibold text-gray-900 dark:text-gray-100">{item.medication.name}</h3>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{item.medication.dosage} {item.medication.unit}</p>
                   </div>
                 </div>
-                <div className="flex items-center justify-between bg-gray-50 rounded-lg p-3">
-                  <span className="text-gray-500 text-sm">As needed</span>
+                <div className="flex items-center justify-between bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
+                  <span className="text-gray-500 dark:text-gray-400 text-sm">As needed</span>
                   <button
                     onClick={() => handleTake(item.medication.id)}
                     className="bg-green-600 text-white px-3 py-1 rounded-lg text-sm font-medium"
@@ -318,24 +318,24 @@ export default function MedicationsPage() {
       {/* Upcoming Section */}
       {upcomingEntries.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-500 mb-3">Upcoming</h2>
+          <h2 className="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-3">Upcoming</h2>
           <div className="space-y-3">
             {upcomingEntries.map((entry) => (
               <div
                 key={`${entry.item.medication.id}-${entry.time}`}
-                className="bg-gray-50 rounded-xl p-4 shadow-sm opacity-75"
+                className="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 shadow-sm opacity-75"
               >
                 <div className="flex items-center justify-between">
                   <div>
                     <div className="flex items-center gap-2">
-                      <h3 className="font-medium text-gray-700">{entry.item.medication.name}</h3>
+                      <h3 className="font-medium text-gray-700 dark:text-gray-300">{entry.item.medication.name}</h3>
                       {entry.item.is_next_day && (
-                        <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">Tomorrow</span>
+                        <span className="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 px-2 py-0.5 rounded">Tomorrow</span>
                       )}
                     </div>
-                    <p className="text-sm text-gray-400">{entry.item.medication.dosage} {entry.item.medication.unit}</p>
+                    <p className="text-sm text-gray-400 dark:text-gray-500">{entry.item.medication.dosage} {entry.item.medication.unit}</p>
                   </div>
-                  <div className="flex items-center gap-2 text-gray-400">
+                  <div className="flex items-center gap-2 text-gray-400 dark:text-gray-500">
                     <ClockIcon size={16} />
                     <span className="font-medium">{entry.time}</span>
                   </div>
@@ -348,15 +348,15 @@ export default function MedicationsPage() {
 
       {/* All Medications */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 mb-3">All Medications</h2>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">All Medications</h2>
 
         {medications.length === 0 ? (
-          <div className="bg-white rounded-xl p-8 shadow-sm text-center">
-            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <PillIcon className="text-gray-400" size={32} />
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
+            <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
+              <PillIcon className="text-gray-400 dark:text-gray-500" size={32} />
             </div>
-            <h3 className="font-semibold text-gray-900 mb-1">No medications yet</h3>
-            <p className="text-gray-500 text-sm mb-4">Add your medications to track them</p>
+            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No medications yet</h3>
+            <p className="text-gray-500 dark:text-gray-400 text-sm mb-4">Add your medications to track them</p>
             <Link href="/dashboard/medications/new" className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium">
               Add Medication
             </Link>
@@ -366,41 +366,41 @@ export default function MedicationsPage() {
             {medications.map((med) => {
               const { percent: adherencePercent, isPrn } = getAdherenceForMed(med.id);
               return (
-                <div key={med.id} className="bg-white rounded-xl p-4 shadow-sm">
+                <div key={med.id} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
-                        <h3 className="font-semibold text-gray-900">{med.name}</h3>
+                        <h3 className="font-semibold text-gray-900 dark:text-gray-100">{med.name}</h3>
                         {!med.active && (
-                          <span className="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded">Inactive</span>
+                          <span className="text-xs bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 px-2 py-0.5 rounded">Inactive</span>
                         )}
                       </div>
-                      <p className="text-gray-500 text-sm">{med.dosage} {med.unit} &middot; {formatSchedule(med)}</p>
+                      <p className="text-gray-500 dark:text-gray-400 text-sm">{med.dosage} {med.unit} &middot; {formatSchedule(med)}</p>
                       {med.times.length > 0 && (
-                        <p className="text-gray-400 text-sm mt-1">Times: {med.times.join(', ')}</p>
+                        <p className="text-gray-400 dark:text-gray-500 text-sm mt-1">Times: {med.times.join(', ')}</p>
                       )}
                     </div>
                     <button
                       onClick={() => handleDelete(med.id)}
-                      className="text-red-500 p-2"
+                      className="text-red-500 dark:text-red-400 p-2"
                     >
                       <TrashIcon size={18} />
                     </button>
                   </div>
 
                   {/* Adherence */}
-                  <div className="mt-3 pt-3 border-t border-gray-100">
+                  <div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
                     {isPrn || adherencePercent === null ? (
-                      <span className="text-sm text-gray-400">PRN &mdash; no adherence tracking</span>
+                      <span className="text-sm text-gray-400 dark:text-gray-500">PRN &mdash; no adherence tracking</span>
                     ) : (
                       <>
                         <div className="flex items-center justify-between mb-1">
-                          <span className="text-sm text-gray-500">30-day adherence</span>
-                          <span className={`font-semibold ${adherencePercent >= 80 ? 'text-green-600' : adherencePercent >= 50 ? 'text-yellow-600' : 'text-red-600'}`}>
+                          <span className="text-sm text-gray-500 dark:text-gray-400">30-day adherence</span>
+                          <span className={`font-semibold ${adherencePercent >= 80 ? 'text-green-600 dark:text-green-400' : adherencePercent >= 50 ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'}`}>
                             {adherencePercent}%
                           </span>
                         </div>
-                        <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
+                        <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
                           <div
                             className={`h-full ${adherencePercent >= 80 ? 'bg-green-500' : adherencePercent >= 50 ? 'bg-yellow-500' : 'bg-red-500'}`}
                             style={{ width: `${adherencePercent}%` }}
diff --git a/synculous-client/src/app/dashboard/page.tsx b/synculous-client/src/app/dashboard/page.tsx
index 92c57a6..3a7ae62 100644
--- a/synculous-client/src/app/dashboard/page.tsx
+++ b/synculous-client/src/app/dashboard/page.tsx
@@ -141,7 +141,7 @@ export default function DashboardPage() {
     <div className="p-4 space-y-6">
       {/* Active Session Banner */}
       {activeSession && activeSession.session.status === 'active' && (
-        <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-4 text-white ring-2 ring-indigo-400/50 ring-offset-2 ring-offset-gray-50 animate-gentle-pulse">
+        <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-4 text-white ring-2 ring-indigo-400/50 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-950 animate-gentle-pulse">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-white/80 text-sm">Continue where you left off</p>
@@ -162,8 +162,8 @@ export default function DashboardPage() {
 
       {/* Header */}
       <div>
-        <h1 className="text-2xl font-bold text-gray-900">{getGreeting()}, {user?.username}!</h1>
-        <p className="text-gray-500 mt-1">Let&apos;s build some great habits today.</p>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{getGreeting()}, {user?.username}!</h1>
+        <p className="text-gray-500 dark:text-gray-400 mt-1">Let&apos;s build some great habits today.</p>
       </div>
 
       {/* "Never miss twice" Recovery Cards */}
@@ -171,11 +171,11 @@ export default function DashboardPage() {
         const routine = routines.find(r => r.id === recovery.routine_id);
         if (!routine) return null;
         return (
-          <div key={recovery.routine_id} className="bg-amber-50 border border-amber-200 rounded-2xl p-4">
+          <div key={recovery.routine_id} className="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-2xl p-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-amber-800 text-sm font-medium mb-1">Welcome back</p>
-                <p className="text-amber-700 text-sm">
+                <p className="text-amber-800 dark:text-amber-200 text-sm font-medium mb-1">Welcome back</p>
+                <p className="text-amber-700 dark:text-amber-300 text-sm">
                   It&apos;s been a couple days since {routine.icon} {routine.name}. That&apos;s completely okay — picking it back up today is what matters most.
                 </p>
               </div>
@@ -193,44 +193,44 @@ export default function DashboardPage() {
       {/* Weekly Stats — identity-based language */}
       {weeklySummary && weeklySummary.total_completed > 0 && (
         <div className="grid grid-cols-3 gap-3">
-          <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
             <div className="flex items-center gap-2 text-indigo-600 mb-1">
               <StarIcon size={18} />
               <span className="text-xs font-medium">Done</span>
             </div>
-            <p className="text-2xl font-bold text-gray-900">{weeklySummary.total_completed}</p>
-            <p className="text-xs text-gray-400 mt-0.5">this week</p>
+            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{weeklySummary.total_completed}</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">this week</p>
           </div>
-          <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
             <div className="flex items-center gap-2 text-purple-600 mb-1">
               <ClockIcon size={18} />
               <span className="text-xs font-medium">Invested</span>
             </div>
-            <p className="text-2xl font-bold text-gray-900">{formatTime(weeklySummary.total_time_minutes)}</p>
-            <p className="text-xs text-gray-400 mt-0.5">in yourself</p>
+            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatTime(weeklySummary.total_time_minutes)}</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">in yourself</p>
           </div>
-          <div className="bg-white rounded-xl p-4 shadow-sm">
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
             <div className="flex items-center gap-2 text-pink-600 mb-1">
               <ActivityIcon size={18} />
               <span className="text-xs font-medium">Active</span>
             </div>
-            <p className="text-2xl font-bold text-gray-900">{weeklySummary.routines_started}</p>
-            <p className="text-xs text-gray-400 mt-0.5">routines</p>
+            <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{weeklySummary.routines_started}</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">routines</p>
           </div>
         </div>
       )}
 
       {/* Quick Start Routines */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 mb-3">Your Routines</h2>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Your Routines</h2>
 
         {routines.length === 0 ? (
-          <div className="bg-white rounded-xl p-8 shadow-sm text-center">
-            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <FlameIcon className="text-gray-400" size={32} />
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
+            <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
+              <FlameIcon className="text-gray-400 dark:text-gray-500" size={32} />
             </div>
-            <h3 className="font-semibold text-gray-900 mb-1">No routines yet</h3>
-            <p className="text-gray-500 text-sm mb-4">Create your first routine to get started</p>
+            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No routines yet</h3>
+            <p className="text-gray-500 dark:text-gray-400 text-sm mb-4">Create your first routine to get started</p>
             <Link
               href="/dashboard/routines/new"
               className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium"
@@ -245,21 +245,21 @@ export default function DashboardPage() {
               return (
                 <div
                   key={routine.id}
-                  className="bg-white rounded-xl p-4 shadow-sm flex items-center justify-between"
+                  className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center justify-between"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="w-12 h-12 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-xl flex items-center justify-center">
+                    <div className="w-12 h-12 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/50 dark:to-pink-900/50 rounded-xl flex items-center justify-center">
                       <span className="text-2xl">{routine.icon || '✨'}</span>
                     </div>
                     <div>
-                      <h3 className="font-semibold text-gray-900">{routine.name}</h3>
+                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">{routine.name}</h3>
                       {streak && streak.current_streak > 0 ? (
                         <p className="text-sm text-orange-500 flex items-center gap-1">
                           <FlameIcon size={14} />
                           {streak.current_streak} day{streak.current_streak !== 1 ? 's' : ''}
                         </p>
                       ) : routine.description ? (
-                        <p className="text-gray-500 text-sm">{routine.description}</p>
+                        <p className="text-gray-500 dark:text-gray-400 text-sm">{routine.description}</p>
                       ) : null}
                     </div>
                   </div>
@@ -293,7 +293,7 @@ export default function DashboardPage() {
       </div>
 
       {error && (
-        <div className="bg-amber-50 text-amber-700 px-4 py-3 rounded-lg text-sm">
+        <div className="bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 px-4 py-3 rounded-lg text-sm">
           {error}
         </div>
       )}
diff --git a/synculous-client/src/app/dashboard/routines/[id]/launch/page.tsx b/synculous-client/src/app/dashboard/routines/[id]/launch/page.tsx
index 118b2b3..ef48a71 100644
--- a/synculous-client/src/app/dashboard/routines/[id]/launch/page.tsx
+++ b/synculous-client/src/app/dashboard/routines/[id]/launch/page.tsx
@@ -105,24 +105,24 @@ export default function LaunchScreen() {
   if (!routine) return null;
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
         <div className="flex items-center gap-3 px-4 py-3">
-          <button onClick={() => router.back()} className="p-1">
+          <button onClick={() => router.back()} className="p-1 text-gray-600 dark:text-gray-400">
             <ArrowLeftIcon size={24} />
           </button>
-          <h1 className="text-xl font-bold text-gray-900">Ready to start</h1>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Ready to start</h1>
         </div>
       </header>
 
       <div className="p-4 space-y-6">
         {/* Routine info */}
         <div className="text-center py-4">
-          <div className="w-20 h-20 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
+          <div className="w-20 h-20 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/50 dark:to-pink-900/50 rounded-2xl flex items-center justify-center mx-auto mb-3">
             <span className="text-5xl">{routine.icon || '✨'}</span>
           </div>
-          <h2 className="text-2xl font-bold text-gray-900">{routine.name}</h2>
-          <div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{routine.name}</h2>
+          <div className="flex items-center justify-center gap-2 text-gray-500 dark:text-gray-400 mt-2">
             <ClockIcon size={16} />
             <span>~{totalDuration} minutes</span>
             <span>·</span>
@@ -132,15 +132,15 @@ export default function LaunchScreen() {
 
         {/* Implementation Intention */}
         {(routine.habit_stack_after || schedule) && (
-          <div className="bg-indigo-50 border border-indigo-200 rounded-2xl p-4">
+          <div className="bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-800 rounded-2xl p-4">
             {routine.habit_stack_after && (
-              <p className="text-indigo-800 text-sm mb-2">
+              <p className="text-indigo-800 dark:text-indigo-200 text-sm mb-2">
                 After <span className="font-semibold">{routine.habit_stack_after}</span>, I will start{' '}
                 <span className="font-semibold">{routine.name}</span>
               </p>
             )}
             {schedule && (
-              <p className="text-indigo-700 text-sm">
+              <p className="text-indigo-700 dark:text-indigo-300 text-sm">
                 {schedule.days.length > 0 && (
                   <span className="font-semibold">
                     {schedule.days.length === 7 ? 'Every day' :
@@ -161,8 +161,8 @@ export default function LaunchScreen() {
 
         {/* Environment Check */}
         {envPrompts.length > 0 && (
-          <div className="bg-white rounded-2xl p-4 shadow-sm">
-            <h3 className="font-semibold text-gray-900 mb-3">Quick check</h3>
+          <div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm">
+            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-3">Quick check</h3>
             <div className="space-y-2">
               {envPrompts.map((prompt, i) => (
                 <button
@@ -170,18 +170,18 @@ export default function LaunchScreen() {
                   onClick={() => toggleEnvironmentCheck(i)}
                   className={`w-full flex items-center gap-3 p-3 rounded-xl transition ${
                     environmentChecked.has(i)
-                      ? 'bg-green-50 border border-green-200'
-                      : 'bg-gray-50 border border-gray-200'
+                      ? 'bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800'
+                      : 'bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600'
                   }`}
                 >
                   <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                     environmentChecked.has(i)
                       ? 'border-green-500 bg-green-500'
-                      : 'border-gray-300'
+                      : 'border-gray-300 dark:border-gray-500'
                   }`}>
                     {environmentChecked.has(i) && <CheckIcon size={14} className="text-white" />}
                   </div>
-                  <span className={`text-sm ${environmentChecked.has(i) ? 'text-green-800' : 'text-gray-700'}`}>
+                  <span className={`text-sm ${environmentChecked.has(i) ? 'text-green-800 dark:text-green-200' : 'text-gray-700 dark:text-gray-300'}`}>
                     {prompt}
                   </span>
                 </button>
@@ -191,11 +191,11 @@ export default function LaunchScreen() {
         )}
 
         {/* Emotion Bridge */}
-        <div className="bg-white rounded-2xl p-4 shadow-sm">
-          <h3 className="font-semibold text-gray-900 mb-1">
+        <div className="bg-white dark:bg-gray-800 rounded-2xl p-4 shadow-sm">
+          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
             When you finish in ~{totalDuration} minutes, how will you feel?
           </h3>
-          <p className="text-gray-500 text-sm mb-3">You <em>get to</em> do this</p>
+          <p className="text-gray-500 dark:text-gray-400 text-sm mb-3">You <em>get to</em> do this</p>
           <div className="grid grid-cols-2 gap-2">
             {EMOTION_OPTIONS.map((option) => (
               <button
@@ -203,12 +203,12 @@ export default function LaunchScreen() {
                 onClick={() => setSelectedEmotion(option.label)}
                 className={`flex items-center gap-2 p-3 rounded-xl border transition ${
                   selectedEmotion === option.label
-                    ? 'border-indigo-500 bg-indigo-50'
-                    : 'border-gray-200 hover:border-gray-300'
+                    ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30'
+                    : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
                 }`}
               >
                 <span className="text-xl">{option.emoji}</span>
-                <span className="text-sm font-medium text-gray-900">{option.label}</span>
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{option.label}</span>
               </button>
             ))}
           </div>
diff --git a/synculous-client/src/app/dashboard/routines/[id]/page.tsx b/synculous-client/src/app/dashboard/routines/[id]/page.tsx
index df4ca10..a95fd6b 100644
--- a/synculous-client/src/app/dashboard/routines/[id]/page.tsx
+++ b/synculous-client/src/app/dashboard/routines/[id]/page.tsx
@@ -241,14 +241,14 @@ export default function RoutineDetailPage() {
   if (!routine) return null;
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
         <div className="flex items-center justify-between px-4 py-3">
           <div className="flex items-center gap-3">
-            <button onClick={() => router.back()} className="p-1">
+            <button onClick={() => router.back()} className="p-1 text-gray-600 dark:text-gray-400">
               <ArrowLeftIcon size={24} />
             </button>
-            <h1 className="text-xl font-bold text-gray-900">
+            <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">
               {isEditing ? 'Edit Routine' : routine.name}
             </h1>
           </div>
@@ -268,13 +268,13 @@ export default function RoutineDetailPage() {
                   }
                 }}
                 disabled={isDeleting}
-                className="text-red-500 font-medium disabled:opacity-50"
+                className="text-red-500 dark:text-red-400 font-medium disabled:opacity-50"
               >
                 {isDeleting ? 'Deleting...' : 'Delete'}
               </button>
               <button
                 onClick={() => setIsEditing(true)}
-                className="text-indigo-600 font-medium"
+                className="text-indigo-600 dark:text-indigo-400 font-medium"
               >
                 Edit
               </button>
@@ -286,9 +286,9 @@ export default function RoutineDetailPage() {
       <div className="p-4 space-y-6">
         {isEditing ? (
           <>
-            <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm space-y-4">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">Icon</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Icon</label>
                 <div className="flex flex-wrap gap-2">
                   {ICONS.map((i) => (
                     <button
@@ -297,8 +297,8 @@ export default function RoutineDetailPage() {
                       onClick={() => setEditIcon(i)}
                       className={`w-10 h-10 rounded-lg text-xl flex items-center justify-center transition ${
                         editIcon === i
-                          ? 'bg-indigo-100 ring-2 ring-indigo-600'
-                          : 'bg-gray-100 hover:bg-gray-200'
+                          ? 'bg-indigo-100 dark:bg-indigo-900/50 ring-2 ring-indigo-600'
+                          : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
                       }`}
                     >
                       {i}
@@ -307,53 +307,53 @@ export default function RoutineDetailPage() {
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                 <input
                   type="text"
                   value={editName}
                   onChange={(e) => setEditName(e.target.value)}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
                 <input
                   type="text"
                   value={editDescription}
                   onChange={(e) => setEditDescription(e.target.value)}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Location</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Location</label>
                 <input
                   type="text"
                   value={editLocation}
                   onChange={(e) => setEditLocation(e.target.value)}
                   placeholder="Where do you do this? e.g., bathroom, kitchen"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Anchor habit</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Anchor habit</label>
                 <input
                   type="text"
                   value={editHabitStack}
                   onChange={(e) => setEditHabitStack(e.target.value)}
                   placeholder="What do you do right before? e.g., finish breakfast"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Environment prompts</label>
-                <p className="text-xs text-gray-500 mb-2">Quick checklist shown before starting</p>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Environment prompts</label>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Quick checklist shown before starting</p>
                 <div className="space-y-2 mb-2">
                   {editEnvPrompts.map((prompt, i) => (
                     <div key={i} className="flex items-center gap-2">
-                      <span className="flex-1 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-lg">{prompt}</span>
+                      <span className="flex-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 px-3 py-2 rounded-lg">{prompt}</span>
                       <button
                         onClick={() => setEditEnvPrompts(editEnvPrompts.filter((_, j) => j !== i))}
-                        className="text-red-500 text-sm px-2"
+                        className="text-red-500 dark:text-red-400 text-sm px-2"
                       >
                         Remove
                       </button>
@@ -366,7 +366,7 @@ export default function RoutineDetailPage() {
                     value={newEnvPrompt}
                     onChange={(e) => setNewEnvPrompt(e.target.value)}
                     placeholder="e.g., Water bottle nearby?"
-                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
+                    className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' && newEnvPrompt.trim()) {
                         setEditEnvPrompts([...editEnvPrompts, newEnvPrompt.trim()]);
@@ -381,7 +381,7 @@ export default function RoutineDetailPage() {
                         setNewEnvPrompt('');
                       }
                     }}
-                    className="px-3 py-2 bg-gray-200 rounded-lg text-sm font-medium"
+                    className="px-3 py-2 bg-gray-200 dark:bg-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300"
                   >
                     Add
                   </button>
@@ -401,7 +401,7 @@ export default function RoutineDetailPage() {
                   setEditHabitStack(routine.habit_stack_after || '');
                   setEditEnvPrompts(routine.environment_prompts || []);
                 }}
-                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg font-medium"
+                className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg font-medium text-gray-700 dark:text-gray-300"
               >
                 Cancel
               </button>
@@ -415,17 +415,17 @@ export default function RoutineDetailPage() {
           </>
         ) : (
           <>
-            <div className="bg-white rounded-xl p-4 shadow-sm">
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
               <div className="flex items-center gap-4">
-                <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-2xl flex items-center justify-center">
+                <div className="w-16 h-16 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/50 dark:to-pink-900/50 rounded-2xl flex items-center justify-center">
                   <span className="text-4xl">{routine.icon || '✨'}</span>
                 </div>
                 <div className="flex-1">
-                  <h2 className="text-xl font-bold text-gray-900">{routine.name}</h2>
+                  <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">{routine.name}</h2>
                   {routine.description && (
-                    <p className="text-gray-500">{routine.description}</p>
+                    <p className="text-gray-500 dark:text-gray-400">{routine.description}</p>
                   )}
-                  <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                  <div className="flex items-center gap-4 mt-2 text-sm text-gray-500 dark:text-gray-400">
                     <span className="flex items-center gap-1">
                       <ClockIcon size={14} />
                       {totalDuration} min
@@ -444,16 +444,16 @@ export default function RoutineDetailPage() {
             </div>
 
             {/* Schedule display (view mode) */}
-            <div className="bg-white rounded-xl p-4 shadow-sm">
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
               <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-2">
                   <ClockIcon size={16} className="text-indigo-500" />
-                  <h3 className="font-semibold text-gray-900">Schedule</h3>
+                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">Schedule</h3>
                 </div>
                 {!showScheduleEditor && (
                   <button
                     onClick={() => setShowScheduleEditor(true)}
-                    className="text-indigo-600 text-sm font-medium"
+                    className="text-indigo-600 dark:text-indigo-400 text-sm font-medium"
                   >
                     {schedule ? 'Edit' : 'Add schedule'}
                   </button>
@@ -468,7 +468,7 @@ export default function RoutineDetailPage() {
                       type="button"
                       onClick={() => setEditDays(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'])}
                       className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
-                        editDays.length === 7 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+                        editDays.length === 7 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
                       }`}
                     >
                       Every day
@@ -477,7 +477,7 @@ export default function RoutineDetailPage() {
                       type="button"
                       onClick={() => setEditDays(['mon', 'tue', 'wed', 'thu', 'fri'])}
                       className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
-                        editDays.length === 5 && !editDays.includes('sat') && !editDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+                        editDays.length === 5 && !editDays.includes('sat') && !editDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
                       }`}
                     >
                       Weekdays
@@ -486,7 +486,7 @@ export default function RoutineDetailPage() {
                       type="button"
                       onClick={() => setEditDays(['sat', 'sun'])}
                       className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
-                        editDays.length === 2 && editDays.includes('sat') && editDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+                        editDays.length === 2 && editDays.includes('sat') && editDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
                       }`}
                     >
                       Weekends
@@ -494,7 +494,7 @@ export default function RoutineDetailPage() {
                   </div>
                   
                   <div className="mb-3">
-                    <label className="block text-sm font-medium text-gray-700 mb-2">Days</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Days</label>
                     <div className="flex gap-2 flex-wrap">
                       {DAY_OPTIONS.map((day) => (
                         <button
@@ -502,9 +502,9 @@ export default function RoutineDetailPage() {
                           type="button"
                           onClick={() => toggleDay(day.value)}
                           className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
-                            editDays.includes(day.value)
-                              ? 'bg-indigo-600 text-white border-indigo-600'
-                              : 'bg-white text-gray-700 border-gray-300'
+                              editDays.includes(day.value)
+                                ? 'bg-indigo-600 text-white border-indigo-600'
+                                : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
                           }`}
                         >
                           {day.label}
@@ -513,23 +513,23 @@ export default function RoutineDetailPage() {
                     </div>
                   </div>
                   <div className="mb-3">
-                    <label className="block text-sm font-medium text-gray-700 mb-1">Time</label>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Time</label>
                     <input
                       type="time"
                       value={editTime}
                       onChange={(e) => setEditTime(e.target.value)}
-                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                      className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 outline-none"
                     />
                   </div>
                   <div className="flex items-center justify-between mb-3">
                     <div>
-                      <p className="font-medium text-gray-900">Send reminder</p>
-                      <p className="text-sm text-gray-500">Get notified when it's time</p>
+                      <p className="font-medium text-gray-900 dark:text-gray-100">Send reminder</p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">Get notified when it's time</p>
                     </div>
                     <button
                       onClick={() => setEditRemind(!editRemind)}
                       className={`w-12 h-7 rounded-full transition-colors ${
-                        editRemind ? 'bg-indigo-500' : 'bg-gray-300'
+                        editRemind ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
                       }`}
                     >
                       <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -551,7 +551,7 @@ export default function RoutineDetailPage() {
                           setEditRemind(true);
                         }
                       }}
-                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium"
+                      className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300"
                     >
                       Cancel
                     </button>
@@ -565,15 +565,15 @@ export default function RoutineDetailPage() {
                 </>
               ) : schedule && schedule.days.length > 0 ? (
                 <>
-                  <p className="text-gray-700">
+                  <p className="text-gray-700 dark:text-gray-300">
                     {formatDays(schedule.days)} at {schedule.time}
                   </p>
                   {schedule.remind && (
-                    <p className="text-sm text-gray-500 mt-1">Reminders on</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Reminders on</p>
                   )}
                 </>
               ) : (
-                <p className="text-gray-500 text-sm">Not scheduled. Click "Add schedule" to set a time.</p>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">Not scheduled. Click "Add schedule" to set a time.</p>
               )}
             </div>
           </>
@@ -582,30 +582,30 @@ export default function RoutineDetailPage() {
         {/* Steps */}
         <div>
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-lg font-semibold text-gray-900">Steps</h2>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Steps</h2>
             {steps.length >= 4 && steps.length <= 7 && (
-              <span className="text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full">Good length</span>
+              <span className="text-xs text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30 px-2 py-1 rounded-full">Good length</span>
             )}
           </div>
           {steps.length > 7 && (
-            <p className="text-sm text-amber-600 bg-amber-50 px-3 py-2 rounded-lg mb-3">
+            <p className="text-sm text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-3 py-2 rounded-lg mb-3">
               Tip: Routines with 4-7 steps tend to feel more manageable. Consider combining related steps.
             </p>
           )}
 
-          <div className="bg-white rounded-xl p-4 shadow-sm space-y-3 mb-4">
+          <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm space-y-3 mb-4">
             <div className="flex gap-2">
               <input
                 type="text"
                 value={newStepName}
                 onChange={(e) => setNewStepName(e.target.value)}
                 placeholder="New step name"
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
               />
               <select
                 value={newStepDuration}
                 onChange={(e) => setNewStepDuration(Number(e.target.value))}
-                className="px-3 py-2 border border-gray-300 rounded-lg"
+                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
               >
                 <option value={1}>1m</option>
                 <option value={5}>5m</option>
@@ -623,44 +623,44 @@ export default function RoutineDetailPage() {
           </div>
 
           {steps.length === 0 ? (
-            <div className="bg-white rounded-xl p-8 shadow-sm text-center">
-              <p className="text-gray-500">No steps yet</p>
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
+              <p className="text-gray-500 dark:text-gray-400">No steps yet</p>
             </div>
           ) : (
             <div className="space-y-2">
               {steps.map((step, index) => (
                 <div
                   key={step.id}
-                  className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-3"
+                  className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-3"
                 >
-                  <div className="w-8 h-8 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center font-semibold text-sm">
+                  <div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400 rounded-full flex items-center justify-center font-semibold text-sm">
                     {index + 1}
                   </div>
                   <div className="flex-1">
-                    <h3 className="font-medium text-gray-900">{step.name}</h3>
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">{step.name}</h3>
                     {step.duration_minutes && (
-                      <p className="text-sm text-gray-500">{step.duration_minutes} min</p>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">{step.duration_minutes} min</p>
                     )}
                   </div>
                   <div className="flex flex-col">
                     <button
                       onClick={() => handleMoveStep(step.id, 'up')}
                       disabled={index === 0}
-                      className="text-gray-400 p-1 disabled:opacity-30 hover:text-gray-600"
+                      className="text-gray-400 dark:text-gray-500 p-1 disabled:opacity-30 hover:text-gray-600 dark:hover:text-gray-300"
                     >
                       ▲
                     </button>
                     <button
                       onClick={() => handleMoveStep(step.id, 'down')}
                       disabled={index === steps.length - 1}
-                      className="text-gray-400 p-1 disabled:opacity-30 hover:text-gray-600"
+                      className="text-gray-400 dark:text-gray-500 p-1 disabled:opacity-30 hover:text-gray-600 dark:hover:text-gray-300"
                     >
                       ▼
                     </button>
                   </div>
                   <button
                     onClick={() => handleDeleteStep(step.id)}
-                    className="text-red-500 p-2"
+                    className="text-red-500 dark:text-red-400 p-2"
                   >
                     <TrashIcon size={18} />
                   </button>
diff --git a/synculous-client/src/app/dashboard/routines/new/page.tsx b/synculous-client/src/app/dashboard/routines/new/page.tsx
index 5674d5e..1ab0e34 100644
--- a/synculous-client/src/app/dashboard/routines/new/page.tsx
+++ b/synculous-client/src/app/dashboard/routines/new/page.tsx
@@ -116,26 +116,26 @@ export default function NewRoutinePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
         <div className="flex items-center gap-3 px-4 py-3">
-          <button onClick={() => router.back()} className="p-1">
+          <button onClick={() => router.back()} className="p-1 text-gray-600 dark:text-gray-400">
             <ArrowLeftIcon size={24} />
           </button>
-          <h1 className="text-xl font-bold text-gray-900">New Routine</h1>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">New Routine</h1>
         </div>
       </header>
 
       <Link
         href="/dashboard/templates"
-        className="mx-4 mt-4 flex items-center gap-3 bg-gradient-to-r from-indigo-50 to-purple-50 border-2 border-indigo-200 rounded-xl p-4 hover:border-indigo-400 transition-colors"
+        className="mx-4 mt-4 flex items-center gap-3 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 border-2 border-indigo-200 dark:border-indigo-800 rounded-xl p-4 hover:border-indigo-400 dark:hover:border-indigo-600 transition-colors"
       >
-        <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
-          <CopyIcon size={24} className="text-indigo-600" />
+        <div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/50 rounded-xl flex items-center justify-center flex-shrink-0">
+          <CopyIcon size={24} className="text-indigo-600 dark:text-indigo-400" />
         </div>
         <div className="flex-1">
-          <p className="font-semibold text-gray-900">Start from a template</p>
-          <p className="text-sm text-gray-500">Browse pre-made routines</p>
+          <p className="font-semibold text-gray-900 dark:text-gray-100">Start from a template</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Browse pre-made routines</p>
         </div>
         <div className="bg-indigo-600 text-white text-xs font-medium px-2 py-1 rounded-full">
           Recommended
@@ -144,15 +144,15 @@ export default function NewRoutinePage() {
 
       <form onSubmit={handleSubmit} className="p-4 space-y-6">
         {error && (
-          <div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
+          <div className="bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
             {error}
           </div>
         )}
 
         {/* Basic Info */}
-        <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Icon</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Icon</label>
             <div className="flex flex-wrap gap-2">
               {ICONS.map((i) => (
                 <button
@@ -161,8 +161,8 @@ export default function NewRoutinePage() {
                   onClick={() => setIcon(i)}
                   className={`w-10 h-10 rounded-lg text-xl flex items-center justify-center transition ${
                     icon === i
-                      ? 'bg-indigo-100 ring-2 ring-indigo-600'
-                      : 'bg-gray-100 hover:bg-gray-200'
+                      ? 'bg-indigo-100 dark:bg-indigo-900/50 ring-2 ring-indigo-600'
+                      : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
                   }`}
                 >
                   {i}
@@ -172,31 +172,31 @@ export default function NewRoutinePage() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Morning Routine"
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Description (optional)</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description (optional)</label>
             <input
               type="text"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Start your day right"
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
             />
           </div>
         </div>
 
         {/* Schedule */}
-        <div className="bg-white rounded-xl p-4 shadow-sm space-y-4">
-          <h2 className="text-lg font-semibold text-gray-900">Schedule <span className="text-sm font-normal text-gray-400">(optional)</span></h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm space-y-4">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Schedule <span className="text-sm font-normal text-gray-400">(optional)</span></h2>
           
           {/* Quick select buttons */}
           <div className="flex gap-2">
@@ -204,7 +204,7 @@ export default function NewRoutinePage() {
               type="button"
               onClick={() => setScheduleDays(['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'])}
               className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
-                scheduleDays.length === 7 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+                scheduleDays.length === 7 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
               }`}
             >
               Every day
@@ -213,7 +213,7 @@ export default function NewRoutinePage() {
               type="button"
               onClick={() => setScheduleDays(['mon', 'tue', 'wed', 'thu', 'fri'])}
               className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
-                scheduleDays.length === 5 && !scheduleDays.includes('sat') && !scheduleDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+                scheduleDays.length === 5 && !scheduleDays.includes('sat') && !scheduleDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
               }`}
             >
               Weekdays
@@ -222,7 +222,7 @@ export default function NewRoutinePage() {
               type="button"
               onClick={() => setScheduleDays(['sat', 'sun'])}
               className={`px-3 py-1.5 rounded-lg text-sm font-medium border transition-colors ${
-                scheduleDays.length === 2 && scheduleDays.includes('sat') && scheduleDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-700 border-gray-300'
+                scheduleDays.length === 2 && scheduleDays.includes('sat') && scheduleDays.includes('sun') ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
               }`}
             >
               Weekends
@@ -230,7 +230,7 @@ export default function NewRoutinePage() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Days</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Days</label>
             <div className="flex gap-2 flex-wrap">
               {DAY_OPTIONS.map((day) => (
                 <button
@@ -240,7 +240,7 @@ export default function NewRoutinePage() {
                   className={`px-3 py-2 rounded-lg text-sm font-medium border transition-colors ${
                     scheduleDays.includes(day.value)
                       ? 'bg-indigo-600 text-white border-indigo-600'
-                      : 'bg-white text-gray-700 border-gray-300'
+                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600'
                   }`}
                 >
                   {day.label}
@@ -250,25 +250,25 @@ export default function NewRoutinePage() {
           </div>
           
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Time</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Time</label>
             <input
               type="time"
               value={scheduleTime}
               onChange={(e) => setScheduleTime(e.target.value)}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 outline-none"
             />
           </div>
           
           <div className="flex items-center justify-between">
             <div>
-              <p className="font-medium text-gray-900">Send reminder</p>
-              <p className="text-sm text-gray-500">Get notified when it's time</p>
+              <p className="font-medium text-gray-900 dark:text-gray-100">Send reminder</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Get notified when it's time</p>
             </div>
             <button
               type="button"
               onClick={() => setScheduleRemind(!scheduleRemind)}
               className={`w-12 h-7 rounded-full transition-colors ${
-                scheduleRemind ? 'bg-indigo-500' : 'bg-gray-300'
+                scheduleRemind ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
               }`}
             >
               <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -281,11 +281,11 @@ export default function NewRoutinePage() {
         {/* Steps */}
         <div>
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-lg font-semibold text-gray-900">Steps</h2>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Steps</h2>
             <button
               type="button"
               onClick={handleAddStep}
-              className="text-indigo-600 text-sm font-medium flex items-center gap-1"
+              className="text-indigo-600 dark:text-indigo-400 text-sm font-medium flex items-center gap-1"
             >
               <PlusIcon size={16} />
               Add Step
@@ -293,12 +293,12 @@ export default function NewRoutinePage() {
           </div>
 
           {steps.length === 0 ? (
-            <div className="bg-white rounded-xl p-8 shadow-sm text-center">
-              <p className="text-gray-500 mb-4">Add steps to your routine</p>
+            <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
+              <p className="text-gray-500 dark:text-gray-400 mb-4">Add steps to your routine</p>
               <button
                 type="button"
                 onClick={handleAddStep}
-                className="text-indigo-600 font-medium"
+                className="text-indigo-600 dark:text-indigo-400 font-medium"
               >
                 + Add your first step
               </button>
@@ -308,9 +308,9 @@ export default function NewRoutinePage() {
               {steps.map((step, index) => (
                 <div
                   key={step.id}
-                  className="bg-white rounded-xl p-4 shadow-sm flex items-start gap-3"
+                  className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-start gap-3"
                 >
-                  <div className="pt-3 text-gray-400 cursor-grab">
+                  <div className="pt-3 text-gray-400 dark:text-gray-500 cursor-grab">
                     <GripVerticalIcon size={20} />
                   </div>
                   <div className="flex-1 space-y-3">
@@ -319,14 +319,14 @@ export default function NewRoutinePage() {
                       value={step.name}
                       onChange={(e) => handleUpdateStep(index, { name: e.target.value })}
                       placeholder="Step name"
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 outline-none"
                     />
                     <div className="flex items-center gap-3">
-                      <label className="text-sm text-gray-500">Duration:</label>
+                      <label className="text-sm text-gray-500 dark:text-gray-400">Duration:</label>
                       <select
                         value={step.duration_minutes || 5}
                         onChange={(e) => handleUpdateStep(index, { duration_minutes: Number(e.target.value) })}
-                        className="px-3 py-1 border border-gray-300 rounded-lg text-sm"
+                        className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                       >
                         <option value={1}>1 min</option>
                         <option value={2}>2 min</option>
@@ -343,7 +343,7 @@ export default function NewRoutinePage() {
                   <button
                     type="button"
                     onClick={() => handleDeleteStep(index)}
-                    className="text-red-500 p-2"
+                    className="text-red-500 dark:text-red-400 p-2"
                   >
                     <TrashIcon size={18} />
                   </button>
diff --git a/synculous-client/src/app/dashboard/routines/page.tsx b/synculous-client/src/app/dashboard/routines/page.tsx
index 6e2e868..43f8b88 100644
--- a/synculous-client/src/app/dashboard/routines/page.tsx
+++ b/synculous-client/src/app/dashboard/routines/page.tsx
@@ -475,10 +475,10 @@ export default function RoutinesPage() {
   return (
     // h-screen + overflow-hidden eliminates the outer page scrollbar;
     // only the inner timeline div scrolls.
-    <div className="flex flex-col h-screen overflow-hidden bg-gray-50">
+    <div className="flex flex-col h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 pt-4 pb-2 bg-white border-b border-gray-100 flex-shrink-0">
-        <h1 className="text-2xl font-bold text-gray-900">Routines</h1>
+      <div className="flex items-center justify-between px-4 pt-4 pb-2 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 flex-shrink-0">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Routines</h1>
         <Link
           href="/dashboard/routines/new"
           className="bg-indigo-600 text-white p-2 rounded-full"
@@ -516,7 +516,7 @@ export default function RoutinesPage() {
       )}
 
       {/* Week Strip */}
-      <div className="flex bg-white px-2 pb-3 pt-2 gap-1 border-b border-gray-100 flex-shrink-0">
+      <div className="flex bg-white dark:bg-gray-900 px-2 pb-3 pt-2 gap-1 border-b border-gray-100 dark:border-gray-800 flex-shrink-0">
         {weekDays.map((day, i) => {
           const selected = isSameDay(day, selectedDate);
           const isTodayDay = isSameDay(day, today);
@@ -526,7 +526,7 @@ export default function RoutinesPage() {
               onClick={() => setSelectedDate(day)}
               className="flex-1 flex flex-col items-center py-1 rounded-xl"
             >
-              <span className="text-xs text-gray-500 mb-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                 {DAY_LABELS[i]}
               </span>
               <span
@@ -536,8 +536,8 @@ export default function RoutinesPage() {
                     : isTodayDay
                     ? 'text-indigo-600 font-bold'
                     : selected
-                    ? 'bg-gray-200 text-gray-900'
-                    : 'text-gray-700'
+                    ? 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100'
+                    : 'text-gray-700 dark:text-gray-300'
                 }`}
               >
                 {day.getDate()}
@@ -556,10 +556,10 @@ export default function RoutinesPage() {
 
         {allRoutines.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-20 px-4">
-            <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
+            <div className="w-16 h-16 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center mb-4">
               <ClockIcon size={32} className="text-indigo-400" />
             </div>
-            <p className="text-gray-500 text-center mb-4">No routines yet</p>
+            <p className="text-gray-500 dark:text-gray-400 text-center mb-4">No routines yet</p>
             <Link
               href="/dashboard/routines/new"
               className="bg-indigo-600 text-white px-6 py-3 rounded-xl font-medium"
@@ -593,10 +593,10 @@ export default function RoutinesPage() {
                         height: `${HOUR_HEIGHT}px`,
                       }}
                     >
-                      <span className="w-14 text-xs text-gray-400 pr-2 text-right flex-shrink-0 -mt-2">
+                      <span className="w-14 text-xs text-gray-400 dark:text-gray-500 pr-2 text-right flex-shrink-0 -mt-2">
                         {label}
                       </span>
-                      <div className="flex-1 border-t border-gray-200 h-full" />
+                      <div className="flex-1 border-t border-gray-200 dark:border-gray-700 h-full" />
                     </div>
                   );
                 }
@@ -642,8 +642,8 @@ export default function RoutinesPage() {
                     }}
                     className={`absolute rounded-xl px-3 py-2 text-left shadow-sm border transition-all overflow-hidden ${
                       isPast
-                        ? 'bg-green-50 border-green-200 opacity-75'
-                        : 'bg-indigo-50 border-indigo-200'
+                        ? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800 opacity-75'
+                        : 'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-200 dark:border-indigo-800'
                     } ${isCurrent ? 'ring-2 ring-indigo-500 opacity-100' : ''}`}
                   >
                     <div className="flex items-center gap-2">
@@ -651,10 +651,10 @@ export default function RoutinesPage() {
                         {entry.routine_icon || '✨'}
                       </span>
                       <div className="min-w-0 flex-1">
-                        <p className="font-semibold text-gray-900 text-sm truncate">
+                        <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm truncate">
                           {entry.routine_name}
                         </p>
-                        <p className="text-xs text-gray-500 truncate">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                           {formatTime(entry.time)}
                           {entry.total_duration_minutes > 0 && (
                             <>
@@ -687,13 +687,13 @@ export default function RoutinesPage() {
                   totalLanes: 1,
                 };
 
-                let statusColor = 'bg-blue-50 border-blue-200';
+                let statusColor = 'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800';
                 if (group.allTaken)
-                  statusColor = 'bg-green-50 border-green-200';
+                  statusColor = 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800';
                 else if (group.allSkipped)
-                  statusColor = 'bg-gray-50 border-gray-200 opacity-60';
+                  statusColor = 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700 opacity-60';
                 else if (group.anyOverdue)
-                  statusColor = 'bg-amber-50 border-amber-300';
+                  statusColor = 'bg-amber-50 dark:bg-amber-900/30 border-amber-300 dark:border-amber-700';
 
                 return (
                   <div
@@ -711,10 +711,10 @@ export default function RoutinesPage() {
                           💊
                         </span>
                         <div className="min-w-0 flex-1">
-                          <p className="font-semibold text-gray-900 text-sm truncate">
+                          <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm truncate">
                             {formatMedsList(group.medications)}
                           </p>
-                          <p className="text-xs text-gray-500 truncate">
+                          <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                             {formatTime(group.time)}
                           </p>
                         </div>
@@ -768,7 +768,7 @@ export default function RoutinesPage() {
                                 }
                               });
                             }}
-                            className="text-gray-500 px-1 py-1 text-xs"
+                            className="text-gray-500 dark:text-gray-400 px-1 py-1 text-xs"
                           >
                             Skip
                           </button>
@@ -793,23 +793,23 @@ export default function RoutinesPage() {
 
         {/* Unscheduled routines — inside the scroll area, below the timeline */}
         {unscheduledRoutines.length > 0 && (
-          <div className="border-t border-gray-200 bg-white px-4 pt-3 pb-4">
-            <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
+          <div className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-4 pt-3 pb-4">
+            <h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
               Unscheduled
             </h2>
             <div className="space-y-2">
               {unscheduledRoutines.map((r) => (
                 <div
                   key={r.id}
-                  className="flex items-center gap-3 bg-gray-50 rounded-xl p-3"
+                  className="flex items-center gap-3 bg-gray-50 dark:bg-gray-800 rounded-xl p-3"
                 >
                   <span className="text-xl flex-shrink-0">{r.icon || '✨'}</span>
                   <div className="flex-1 min-w-0">
-                    <p className="font-medium text-gray-900 text-sm truncate">
+                    <p className="font-medium text-gray-900 dark:text-gray-100 text-sm truncate">
                       {r.name}
                     </p>
                     {r.description && (
-                      <p className="text-xs text-gray-500 truncate">
+                      <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                         {r.description}
                       </p>
                     )}
diff --git a/synculous-client/src/app/dashboard/settings/page.tsx b/synculous-client/src/app/dashboard/settings/page.tsx
index 4907be5..8f5f41e 100644
--- a/synculous-client/src/app/dashboard/settings/page.tsx
+++ b/synculous-client/src/app/dashboard/settings/page.tsx
@@ -90,27 +90,27 @@ export default function SettingsPage() {
   return (
     <div className="p-4 space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Settings</h1>
         {saved && (
-          <span className="text-sm text-green-600 animate-fade-in-up">Saved</span>
+          <span className="text-sm text-green-600 dark:text-green-400 animate-fade-in-up">Saved</span>
         )}
       </div>
 
       {/* Session Experience */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 mb-3">Session Experience</h2>
-        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-100">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Session Experience</h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm divide-y divide-gray-100 dark:divide-gray-700">
           {/* Sound */}
           <div className="flex items-center justify-between p-4">
             <div className="flex items-center gap-3">
               {prefs.sound_enabled ? (
                 <VolumeIcon size={20} className="text-indigo-500" />
               ) : (
-                <VolumeOffIcon size={20} className="text-gray-400" />
+                <VolumeOffIcon size={20} className="text-gray-400 dark:text-gray-500" />
               )}
               <div>
-                <p className="font-medium text-gray-900">Sound effects</p>
-                <p className="text-sm text-gray-500">Subtle audio cues on step completion</p>
+                <p className="font-medium text-gray-900 dark:text-gray-100">Sound effects</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Subtle audio cues on step completion</p>
               </div>
             </div>
             <button
@@ -119,7 +119,7 @@ export default function SettingsPage() {
                 if (!prefs.sound_enabled) playStepComplete();
               }}
               className={`w-12 h-7 rounded-full transition-colors ${
-                prefs.sound_enabled ? 'bg-indigo-500' : 'bg-gray-300'
+                prefs.sound_enabled ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
               }`}
             >
               <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -131,10 +131,10 @@ export default function SettingsPage() {
           {/* Haptics */}
           <div className="flex items-center justify-between p-4">
             <div className="flex items-center gap-3">
-              <SparklesIcon size={20} className={prefs.haptic_enabled ? 'text-indigo-500' : 'text-gray-400'} />
+              <SparklesIcon size={20} className={prefs.haptic_enabled ? 'text-indigo-500' : 'text-gray-400 dark:text-gray-500'} />
               <div>
-                <p className="font-medium text-gray-900">Haptic feedback</p>
-                <p className="text-sm text-gray-500">Gentle vibration on actions</p>
+                <p className="font-medium text-gray-900 dark:text-gray-100">Haptic feedback</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Gentle vibration on actions</p>
               </div>
             </div>
             <button
@@ -143,7 +143,7 @@ export default function SettingsPage() {
                 if (!prefs.haptic_enabled) hapticTap();
               }}
               className={`w-12 h-7 rounded-full transition-colors ${
-                prefs.haptic_enabled ? 'bg-indigo-500' : 'bg-gray-300'
+                prefs.haptic_enabled ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
               }`}
             >
               <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -155,13 +155,13 @@ export default function SettingsPage() {
           {/* Launch Screen */}
           <div className="flex items-center justify-between p-4">
             <div>
-              <p className="font-medium text-gray-900">Pre-routine launch screen</p>
-              <p className="text-sm text-gray-500">Environment check and emotion bridge</p>
+              <p className="font-medium text-gray-900 dark:text-gray-100">Pre-routine launch screen</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Environment check and emotion bridge</p>
             </div>
             <button
               onClick={() => updatePref('show_launch_screen', !prefs.show_launch_screen)}
               className={`w-12 h-7 rounded-full transition-colors ${
-                prefs.show_launch_screen ? 'bg-indigo-500' : 'bg-gray-300'
+                prefs.show_launch_screen ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
               }`}
             >
               <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -174,8 +174,8 @@ export default function SettingsPage() {
 
       {/* Notifications */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 mb-3">Notifications</h2>
-        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-100">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Notifications</h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm divide-y divide-gray-100 dark:divide-gray-700">
           {/* Push Notifications */}
           <PushNotificationToggle />
 
@@ -183,13 +183,13 @@ export default function SettingsPage() {
           <div className="p-4 space-y-3">
             <div className="flex items-center justify-between">
               <div>
-                <p className="font-medium text-gray-900">ntfy</p>
-                <p className="text-sm text-gray-500">Push notifications via ntfy.sh</p>
+                <p className="font-medium text-gray-900 dark:text-gray-100">ntfy</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Push notifications via ntfy.sh</p>
               </div>
               <button
                 onClick={() => updateNotif({ ntfy_enabled: !notif.ntfy_enabled })}
                 className={`w-12 h-7 rounded-full transition-colors ${
-                  notif.ntfy_enabled ? 'bg-indigo-500' : 'bg-gray-300'
+                  notif.ntfy_enabled ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
                 }`}
               >
                 <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -204,7 +204,7 @@ export default function SettingsPage() {
                 value={notif.ntfy_topic}
                 onChange={(e) => setNotif({ ...notif, ntfy_topic: e.target.value })}
                 onBlur={() => updateNotif({ ntfy_topic: notif.ntfy_topic })}
-                className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-900 placeholder-gray-400"
+                className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700"
               />
             )}
           </div>
@@ -213,13 +213,13 @@ export default function SettingsPage() {
           <div className="p-4 space-y-3">
             <div className="flex items-center justify-between">
               <div>
-                <p className="font-medium text-gray-900">Discord</p>
-                <p className="text-sm text-gray-500">Get DMs from the Synculous bot</p>
+                <p className="font-medium text-gray-900 dark:text-gray-100">Discord</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Get DMs from the Synculous bot</p>
               </div>
               <button
                 onClick={() => updateNotif({ discord_enabled: !notif.discord_enabled })}
                 className={`w-12 h-7 rounded-full transition-colors ${
-                  notif.discord_enabled ? 'bg-indigo-500' : 'bg-gray-300'
+                  notif.discord_enabled ? 'bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
                 }`}
               >
                 <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ml-1 ${
@@ -234,7 +234,7 @@ export default function SettingsPage() {
                 value={notif.discord_user_id}
                 onChange={(e) => setNotif({ ...notif, discord_user_id: e.target.value })}
                 onBlur={() => updateNotif({ discord_user_id: notif.discord_user_id })}
-                className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-900 placeholder-gray-400"
+                className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 bg-white dark:bg-gray-700"
               />
             )}
           </div>
@@ -243,8 +243,8 @@ export default function SettingsPage() {
 
       {/* Celebration Style */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 mb-3">Celebration Style</h2>
-        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-100">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Celebration Style</h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm divide-y divide-gray-100 dark:divide-gray-700">
           {[
             { value: 'standard', label: 'Standard', desc: 'Full animated celebration with stats and rewards' },
             { value: 'quick', label: 'Quick', desc: 'Brief confirmation, then back to dashboard' },
@@ -256,13 +256,13 @@ export default function SettingsPage() {
               className="w-full flex items-center justify-between p-4 text-left"
             >
               <div>
-                <p className="font-medium text-gray-900">{option.label}</p>
-                <p className="text-sm text-gray-500">{option.desc}</p>
+                <p className="font-medium text-gray-900 dark:text-gray-100">{option.label}</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">{option.desc}</p>
               </div>
               <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                 prefs.celebration_style === option.value
                   ? 'border-indigo-500'
-                  : 'border-gray-300'
+                  : 'border-gray-300 dark:border-gray-600'
               }`}>
                 {prefs.celebration_style === option.value && (
                   <div className="w-2.5 h-2.5 rounded-full bg-indigo-500" />
diff --git a/synculous-client/src/app/dashboard/stats/page.tsx b/synculous-client/src/app/dashboard/stats/page.tsx
index 6a2cdb2..40c8f28 100644
--- a/synculous-client/src/app/dashboard/stats/page.tsx
+++ b/synculous-client/src/app/dashboard/stats/page.tsx
@@ -122,7 +122,7 @@ export default function StatsPage() {
 
   return (
     <div className="p-4 space-y-6">
-      <h1 className="text-2xl font-bold text-gray-900">Your Progress</h1>
+      <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Your Progress</h1>
 
       {/* Weekly Summary */}
       {weeklySummary && (
@@ -148,11 +148,11 @@ export default function StatsPage() {
       {/* Wins This Month */}
       {victories.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Wins This Month</h2>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Wins This Month</h2>
           <div className="space-y-2">
             {victories.map((victory, i) => (
-              <div key={i} className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-3">
-                <div className="w-10 h-10 bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl flex items-center justify-center">
+              <div key={i} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-3">
+                <div className="w-10 h-10 bg-gradient-to-br from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 rounded-xl flex items-center justify-center">
                   <span className="text-lg">
                     {victory.type === 'comeback' ? '💪' :
                      victory.type === 'weekend' ? '🎉' :
@@ -160,7 +160,7 @@ export default function StatsPage() {
                      victory.type === 'consistency' ? '🔥' : '⭐'}
                   </span>
                 </div>
-                <p className="text-sm text-gray-700 flex-1">{victory.message}</p>
+                <p className="text-sm text-gray-700 dark:text-gray-300 flex-1">{victory.message}</p>
               </div>
             ))}
           </div>
@@ -170,16 +170,16 @@ export default function StatsPage() {
       {/* Consistency (formerly Streaks) */}
       {streaks.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Your Consistency</h2>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Your Consistency</h2>
           <div className="space-y-2">
             {streaks.map((streak) => (
-              <div key={streak.routine_id} className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-4">
-                <div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-red-100 rounded-xl flex items-center justify-center">
+              <div key={streak.routine_id} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-4">
+                <div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-red-100 dark:from-orange-900/30 dark:to-red-900/30 rounded-xl flex items-center justify-center">
                   <FlameIcon className="text-orange-500" size={24} />
                 </div>
                 <div className="flex-1">
-                  <p className="font-medium text-gray-900">{streak.routine_name}</p>
-                  <p className="text-sm text-gray-500">
+                  <p className="font-medium text-gray-900 dark:text-gray-100">{streak.routine_name}</p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
                     {getStreakMessage(streak.current_streak)}
                   </p>
                 </div>
@@ -187,17 +187,17 @@ export default function StatsPage() {
                   {streak.current_streak > 0 ? (
                     <>
                       <p className="text-2xl font-bold text-orange-500">{streak.current_streak}</p>
-                      <p className="text-xs text-gray-500">days</p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">days</p>
                     </>
                   ) : (
-                    <p className="text-sm text-gray-400">Ready</p>
+                    <p className="text-sm text-gray-400 dark:text-gray-500">Ready</p>
                   )}
                 </div>
               </div>
             ))}
             {/* Longest streak callout */}
             {streaks.some(s => s.longest_streak > 0) && (
-              <p className="text-sm text-gray-400 text-center mt-2">
+              <p className="text-sm text-gray-400 dark:text-gray-500 text-center mt-2">
                 Your personal best: {Math.max(...streaks.map(s => s.longest_streak))} days — you&apos;ve done it before
               </p>
             )}
@@ -208,11 +208,11 @@ export default function StatsPage() {
       {/* Per-Routine Stats */}
       {routines.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Routine Details</h2>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Routine Details</h2>
           <select
             value={selectedRoutine}
             onChange={(e) => setSelectedRoutine(e.target.value)}
-            className="w-full px-4 py-3 border border-gray-300 rounded-xl bg-white mb-4"
+            className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 mb-4"
           >
             {routines.map((routine) => (
               <option key={routine.id} value={routine.id}>
@@ -223,34 +223,34 @@ export default function StatsPage() {
 
           {routineStats && (
             <div className="grid grid-cols-2 gap-3">
-              <div className="bg-white rounded-xl p-4 shadow-sm">
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
                 <TargetIcon className="text-indigo-500 mb-2" size={24} />
                 <p className={`text-lg font-bold ${getCompletionLabel(routineStats.completion_rate_percent).color}`}>
                   {getCompletionLabel(routineStats.completion_rate_percent).label}
                 </p>
-                <p className="text-sm text-gray-400">{routineStats.completion_rate_percent}%</p>
+                <p className="text-sm text-gray-400 dark:text-gray-500">{routineStats.completion_rate_percent}%</p>
               </div>
-              <div className="bg-white rounded-xl p-4 shadow-sm">
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
                 <ClockIcon className="text-purple-500 mb-2" size={24} />
-                <p className="text-2xl font-bold text-gray-900">{formatTime(routineStats.avg_duration_minutes)}</p>
-                <p className="text-sm text-gray-500">Avg Duration</p>
+                <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatTime(routineStats.avg_duration_minutes)}</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Avg Duration</p>
               </div>
-              <div className="bg-white rounded-xl p-4 shadow-sm">
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
                 <StarIcon className="text-green-500 mb-2" size={24} />
-                <p className="text-2xl font-bold text-gray-900">{routineStats.completed}</p>
-                <p className="text-sm text-gray-500">Completed</p>
+                <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{routineStats.completed}</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Completed</p>
               </div>
-              <div className="bg-white rounded-xl p-4 shadow-sm">
+              <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
                 <ActivityIcon className="text-pink-500 mb-2" size={24} />
-                <p className="text-2xl font-bold text-gray-900">{routineStats.total_sessions}</p>
-                <p className="text-sm text-gray-500">Total Sessions</p>
+                <p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{routineStats.total_sessions}</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Total Sessions</p>
               </div>
             </div>
           )}
 
           {/* Plateau messaging */}
           {routineStats && routineStats.total_sessions >= 5 && (
-            <p className="text-sm text-gray-400 text-center mt-3">
+            <p className="text-sm text-gray-400 dark:text-gray-500 text-center mt-3">
               {routineStats.completion_rate_percent >= 60
                 ? "You're showing up consistently — that's the hard part. The exact rate doesn't matter."
                 : "Life has seasons. The fact that you're checking in shows this matters to you."}
diff --git a/synculous-client/src/app/dashboard/templates/page.tsx b/synculous-client/src/app/dashboard/templates/page.tsx
index 6afc04b..ff5b4f1 100644
--- a/synculous-client/src/app/dashboard/templates/page.tsx
+++ b/synculous-client/src/app/dashboard/templates/page.tsx
@@ -54,34 +54,34 @@ export default function TemplatesPage() {
 
   return (
     <div className="p-4 space-y-4">
-      <h1 className="text-2xl font-bold text-gray-900">Templates</h1>
-      <p className="text-gray-500">Start with a pre-made routine</p>
+      <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Templates</h1>
+      <p className="text-gray-500 dark:text-gray-400">Start with a pre-made routine</p>
 
       {templates.length === 0 ? (
-        <div className="bg-white rounded-xl p-8 shadow-sm text-center mt-4">
-          <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
-            <FlameIcon className="text-gray-400" size={32} />
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center mt-4">
+          <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
+            <FlameIcon className="text-gray-400 dark:text-gray-500" size={32} />
           </div>
-          <h3 className="font-semibold text-gray-900 mb-1">No templates yet</h3>
-          <p className="text-gray-500 text-sm">Templates will appear here when available</p>
+          <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No templates yet</h3>
+          <p className="text-gray-500 dark:text-gray-400 text-sm">Templates will appear here when available</p>
         </div>
       ) : (
         <div className="grid gap-4">
           {templates.map((template) => (
             <div
               key={template.id}
-              className="bg-white rounded-xl p-4 shadow-sm"
+              className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm"
             >
               <div className="flex items-center gap-4">
-                <div className="w-14 h-14 bg-gradient-to-br from-indigo-100 to-pink-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                <div className="w-14 h-14 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/50 dark:to-pink-900/50 rounded-xl flex items-center justify-center flex-shrink-0">
                   <span className="text-3xl">{template.icon || '✨'}</span>
                 </div>
                 <div className="flex-1 min-w-0">
-                  <h3 className="font-semibold text-gray-900">{template.name}</h3>
+                  <h3 className="font-semibold text-gray-900 dark:text-gray-100">{template.name}</h3>
                   {template.description && (
-                    <p className="text-gray-500 text-sm truncate">{template.description}</p>
+                    <p className="text-gray-500 dark:text-gray-400 text-sm truncate">{template.description}</p>
                   )}
-                  <p className="text-gray-400 text-xs mt-1">{template.step_count} steps</p>
+                  <p className="text-gray-400 dark:text-gray-500 text-xs mt-1">{template.step_count} steps</p>
                 </div>
                 <button
                   onClick={() => handleClone(template.id)}
diff --git a/synculous-client/src/app/globals.css b/synculous-client/src/app/globals.css
index c4d8ed4..52e7cf3 100644
--- a/synculous-client/src/app/globals.css
+++ b/synculous-client/src/app/globals.css
@@ -1,10 +1,17 @@
 @import "tailwindcss";
 
+@variant dark (&:where(.dark, .dark *));
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
 }
 
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -12,13 +19,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
diff --git a/synculous-client/src/app/layout.tsx b/synculous-client/src/app/layout.tsx
index 63ba995..b592e15 100644
--- a/synculous-client/src/app/layout.tsx
+++ b/synculous-client/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { AuthProvider } from "@/components/auth/AuthProvider";
+import { ThemeProvider } from "@/components/theme/ThemeProvider";
 
 export const metadata: Metadata = {
   title: "Synculous",
@@ -31,9 +32,16 @@ export default function RootLayout({
         <link rel="apple-touch-icon" href="/icon-192.png" />
       </head>
       <body className="antialiased">
-        <AuthProvider>
-          {children}
-        </AuthProvider>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark')})()`,
+          }}
+        />
+        <ThemeProvider>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
         <script
           dangerouslySetInnerHTML={{
             __html: `if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js')}`,
diff --git a/synculous-client/src/app/login/page.tsx b/synculous-client/src/app/login/page.tsx
index 7891dd0..e16018a 100644
--- a/synculous-client/src/app/login/page.tsx
+++ b/synculous-client/src/app/login/page.tsx
@@ -36,47 +36,47 @@ export default function LoginPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-4">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md p-8">
         <div className="flex flex-col items-center mb-8">
           <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-pink-500 rounded-2xl flex items-center justify-center mb-4">
             <HeartIcon className="text-white" size={32} />
           </div>
-          <h1 className="text-2xl font-bold text-gray-900">Synculous</h1>
-          <p className="text-gray-500 mt-1">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Synculous</h1>
+          <p className="text-gray-500 dark:text-gray-400 mt-1">
             {isLogin ? 'Welcome back!' : 'Create your account'}
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
           {error && (
-            <div className="bg-red-50 text-red-600 px-4 py-3 rounded-lg text-sm">
+            <div className="bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
               {error}
             </div>
           )}
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               Username
             </label>
             <input
               type="text"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
               placeholder="Enter your username"
               required
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               Password
             </label>
             <input
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
+              className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
               placeholder="Enter your password"
               required
             />
diff --git a/synculous-client/src/components/notifications/PushNotificationToggle.tsx b/synculous-client/src/components/notifications/PushNotificationToggle.tsx
index 8aae9a4..a87d286 100644
--- a/synculous-client/src/components/notifications/PushNotificationToggle.tsx
+++ b/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 ${
diff --git a/synculous-client/src/components/theme/ThemeProvider.tsx b/synculous-client/src/components/theme/ThemeProvider.tsx
new file mode 100644
index 0000000..238feb3
--- /dev/null
+++ b/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;
+}
