Complete dark translucent theme for all templates

Update all HTML templates to match terst.org styling:
- Dark semi-transparent backgrounds (bg-black/60)
- White text with opacity variants for hierarchy
- Glass effect with backdrop-blur
- Dark form inputs with subtle borders
- Updated modals and FAB button
- Login page with background image

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

7 files changed, 107 insertions, 78 deletions

diff --git a/web/templates/partials/error-banner.html b/web/templates/partials/error-banner.html
index eb4c08d..628424f 100644
--- a/web/templates/partials/error-banner.html
+++ b/web/templates/partials/error-banner.html
@@ -1,7 +1,7 @@
 {{define "error-banner"}}
 {{if .Errors}}
-<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
-    <p class="font-bold">Errors:</p>
+<div class="bg-red-900/50 border border-red-500/30 text-red-300 px-4 py-3 rounded-lg mb-6">
+    <p class="font-medium">Errors:</p>
     <ul class="list-disc list-inside">
         {{range .Errors}}
         <li>{{.}}</li>
diff --git a/web/templates/partials/planning-tab.html b/web/templates/partials/planning-tab.html
index f2beda5..17879ff 100644
--- a/web/templates/partials/planning-tab.html
+++ b/web/templates/partials/planning-tab.html
@@ -1,6 +1,35 @@
 {{define "planning-tab"}}
 <div class="space-y-6">
+    <!-- Google Calendar Events -->
+    {{if .Events}}
+    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-white/10">
+        <h2 class="text-xl font-semibold mb-4 flex items-center gap-2 text-shadow-sm">
+            <span>📅</span> Upcoming Events
+        </h2>
+        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {{range .Events}}
+            <a href="{{.HTMLLink}}" target="_blank" class="block bg-white/5 hover:bg-white/10 transition-colors rounded-lg p-3 border border-white/5 group">
+                <div class="flex justify-between items-start mb-1">
+                    <h3 class="font-medium text-white group-hover:text-primary-300 transition-colors truncate">{{.Summary}}</h3>
+                    <span class="text-xs text-white/50 bg-white/10 px-1.5 py-0.5 rounded">{{.Start.Format "Jan 2"}}</span>
+                </div>
+                <div class="text-xs text-white/60 mb-1">
+                    {{if eq (.Start.Format "15:04") "00:00"}}
+                        All Day
+                    {{else}}
+                        {{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}
+                    {{end}}
+                </div>
+                {{if .Description}}
+                <p class="text-xs text-white/40 line-clamp-2">{{.Description}}</p>
+                {{end}}
+            </a>
+            {{end}}
+        </div>
+    </div>
+    {{end}}
+
     <!-- Trello Boards Section -->
     {{template "trello-boards" .}}
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/templates/partials/plantoeat-meals.html b/web/templates/partials/plantoeat-meals.html
index 78e403e..1f016ef 100644
--- a/web/templates/partials/plantoeat-meals.html
+++ b/web/templates/partials/plantoeat-meals.html
@@ -1,19 +1,19 @@
 {{define "plantoeat-meals"}}
-<section class="card">
+<section class="card text-shadow-sm">
     <!-- Section Header with Brand Color -->
     <div class="flex items-center gap-3 mb-6">
         <div class="w-1 h-8 bg-plantoeat rounded"></div>
-        <h2 class="text-2xl font-bold text-gray-900">Upcoming Meals</h2>
+        <h2 class="text-2xl font-light text-white tracking-wide">Upcoming Meals</h2>
     </div>
 
     {{if .Meals}}
     <div class="space-y-3">
         {{range .Meals}}
-        <div class="border-l-4 border-plantoeat bg-green-50/50 pl-4 py-3 rounded-r-lg hover:bg-green-50 transition-colors">
-            <p class="font-medium text-gray-900">{{.RecipeName}}</p>
+        <div class="border-l-4 border-plantoeat bg-black/30 pl-4 py-3 rounded-r-lg hover:bg-black/40 transition-colors">
+            <p class="font-medium text-white">{{.RecipeName}}</p>
             <div class="flex justify-between items-center mt-2">
-                <span class="text-sm text-gray-600">{{.Date.Format "Mon, Jan 2"}}</span>
-                <span class="badge bg-green-100 text-green-800 capitalize">
+                <span class="text-sm text-white/60">{{.Date.Format "Mon, Jan 2"}}</span>
+                <span class="badge bg-green-900/50 text-green-300 capitalize">
                     {{.MealType}}
                 </span>
             </div>
@@ -22,11 +22,11 @@
     </div>
     {{else}}
     <div class="text-center py-16">
-        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mx-auto h-12 w-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
         </svg>
-        <h3 class="mt-4 text-lg font-medium text-gray-900">No meals planned</h3>
-        <p class="mt-2 text-sm text-gray-500">
+        <h3 class="mt-4 text-lg font-medium text-white">No meals planned</h3>
+        <p class="mt-2 text-sm text-white/50">
             Schedule your meals to see them here.
         </p>
     </div>
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index afbbe2c..92e7979 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -1,19 +1,19 @@
 {{define "tasks-tab"}}
-<div class="space-y-6"
+<div class="space-y-6 text-shadow-sm"
      hx-get="/tabs/tasks"
      hx-trigger="refresh-tasks from:body"
      hx-target="#tab-content"
      hx-swap="innerHTML">
     <!-- Quick Add Form - Collapsible -->
-    <section class="bg-white rounded-lg shadow-sm">
+    <section class="card">
         <button type="button"
                 onclick="document.getElementById('quick-add-form').classList.toggle('hidden')"
                 class="w-full p-3 sm:p-4 text-left flex justify-between items-center">
-            <span class="font-semibold text-gray-900">+ Quick Add</span>
-            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+            <span class="font-medium text-white">+ Quick Add</span>
+            <svg class="w-4 h-4 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
         </button>
         <form id="quick-add-form"
-              class="hidden p-3 sm:p-4 pt-0 border-t border-gray-100"
+              class="hidden p-3 sm:p-4 pt-0 border-t border-white/10"
               hx-post="/unified-add"
               hx-swap="none"
               hx-on::after-request="if(event.detail.successful) { this.reset(); document.getElementById('trello-fields').style.display = 'none'; }">
@@ -22,14 +22,14 @@
                     <input type="text"
                            name="title"
                            placeholder="Task name..."
-                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                           class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30"
                            required>
                 </div>
                 <div>
                     <input type="date"
                            name="due_date"
                            id="quick-add-date"
-                           class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500">
+                           class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30">
                     <script>
                         (function() {
                             var d = new Date();
@@ -40,14 +40,14 @@
                 </div>
                 <div>
                     <select name="source"
-                            class="border border-gray-300 rounded-lg px-2 py-2 text-sm focus:ring-2 focus:ring-primary-500"
+                            class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30"
                             onchange="document.getElementById('trello-fields').style.display = this.value === 'trello' ? 'flex' : 'none'">
                         <option value="todoist">Todoist</option>
                         <option value="trello">Trello</option>
                     </select>
                 </div>
                 <button type="submit"
-                        class="bg-primary-600 hover:bg-primary-700 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
+                        class="bg-white/20 hover:bg-white/30 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
                     Add
                 </button>
             </div>
@@ -56,7 +56,7 @@
             <div id="trello-fields" class="flex flex-wrap gap-2 mt-3" style="display: none;">
                 <div>
                     <select name="board_id"
-                            class="border border-gray-300 rounded-lg px-2 py-2 text-sm"
+                            class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white"
                             hx-get="/partials/lists"
                             hx-target="#list-select"
                             hx-trigger="change"
@@ -68,7 +68,7 @@
                     </select>
                 </div>
                 <div>
-                    <select id="list-select" name="list_id" class="border border-gray-300 rounded-lg px-2 py-2 text-sm">
+                    <select id="list-select" name="list_id" class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white">
                         <option value="">Select List...</option>
                     </select>
                 </div>
@@ -80,7 +80,7 @@
     {{if .Atoms}}
     <div class="space-y-2">
         {{range .Atoms}}
-        <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
+        <div class="task-item border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
             <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                 <!-- Checkbox for completing -->
                 <input type="checkbox"
@@ -88,81 +88,81 @@
                        hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
                        hx-target="closest .task-item"
                        hx-swap="outerHTML"
-                       class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+                       class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                 <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
                 <div class="flex-1 min-w-0">
                     <div class="flex items-start justify-between gap-2">
-                        <h3 class="text-sm {{if .IsOverdue}}text-red-600 font-semibold{{else if .IsFuture}}text-gray-400 font-normal{{else}}text-gray-900 font-medium{{end}} break-words cursor-pointer hover:underline"
+                        <h3 class="text-sm {{if .IsOverdue}}text-red-400 font-semibold{{else if .IsFuture}}text-white/50 font-normal{{else}}text-white font-medium{{end}} break-words cursor-pointer hover:underline"
                             hx-get="/tasks/detail?id={{.ID}}&source={{.Source}}"
                             hx-target="#task-edit-content"
                             hx-swap="innerHTML"
                             onclick="document.getElementById('task-edit-modal').classList.remove('hidden')">{{.Title}}</h3>
                         {{if .URL}}
-                        <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0" onclick="event.stopPropagation()">
+                        <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white flex-shrink-0" onclick="event.stopPropagation()">
                             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                             </svg>
                         </a>
                         {{end}}
                     </div>
-                    <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+                    <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
                         {{if .DueDate}}
-                        <span class="{{if .IsOverdue}}text-red-500 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+                        <span class="{{if .IsOverdue}}text-red-400 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
                         {{end}}
                         {{if gt .Priority 2}}
-                        <span class="text-red-500 font-medium">P{{.Priority}}</span>
+                        <span class="text-red-400 font-medium">P{{.Priority}}</span>
                         {{end}}
                         {{if .Description}}
-                        <span class="text-gray-400">+details</span>
+                        <span class="text-white/40">+details</span>
                         {{end}}
                     </div>
                 </div>
             </div>
             {{if .Description}}
-            <details class="border-t border-gray-100">
-                <summary class="px-3 sm:px-4 py-2 text-xs text-gray-500 cursor-pointer hover:bg-gray-50">Tap to expand</summary>
-                <div class="px-3 sm:px-4 pb-3 text-sm text-gray-600">{{.Description}}</div>
+            <details class="border-t border-white/10">
+                <summary class="px-3 sm:px-4 py-2 text-xs text-white/50 cursor-pointer hover:bg-white/5">Tap to expand</summary>
+                <div class="px-3 sm:px-4 pb-3 text-sm text-white/70">{{.Description}}</div>
             </details>
             {{end}}
         </div>
         {{end}}
     </div>
     {{else}}
-    <div class="bg-white/50 rounded-lg p-6 text-center">
-        <p class="text-gray-500 text-sm">No current tasks.</p>
+    <div class="card p-6 text-center">
+        <p class="text-white/50 text-sm">No current tasks.</p>
     </div>
     {{end}}
 
     <!-- Future Tasks (Collapsed by default) -->
     {{if .FutureAtoms}}
     <details class="mt-4">
-        <summary class="bg-white/70 rounded-lg p-3 cursor-pointer hover:bg-white/90 transition-colors text-sm text-gray-600 flex items-center justify-between">
+        <summary class="bg-black/40 backdrop-blur-sm rounded-lg p-3 cursor-pointer hover:bg-black/50 transition-colors text-sm text-white/60 flex items-center justify-between">
             <span>+{{len .FutureAtoms}} later</span>
             <svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
         </summary>
         <div class="space-y-2 mt-2">
             {{range .FutureAtoms}}
-            <div class="task-item bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} opacity-60">
+            <div class="task-item border-l-4 {{.ColorClass}} opacity-60">
                 <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                     <input type="checkbox"
                            hx-post="/complete-atom"
                            hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
                            hx-target="closest .task-item"
                            hx-swap="outerHTML"
-                           class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer flex-shrink-0">
+                           class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                     <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
                     <div class="flex-1 min-w-0">
                         <div class="flex items-start justify-between gap-2">
-                            <h3 class="text-sm text-gray-400 font-normal break-words">{{.Title}}</h3>
+                            <h3 class="text-sm text-white/50 font-normal break-words">{{.Title}}</h3>
                             {{if .URL}}
-                            <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0">
+                            <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white/70 flex-shrink-0">
                                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                 </svg>
                             </a>
                             {{end}}
                         </div>
-                        <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+                        <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/40">
                             {{if .DueDate}}
                             <span>{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
                             {{end}}
diff --git a/web/templates/partials/todoist-tasks.html b/web/templates/partials/todoist-tasks.html
index 25faf47..3296745 100644
--- a/web/templates/partials/todoist-tasks.html
+++ b/web/templates/partials/todoist-tasks.html
@@ -1,30 +1,30 @@
 {{define "todoist-tasks"}}
-<section class="card" id="todoist-list">
+<section class="card text-shadow-sm" id="todoist-list">
     <!-- Section Header with Brand Color -->
     <div class="flex items-center gap-3 mb-6">
         <div class="w-1 h-8 bg-todoist rounded"></div>
-        <h2 class="text-2xl font-bold text-gray-900">Todoist Tasks</h2>
+        <h2 class="text-2xl font-light text-white tracking-wide">Todoist Tasks</h2>
     </div>
 
     <!-- Quick Add Form -->
     {{if .Projects}}
     <details class="mb-6" open>
-        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors mb-2">
+        <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors mb-2">
             + Quick Add Task
         </summary>
         <form hx-post="/tasks"
               hx-target="#todoist-list"
               hx-swap="outerHTML"
-              class="mt-3 space-y-3 bg-white/40 p-4 rounded-lg">
+              class="mt-3 space-y-3 bg-black/30 p-4 rounded-lg">
 
             <input type="text"
                    name="content"
                    placeholder="Task content"
                    required
-                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                   class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-transparent">
 
             <select name="project_id"
-                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white focus:ring-2 focus:ring-white/30 focus:border-transparent">
                 <option value="">Select project (optional)...</option>
                 {{range .Projects}}
                 <option value="{{.ID}}">{{.Name}}</option>
@@ -32,7 +32,7 @@
             </select>
 
             <button type="submit"
-                    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                    class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                 Add Task
             </button>
         </form>
@@ -51,31 +51,31 @@
                    hx-vals='{"task_id": "{{.ID}}"}'
                    hx-target="closest .todoist-task-item"
                    hx-swap="outerHTML"
-                   class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+                   class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer">
 
             <div class="flex-1">
-                <p class="font-medium text-gray-900 {{if .Completed}}line-through text-gray-500{{end}}">
+                <p class="font-medium text-white {{if .Completed}}line-through text-white/50{{end}}">
                     {{.Content}}
                 </p>
                 {{if .Description}}
-                <p class="text-sm text-gray-600 mt-1">{{.Description}}</p>
+                <p class="text-sm text-white/60 mt-1">{{.Description}}</p>
                 {{end}}
                 <div class="flex flex-wrap gap-2 mt-2">
                     {{if .ProjectName}}
-                    <span class="badge bg-gray-100 text-gray-700">{{.ProjectName}}</span>
+                    <span class="badge bg-white/10 text-white/70">{{.ProjectName}}</span>
                     {{end}}
                     {{if .DueDate}}
-                    <span class="badge bg-yellow-100 text-yellow-800">
+                    <span class="badge bg-yellow-900/50 text-yellow-300">
                         Due: {{.DueDate.Format "Jan 2"}}
                     </span>
                     {{end}}
                     {{range .Labels}}
-                    <span class="badge bg-blue-100 text-blue-800">{{.}}</span>
+                    <span class="badge bg-blue-900/50 text-blue-300">{{.}}</span>
                     {{end}}
                 </div>
             </div>
             {{if .URL}}
-            <a href="{{.URL}}" target="_blank" class="text-todoist hover:text-todoist/80 transition-colors">
+            <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white transition-colors">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                 </svg>
@@ -86,11 +86,11 @@
     </div>
     {{else}}
     <div class="text-center py-16">
-        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mx-auto h-12 w-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
-        <h3 class="mt-4 text-lg font-medium text-gray-900">No tasks found</h3>
-        <p class="mt-2 text-sm text-gray-500">
+        <h3 class="mt-4 text-lg font-medium text-white">No tasks found</h3>
+        <p class="mt-2 text-sm text-white/50">
             All tasks completed or no tasks available.
         </p>
     </div>
diff --git a/web/templates/partials/trello-board.html b/web/templates/partials/trello-board.html
index 0b176cd..513c6e6 100644
--- a/web/templates/partials/trello-board.html
+++ b/web/templates/partials/trello-board.html
@@ -2,24 +2,24 @@
 <div class="board-card">
     <!-- Board Header -->
     <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-lg text-gray-900">{{.Name}}</h3>
+        <h3 class="font-medium text-lg text-white">{{.Name}}</h3>
     </div>
 
     <!-- Add Card Form (Collapsible) -->
     {{if .Lists}}
     <details class="mb-4">
-        <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
+        <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors">
             + Add Card
         </summary>
         <form hx-post="/cards"
               hx-target="closest .board-card"
               hx-swap="outerHTML"
-              class="mt-3 space-y-2 bg-white/40 p-3 rounded-lg">
+              class="mt-3 space-y-2 bg-black/30 p-3 rounded-lg">
             <input type="hidden" name="board_id" value="{{.ID}}">
 
             <select name="list_id"
                     required
-                    class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white focus:ring-2 focus:ring-white/30 focus:border-transparent">
                 <option value="">Select list...</option>
                 {{range .Lists}}
                 <option value="{{.ID}}">{{.Name}}</option>
@@ -30,10 +30,10 @@
                    name="name"
                    placeholder="Card title"
                    required
-                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                   class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-transparent">
 
             <button type="submit"
-                    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                    class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                 Add Card
             </button>
         </form>
@@ -51,24 +51,24 @@
                        hx-vals='{"card_id": "{{.ID}}"}'
                        hx-target="closest .trello-card-item"
                        hx-swap="outerHTML"
-                       class="mt-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
+                       class="mt-1 h-4 w-4 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer">
 
                 <div class="flex-1">
-                    <p class="font-medium text-sm text-gray-900 mb-2">{{.Name}}</p>
+                    <p class="font-medium text-sm text-white mb-2">{{.Name}}</p>
                     <div class="flex flex-wrap gap-2 items-center">
                         {{if .ListName}}
-                        <span class="badge bg-gray-100 text-gray-700">
+                        <span class="badge bg-white/10 text-white/70">
                             {{.ListName}}
                         </span>
                         {{end}}
                         {{if .DueDate}}
-                        <span class="badge bg-red-100 text-red-800">
+                        <span class="badge bg-red-900/50 text-red-300">
                             Due: {{.DueDate.Format "Jan 2"}}
                         </span>
                         {{end}}
                         {{if .URL}}
                         <a href="{{.URL}}" target="_blank"
-                           class="text-trello hover:text-trello/80 text-xs font-medium ml-auto transition-colors">
+                           class="text-white/70 hover:text-white text-xs font-medium ml-auto transition-colors">
                             View →
                         </a>
                         {{end}}
diff --git a/web/templates/partials/trello-boards.html b/web/templates/partials/trello-boards.html
index 3d42517..d51446d 100644
--- a/web/templates/partials/trello-boards.html
+++ b/web/templates/partials/trello-boards.html
@@ -1,10 +1,10 @@
 {{define "trello-boards"}}
 {{if .Boards}}
-<section class="card section-spacing">
+<section class="card section-spacing text-shadow-sm">
     <!-- Section Header with Brand Color -->
     <div class="flex items-center gap-3 mb-6">
         <div class="w-1 h-8 bg-trello rounded"></div>
-        <h2 class="text-2xl font-bold text-gray-900">Trello Boards</h2>
+        <h2 class="text-2xl font-light text-white tracking-wide">Trello Boards</h2>
     </div>
 
     <!-- Active Boards Grid (boards with cards) -->
@@ -17,12 +17,12 @@
     </div>
 
     <!-- Empty Boards Collapsible (boards without cards) -->
-    <details class="mt-6 border-t border-gray-200 pt-6">
+    <details class="mt-6 border-t border-white/10 pt-6">
         <summary class="cursor-pointer flex items-center justify-between group">
-            <span class="text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors">
+            <span class="text-sm font-medium text-white/50 group-hover:text-white/80 transition-colors">
                 Empty Boards
             </span>
-            <svg class="w-5 h-5 text-gray-400 group-hover:text-gray-600 transition-all"
+            <svg class="w-5 h-5 text-white/40 group-hover:text-white/60 transition-all"
                  fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
             </svg>
@@ -31,9 +31,9 @@
             <div class="card-grid">
                 {{range .Boards}}
                 {{if not .Cards}}
-                <div class="border border-gray-200 rounded-lg p-4 bg-gray-50 opacity-70 hover:opacity-100 transition-opacity">
-                    <h3 class="font-semibold text-gray-700">{{.Name}}</h3>
-                    <p class="text-sm text-gray-500 mt-2">No cards</p>
+                <div class="border border-white/10 rounded-lg p-4 bg-black/30 opacity-70 hover:opacity-100 transition-opacity">
+                    <h3 class="font-medium text-white/70">{{.Name}}</h3>
+                    <p class="text-sm text-white/40 mt-2">No cards</p>
                 </div>
                 {{end}}
                 {{end}}