diff --git a/src/lib/components/ChapterGuess.svelte b/src/lib/components/ChapterGuess.svelte
index 8e20f5b..082daf9 100644
--- a/src/lib/components/ChapterGuess.svelte
+++ b/src/lib/components/ChapterGuess.svelte
@@ -167,7 +167,7 @@
 </script>
 
 <Container
-	class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 text-gray-800 shadow-md"
+	class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 dark:from-amber-900/40 dark:to-yellow-900/30 text-gray-800 dark:text-gray-100 shadow-md"
 >
 	<div class="text-center">
 		<p class="font-bold mb-3 text-lg sm:text-xl">
@@ -193,8 +193,8 @@
 							? isCorrect
 								? "bg-green-500 text-white border-green-600 shadow-lg"
 								: "bg-red-400 text-white border-red-500"
-							: "bg-white/30 text-gray-400 border-gray-300 opacity-40"
-					: "bg-white/80 hover:bg-white text-gray-800 border-gray-300 hover:border-amber-400 hover:shadow-md cursor-pointer"
+							: "bg-white/30 dark:bg-white/10 text-gray-400 border-gray-300 dark:border-gray-600 opacity-40"
+					: "bg-white/80 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 text-gray-800 dark:text-gray-100 border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500 hover:shadow-md cursor-pointer"
 			}
           `}
 				>
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
index 42cc4a0..018aa14 100644
--- a/src/lib/components/Container.svelte
+++ b/src/lib/components/Container.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-  class="inline-flex flex-col items-center bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 shadow-sm {className}"
+  class="inline-flex flex-col items-center bg-white/10 dark:bg-white/5 backdrop-blur-sm rounded-2xl border border-white/20 dark:border-white/10 shadow-sm {className}"
 >
   {@render children()}
 </div>
diff --git a/src/lib/components/CountdownTimer.svelte b/src/lib/components/CountdownTimer.svelte
index 886c008..fea69ee 100644
--- a/src/lib/components/CountdownTimer.svelte
+++ b/src/lib/components/CountdownTimer.svelte
@@ -52,28 +52,28 @@
 
 <div class="w-full flex flex-col flex-1">
 	<div
-		class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full flex-1"
+		class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm w-full flex-1"
 	>
 		{#if newVerseReady}
 			<p
-				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
 			>
 				Next Verse In
 			</p>
 			<p class="text-4xl font-triodion font-black text-gray-800">Now</p>
 			<p
-				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-2"
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mt-2"
 			>
 				(refresh page to see the new verse)
 			</p>
 		{:else}
 			<p
-				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
 			>
 				Next Verse In
 			</p>
 			<p
-				class="text-4xl font-triodion font-black text-gray-800 tabular-nums whitespace-nowrap"
+				class="text-4xl font-triodion font-black text-gray-800 dark:text-gray-100 tabular-nums whitespace-nowrap"
 			>
 				{timeUntilNext}
 			</p>
diff --git a/src/lib/components/Credits.svelte b/src/lib/components/Credits.svelte
index c5208d9..c9aa56e 100644
--- a/src/lib/components/Credits.svelte
+++ b/src/lib/components/Credits.svelte
@@ -6,9 +6,11 @@
 
 <div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
 	<div
-		class="flex flex-col items-center gap-2 bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
+		class="flex flex-col items-center gap-2 bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm"
 	>
-		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+		<p
+			class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-300 font-bold"
+		>
 			A project by George Powell & Silent Summit Co.
 		</p>
 		<!-- <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
@@ -39,7 +41,7 @@
 			<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
 		</a>
 
-		<div class="w-0.5 h-8 bg-gray-400"></div>
+		<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
 
 		<a
 			href="https://x.com/pupperpowell"
@@ -53,7 +55,7 @@
 			<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
 		</a>
 
-		<div class="w-0.5 h-8 bg-gray-400"></div>
+		<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
 
 		<a
 			href="mailto:george+bibdle@silentsummit.co"
@@ -63,7 +65,7 @@
 			onclick={() => (window as any).rybbit?.event("Email clicked")}
 		>
 			<svg
-				class="w-8 h-8 text-gray-700"
+				class="w-8 h-8 text-gray-700 dark:text-gray-300"
 				fill="none"
 				stroke="currentColor"
 				viewBox="0 0 24 24"
diff --git a/src/lib/components/GuessesTable.svelte b/src/lib/components/GuessesTable.svelte
index b1d36a3..16665df 100644
--- a/src/lib/components/GuessesTable.svelte
+++ b/src/lib/components/GuessesTable.svelte
@@ -66,10 +66,10 @@
 
 {#if !hasGuesses}
 	<Container class="p-6 text-center">
-		<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
+		<h2 class="font-triodion text-xl italic mb-3 text-gray-800 dark:text-gray-100">
 			Instructions
 		</h2>
-		<p class="text-gray-700 leading-relaxed italic">
+		<p class="text-gray-700 dark:text-gray-300 leading-relaxed italic">
 			Guess what book of the bible you think the verse is from. You will
 			get clues to help you after each guess.
 		</p>
@@ -78,25 +78,25 @@
 	<div class="space-y-3">
 		<!-- Column Headers -->
 		<div
-			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
+			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400 dark:border-gray-600"
 		>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				Testament
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				Section
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				First Letter
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				Book
 			</div>
diff --git a/src/lib/components/SearchInput.svelte b/src/lib/components/SearchInput.svelte
index eeae1c7..8916783 100644
--- a/src/lib/components/SearchInput.svelte
+++ b/src/lib/components/SearchInput.svelte
@@ -127,21 +127,17 @@
 </script>
 
 {#if showBanner}
-  <div
-    class="mb-3 flex items-center gap-2 px-4 py-2 rounded-full text-xs font-medium border w-fit transition-all duration-300
-      {bannerIsIndigo
-      ? 'bg-indigo-50 border-indigo-200 text-indigo-700'
-      : 'bg-amber-50 border-amber-200 text-amber-700'}"
+  <p
+    class="mb-3 text-xs font-medium text-gray-500 dark:text-gray-400"
     role="status"
     aria-live="polite"
   >
-    <span aria-hidden="true" class="text-[10px] leading-none">✦</span>
     {#if bannerIsIndigo}
       Testament &amp; section groups now visible
     {:else}
       Old &amp; New Testament groups now visible
     {/if}
-  </div>
+  </p>
 {/if}
 
 <div class="relative">
@@ -164,13 +160,13 @@
     <input
       bind:value={searchQuery}
       placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
-      class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-200 transition-all bg-white"
+      class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 dark:border-gray-600 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900/50 transition-all bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
       onkeydown={handleKeydown}
       autocomplete="off"
     />
     {#if searchQuery}
       <button
-        class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+        class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
         onclick={() => (searchQuery = "")}
         aria-label="Clear search"
       >
@@ -195,7 +191,7 @@
 
   {#if searchQuery && filteredBooks.length > 0}
     <ul
-      class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-300 rounded-2xl shadow-xl"
+      class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl shadow-xl"
       role="listbox"
     >
       {#if displayMode === "simple"}
@@ -210,8 +206,8 @@
               tabindex={guessedIds.has(book.id) ? -1 : 0}
             >
               <span
-                class="font-semibold {guessedIds.has(book.id)
-                  ? 'line-through text-gray-400'
+                class="font-semibold dark:text-gray-100 {guessedIds.has(book.id)
+                  ? 'line-through text-gray-400 dark:text-gray-500'
                   : ''}"
               >
                 {book.name}
@@ -223,29 +219,29 @@
         {#each testamentGroups as group (group.testament)}
           <li role="presentation">
             <div
-              class="px-5 py-2 flex items-center gap-3 bg-gray-50 border-b border-gray-100"
+              class="px-5 py-2 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
             >
               <span
-                class="text-xs font-semibold uppercase tracking-wider text-gray-400"
+                class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-400"
               >
                 {group.label}
               </span>
-              <div class="flex-1 h-px bg-gray-200"></div>
+              <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
             </div>
             <ul>
               {#each group.books as book (book.id)}
                 <li role="option" aria-selected={guessedIds.has(book.id)}>
                   <button
-                    class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all
+                    class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
                       {guessedIds.has(book.id)
                       ? 'opacity-50 cursor-not-allowed pointer-events-none'
-                      : 'hover:bg-blue-50 hover:text-blue-700'}"
+                      : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
                     onclick={() => submitGuess(book.id)}
                     tabindex={guessedIds.has(book.id) ? -1 : 0}
                   >
                     <span
                       class="font-semibold {guessedIds.has(book.id)
-                        ? 'line-through text-gray-400'
+                        ? 'line-through text-gray-400 dark:text-gray-500'
                         : ''}"
                     >
                       {book.name}
@@ -261,40 +257,40 @@
           <li role="presentation">
             {#if group.showTestamentHeader}
               <div
-                class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 border-b border-gray-100"
+                class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
               >
                 <span
-                  class="text-xs font-bold uppercase tracking-wider text-gray-500"
+                  class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {group.testamentLabel}
                 </span>
-                <div class="flex-1 h-px bg-gray-200"></div>
+                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
               </div>
             {/if}
             <div
-              class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 border-b border-gray-100"
+              class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 dark:bg-gray-700/30 border-b border-gray-100 dark:border-gray-700"
             >
               <span
-                class="text-[11px] font-medium uppercase tracking-wider text-gray-400"
+                class="text-[11px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500"
               >
                 {group.section}
               </span>
-              <div class="flex-1 h-px bg-gray-100"></div>
+              <div class="flex-1 h-px bg-gray-100 dark:bg-gray-600"></div>
             </div>
             <ul>
               {#each group.books as book (book.id)}
                 <li role="option" aria-selected={guessedIds.has(book.id)}>
                   <button
-                    class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all
+                    class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
                       {guessedIds.has(book.id)
                       ? 'opacity-50 cursor-not-allowed pointer-events-none'
-                      : 'hover:bg-blue-50 hover:text-blue-700'}"
+                      : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
                     onclick={() => submitGuess(book.id)}
                     tabindex={guessedIds.has(book.id) ? -1 : 0}
                   >
                     <span
                       class="font-semibold {guessedIds.has(book.id)
-                        ? 'line-through text-gray-400'
+                        ? 'line-through text-gray-400 dark:text-gray-500'
                         : ''}"
                     >
                       {book.name}
@@ -308,6 +304,6 @@
       {/if}
     </ul>
   {:else if searchQuery}
-    <p class="mt-4 text-center text-gray-500 p-8">No books found</p>
+    <p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">No books found</p>
   {/if}
 </div>
diff --git a/src/lib/components/StreakCounter.svelte b/src/lib/components/StreakCounter.svelte
index ebc5262..f40044b 100644
--- a/src/lib/components/StreakCounter.svelte
+++ b/src/lib/components/StreakCounter.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 shadow-sm flex-1 text-center"
+	class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm flex-1 text-center"
 >
 	<p
 		class="text-5xl font-triodion font-black text-orange-500 leading-none tabular-nums"
@@ -17,13 +17,13 @@
 		{streak}
 	</p>
 	<p
-		class="text-xs uppercase justify-center tracking-widest text-gray-500 font-triodion font-bold py-2 leading-tight"
+		class="text-xs uppercase justify-center tracking-widest text-gray-500 dark:text-gray-200 font-triodion font-bold py-2 leading-tight"
 	>
 		day{streak === 1 ? "" : "s"} in a row
 	</p>
 	{#if streakPercentile !== null && streakPercentile <= 50}
 		<p
-			class="text-xs text-black w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 pt-2"
+			class="text-xs text-black dark:text-gray-200 w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 dark:border-t-stone-600 pt-2"
 		>
 			Top {streakPercentile}%
 		</p>
diff --git a/src/lib/components/VerseDisplay.svelte b/src/lib/components/VerseDisplay.svelte
index 8cd3439..01949f4 100644
--- a/src/lib/components/VerseDisplay.svelte
+++ b/src/lib/components/VerseDisplay.svelte
@@ -63,9 +63,11 @@
 	}
 </script>
 
-<Container class="w-full p-8 sm:p-12 bg-white/70 overflow-hidden">
+<Container
+	class="w-full p-8 sm:p-12 bg-white/70 dark:bg-black/30 overflow-hidden"
+>
 	<blockquote
-		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
+		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 dark:text-gray-200 text-center"
 	>
 		{displayVerseText}
 	</blockquote>
@@ -76,7 +78,7 @@
 		{#if showReference}
 			<p
 				transition:fade={{ duration: 400 }}
-				class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+				class="text-center text-lg! big-text text-green-600! dark:text-green-400! font-bold mt-8 bg-white/70 dark:bg-black/50 rounded-xl px-4 py-2"
 			>
 				{displayReference}
 			</p>
diff --git a/src/lib/components/WinScreen.svelte b/src/lib/components/WinScreen.svelte
index 42d0fff..2659a8a 100644
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -122,7 +122,7 @@
 
 <div class="flex flex-col gap-6">
 	<Container
-		class="w-full px-4 sm:px-6 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
+		class="w-full px-4 sm:px-6 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 dark:text-gray-100 shadow-2xl text-center fade-in"
 	>
 		<div class="flex flex-col gap-3">
 			<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
@@ -168,7 +168,7 @@
 	<!-- Statistics Display -->
 	{#if statsData}
 		<Container
-			class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+			class="w-full p-4 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
 		>
 			<div
 				class="grid grid-cols-3 gap-4 gap-x-8 text-center"
@@ -177,7 +177,7 @@
 				<!-- Solve Rank Column -->
 				<div class="flex flex-col">
 					<div
-						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
 					>
 						#{statsData.solveRank}
 					</div>
@@ -190,7 +190,7 @@
 				<!-- Guess Rank Column -->
 				<div class="flex flex-col">
 					<div
-						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
 					>
 						{toOrdinal(statsData.guessRank)}
 					</div>
@@ -212,7 +212,7 @@
 				<!-- Average Column -->
 				<div class="flex flex-col">
 					<div
-						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
 					>
 						{statsData.averageGuesses}
 					</div>
@@ -226,7 +226,7 @@
 		</Container>
 	{:else if !statsSubmitted}
 		<Container
-			class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+			class="w-full p-6 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
 		>
 			<div class="text-sm opacity-80">Submitting stats...</div>
 		</Container>
@@ -352,6 +352,13 @@
 		overflow: hidden;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.share-card {
+			background: oklch(22% 0.025 298.626);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+
 	.share-card::before {
 		content: "";
 		position: absolute;
@@ -372,6 +379,12 @@
 		gap: 0.6rem;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.chat-window {
+			--bg: oklch(22% 0.025 298.626);
+		}
+	}
+
 	/* ── Bubble wrappers ── */
 	.bubble-wrapper {
 		display: flex;
@@ -525,6 +538,12 @@
 		margin-top: -6px;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.copy-hint {
+			color: #aaa;
+		}
+	}
+
 	/* ── Snippet toggle row ── */
 	.snippet-toggle-row {
 		display: flex;
@@ -541,6 +560,12 @@
 		user-select: none;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.snippet-label {
+			color: #999;
+		}
+	}
+
 	.snippet-toggle {
 		position: relative;
 		width: 36px;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0d14b8d..2639ad9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -283,10 +283,10 @@
 	<title>A daily bible game{isDev ? " (dev)" : ""}</title>
 </svelte:head>
 
-<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
+<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 dark:md:from-gray-900 dark:md:to-slate-950 py-8">
 	<div class="w-full max-w-3xl mx-auto px-4">
 		<h1
-			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
+			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 dark:text-gray-300 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
 		>
 			<TitleAnimation />
 			<div class="font-normal"></div>
@@ -375,7 +375,7 @@
 				</div>
 
 				<div
-					class="text-xs text-gray-600 bg-gray-100 px-3 py-2 rounded border"
+					class="text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded border dark:border-gray-700"
 				>
 					<div><strong>Debug Info:</strong></div>
 					<div>
@@ -413,7 +413,7 @@
 
 		{#if user && session}
 			<div
-				class="mt-6 pt-4 border-t border-gray-200 text-center text-xs text-gray-400"
+				class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center text-xs text-gray-400 dark:text-gray-500"
 			>
 				Signed in as {[user.firstName, user.lastName]
 					.filter(Boolean)
diff --git a/src/routes/layout.css b/src/routes/layout.css
index a2aae8e..99419b9 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -10,6 +10,12 @@ html, body {
 	background: oklch(89.126% 0.06134 298.626);
 }
 
+@media (prefers-color-scheme: dark) {
+	html, body {
+		background: oklch(18% 0.03 298.626);
+	}
+}
+
 .big-text {
 	font-size: 0.75rem;
 	text-transform: uppercase;
@@ -18,6 +24,12 @@ html, body {
 	font-weight: 700;
 }
 
+@media (prefers-color-scheme: dark) {
+	.big-text {
+		color: rgb(156 163 175);
+	}
+}
+
 /* Page load animations */
 @keyframes fadeInUp {
 	from {