From 91dd846fdc6a21e8d34303d428ef45a2d54f410b Mon Sep 17 00:00:00 2001
From: Mason Fox <masonfox22@gmail.com>
Date: Thu, 12 Feb 2026 08:24:30 -0500
Subject: [PATCH 1/4] feat: Add dark mode and auto mode theme support (#28)

Add three-way theme toggle (Light/Auto/Dark) with system preference
detection, localStorage persistence, and flash-prevention script.
Configure Tailwind CSS v4 class-based dark mode and apply dark variants
across all 17 component and page files using the zinc palette.
---
 app/MessageBanner.jsx                      | 18 ++---
 app/components/DualDownloadButton.jsx      |  8 +--
 app/components/DualSearchResultsList.jsx   | 32 ++++-----
 app/components/Header.jsx                  | 44 +++++++------
 app/components/MobileBottomSheet.jsx       | 18 ++---
 app/components/ProgressIndicator.jsx       | 24 +++----
 app/components/SearchForm.jsx              | 10 +--
 app/components/SearchResultItem.jsx        | 22 +++----
 app/components/SearchResultsList.jsx       |  4 +-
 app/components/SequentialSearchResults.jsx | 36 +++++-----
 app/components/ThemeProvider.jsx           | 73 +++++++++++++++++++++
 app/components/ThemeToggle.jsx             | 56 ++++++++++++++++
 app/components/TokenManager.jsx            | 76 +++++++++++-----------
 app/components/UserStatsBar.jsx            | 50 +++++++-------
 app/components/WedgeToggleButton.jsx       |  2 +-
 app/layout.js                              | 22 ++++++-
 app/login/page.jsx                         | 12 ++--
 app/page.jsx                               | 13 ++--
 app/styles/globals.css                     |  4 +-
 package-lock.json                          | 39 +++++------
 tailwind.config.mjs                        |  1 +
 21 files changed, 354 insertions(+), 210 deletions(-)
 create mode 100644 app/components/ThemeProvider.jsx
 create mode 100644 app/components/ThemeToggle.jsx

diff --git a/app/MessageBanner.jsx b/app/MessageBanner.jsx
index 6e5cae6..f882fd6 100644
--- a/app/MessageBanner.jsx
+++ b/app/MessageBanner.jsx
@@ -5,21 +5,21 @@ export default function MessageBanner({ type = "info", text }) {
   let bg, border, textColor, icon;
   switch (type) {
     case "error":
-      bg = "bg-red-100";
-      border = "border border-red-300";
-      textColor = "text-red-900";
+      bg = "bg-red-100 dark:bg-red-900/20";
+      border = "border border-red-300 dark:border-red-800/40";
+      textColor = "text-red-900 dark:text-red-300";
       icon = "❌";
       break;
     case "success":
-      bg = "bg-green-100";
-      border = "border border-green-300";
-      textColor = "text-green-900";
+      bg = "bg-green-100 dark:bg-green-900/20";
+      border = "border border-green-300 dark:border-green-800/40";
+      textColor = "text-green-900 dark:text-green-300";
       icon = "✅";
       break;
     default:
-      bg = "bg-blue-100";
-      border = "border border-blue-300";
-      textColor = "text-blue-900";
+      bg = "bg-blue-100 dark:bg-blue-900/20";
+      border = "border border-blue-300 dark:border-blue-800/40";
+      textColor = "text-blue-900 dark:text-blue-300";
       icon = "ℹ️";
   }
   return (
diff --git a/app/components/DualDownloadButton.jsx b/app/components/DualDownloadButton.jsx
index 0995590..c5edcc4 100644
--- a/app/components/DualDownloadButton.jsx
+++ b/app/components/DualDownloadButton.jsx
@@ -18,11 +18,11 @@ export default function DualDownloadButton({
 
   return (
     <div className="fixed bottom-4 left-4 right-4 z-[100] pointer-events-none">
-      <div className="bg-white rounded-lg shadow-lg p-4 space-y-3 pointer-events-auto">
+      <div className="bg-white dark:bg-zinc-800 rounded-lg shadow-lg p-4 space-y-3 pointer-events-auto">
         {/* Wedge toggles when both selected */}
         {bothSelected && hasWedges && (
-          <div className="flex items-center justify-center gap-3 pb-2 border-b border-gray-200">
-            <span className="text-sm text-gray-700 font-medium">Use FL Wedge:</span>
+          <div className="flex items-center justify-center gap-3 pb-2 border-b border-gray-200 dark:border-zinc-700">
+            <span className="text-sm text-gray-700 dark:text-zinc-300 font-medium">Use FL Wedge:</span>
             <WedgeToggleButton
               active={useBookWedge}
               onClick={onToggleBookWedge}
@@ -42,7 +42,7 @@ export default function DualDownloadButton({
         <button
           onClick={onDownload}
           disabled={disabled}
-          className="w-full rounded-md bg-pink-400 px-5 py-3 text-base font-semibold text-white hover:bg-pink-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:bg-gray-300 disabled:text-gray-600 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2"
+          className="w-full rounded-md bg-pink-400 px-5 py-3 text-base font-semibold text-white hover:bg-pink-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:bg-gray-300 disabled:text-gray-600 dark:disabled:bg-zinc-600 dark:disabled:text-zinc-400 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2"
         >
           {loading ? (
             <>
diff --git a/app/components/DualSearchResultsList.jsx b/app/components/DualSearchResultsList.jsx
index 1d0f828..8e798e1 100644
--- a/app/components/DualSearchResultsList.jsx
+++ b/app/components/DualSearchResultsList.jsx
@@ -28,7 +28,7 @@ export default function DualSearchResultsList({
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
-          <p className="text-gray-600">Searching both categories...</p>
+          <p className="text-gray-600 dark:text-zinc-400">Searching both categories...</p>
         </div>
       </div>
     );
@@ -39,7 +39,7 @@ export default function DualSearchResultsList({
   const noBooks = bookResults.length === 0;
 
   if (noResults) {
-    return <p className="text-gray-500 mt-5">No results found for either category. Try a different search...</p>;
+    return <p className="text-gray-500 dark:text-zinc-400 mt-5">No results found for either category. Try a different search...</p>;
   }
 
   // Calculate progress for desktop
@@ -91,7 +91,7 @@ export default function DualSearchResultsList({
     <button
       onClick={onDownload}
       disabled={disabled}
-      className="rounded-md bg-pink-400 px-5 py-2.5 text-sm font-semibold text-white hover:bg-pink-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:bg-gray-300 disabled:text-gray-600 disabled:cursor-not-allowed cursor-pointer min-w-[100px] flex items-center justify-center gap-2 h-full"
+      className="rounded-md bg-pink-400 px-5 py-2.5 text-sm font-semibold text-white hover:bg-pink-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:bg-gray-300 disabled:text-gray-600 dark:disabled:bg-zinc-600 dark:disabled:text-zinc-400 disabled:cursor-not-allowed cursor-pointer min-w-[100px] flex items-center justify-center gap-2 h-full"
       aria-label="Download selected book and audiobook"
     >
       {downloadLoading ? (
@@ -118,7 +118,7 @@ export default function DualSearchResultsList({
   return (
     <div className="mt-6">
       {/* Integrated Header: 2-Row Layout */}
-      <div className="mb-8 p-5 bg-white rounded-xl border border-gray-200">
+      <div className="mb-8 p-5 bg-white dark:bg-zinc-800 rounded-xl border border-gray-200 dark:border-zinc-700">
         {/* Row 1: Progress + Download Button */}
         <div className="flex items-center gap-6">
           <ProgressIndicator 
@@ -140,7 +140,7 @@ export default function DualSearchResultsList({
             {/* FL Wedge toggles */}
             {userStats?.flWedges > 0 && (selectedBook?.freeleech === false || selectedAudiobook?.freeleech === false) ? (
               <div className="flex items-center gap-3">
-                <span className="text-gray-600 font-medium">Use FL Wedge:</span>
+                <span className="text-gray-600 dark:text-zinc-400 font-medium">Use FL Wedge:</span>
                 {!selectedBook?.freeleech && (
                   <WedgeToggleButton
                     active={useBookWedge}
@@ -163,19 +163,19 @@ export default function DualSearchResultsList({
             )}
             
             {/* Center Separator */}
-            <div className="h-5 w-px bg-gray-300"></div>
+            <div className="h-5 w-px bg-gray-300 dark:bg-zinc-600"></div>
             
             {/* Combined info */}
             {combinedInfo && (
-              <div className="flex items-center gap-4 text-gray-700">
+              <div className="flex items-center gap-4 text-gray-700 dark:text-zinc-300">
                 <span className="flex items-center gap-1.5">
                   <span className="text-base">📦</span>
-                  <span className="font-semibold text-gray-900">{combinedInfo.totalSize}</span>
+                  <span className="font-semibold text-gray-900 dark:text-zinc-100">{combinedInfo.totalSize}</span>
                 </span>
-                <span className="text-gray-400">•</span>
+                <span className="text-gray-400 dark:text-zinc-500">•</span>
                 <span className="flex items-center gap-1.5">
                   <span className="text-base">📊</span>
-                  <span className="font-semibold text-gray-900">
+                  <span className="font-semibold text-gray-900 dark:text-zinc-100">
                     {combinedInfo.diff ? `${combinedInfo.projectedRatio} (${combinedInfo.diff})` : combinedInfo.projectedRatio}
                   </span>
                 </span>
@@ -189,12 +189,12 @@ export default function DualSearchResultsList({
       <div className="grid grid-cols-2 gap-6">
       {/* Left Column: Books */}
       <div>
-        <h3 className="text-base font-semibold text-gray-700 mb-4 flex items-center gap-2">
+        <h3 className="text-base font-semibold text-gray-700 dark:text-zinc-300 mb-4 flex items-center gap-2">
           📚 Books
-          <span className="text-sm font-normal text-gray-500">({bookResults.length})</span>
+          <span className="text-sm font-normal text-gray-500 dark:text-zinc-400">({bookResults.length})</span>
         </h3>
         {noBooks ? (
-          <p className="text-gray-500 text-sm">No books found</p>
+          <p className="text-gray-500 dark:text-zinc-400 text-sm">No books found</p>
         ) : (
           <ul className="list-none p-0" role="list" aria-label="Book results">
             {bookResults.map((result) => (
@@ -213,12 +213,12 @@ export default function DualSearchResultsList({
 
       {/* Right Column: Audiobooks */}
       <div>
-        <h3 className="text-base font-semibold text-gray-700 mb-4 flex items-center gap-2">
+        <h3 className="text-base font-semibold text-gray-700 dark:text-zinc-300 mb-4 flex items-center gap-2">
           🎧 Audiobooks
-          <span className="text-sm font-normal text-gray-500">({audiobookResults.length})</span>
+          <span className="text-sm font-normal text-gray-500 dark:text-zinc-400">({audiobookResults.length})</span>
         </h3>
         {noAudiobooks ? (
-          <p className="text-gray-500 text-sm">No audiobooks found</p>
+          <p className="text-gray-500 dark:text-zinc-400 text-sm">No audiobooks found</p>
         ) : (
           <ul className="list-none p-0" role="list" aria-label="Audiobook results">
             {audiobookResults.map((result) => (
diff --git a/app/components/Header.jsx b/app/components/Header.jsx
index 005562d..2dd8b50 100644
--- a/app/components/Header.jsx
+++ b/app/components/Header.jsx
@@ -2,6 +2,7 @@
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
 import TokenManager from './TokenManager';
+import ThemeToggle from './ThemeToggle';
 
 export default function Header({ onTokenUpdate, mamTokenExists }) {
   const [showTokenManager, setShowTokenManager] = useState(false);
@@ -20,31 +21,34 @@ export default function Header({ onTokenUpdate, mamTokenExists }) {
   };
 
   return (
-    <div className="p-7 rounded-lg bg-gray-50">
+    <div className="p-7 rounded-lg bg-gray-50 dark:bg-zinc-800">
       <div>
-        <h1 className="text-3xl font-bold flex items-center -ml-1">
-          <span className="mr-1">
-            <Image
-              src="/images/logo.png"
-              alt="Scurry Logo"
-              width={36}
-              height={36}
-              style={{ display: 'inline', verticalAlign: 'middle', height: 36 }}
-              priority
-              unoptimized
-            />
-          </span>
-          <span className="text-gray-800">Scurry</span>
-        </h1>
-        <p className="mt-2 text-gray-500">A nimble little mouse that scurries through MyAnonamouse (MAM) and whisks books & audiobooks into qBittorrent</p>
+        <div className="flex items-start justify-between">
+          <h1 className="text-3xl font-bold flex items-center -ml-1">
+            <span className="mr-1">
+              <Image
+                src="/images/logo.png"
+                alt="Scurry Logo"
+                width={36}
+                height={36}
+                style={{ display: 'inline', verticalAlign: 'middle', height: 36 }}
+                priority
+                unoptimized
+              />
+            </span>
+            <span className="text-gray-800 dark:text-zinc-100">Scurry</span>
+          </h1>
+          <ThemeToggle />
+        </div>
+        <p className="mt-2 text-gray-500 dark:text-zinc-400">A nimble little mouse that scurries through MyAnonamouse (MAM) and whisks books & audiobooks into qBittorrent</p>
         
         <div className="mt-4 flex gap-3">
           <button
             onClick={() => setShowTokenManager(!showTokenManager)}
             className={`py-2 px-4 rounded font-semibold transition-colors cursor-pointer ${
               mamTokenExists 
-                ? 'bg-green-100 hover:bg-green-200 text-green-700' 
-                : 'bg-orange-100 hover:bg-orange-200 text-orange-700'
+                ? 'bg-green-100 hover:bg-green-200 text-green-700 dark:bg-green-900/40 dark:hover:bg-green-900/60 dark:text-green-400' 
+                : 'bg-orange-100 hover:bg-orange-200 text-orange-700 dark:bg-orange-900/40 dark:hover:bg-orange-900/60 dark:text-orange-400'
             }`}
             title={mamTokenExists ? 'Manage MAM Token' : 'MAM Token Missing - Click to Add'}
           >
@@ -53,7 +57,7 @@ export default function Header({ onTokenUpdate, mamTokenExists }) {
           
           <button
             onClick={handleLogout}
-            className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded cursor-pointer"
+            className="bg-gray-200 hover:bg-gray-300 text-gray-700 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-zinc-200 font-semibold py-2 px-4 rounded cursor-pointer"
           >
             Logout
           </button>
@@ -67,4 +71,4 @@ export default function Header({ onTokenUpdate, mamTokenExists }) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/components/MobileBottomSheet.jsx b/app/components/MobileBottomSheet.jsx
index 5fd6c71..30c91d7 100644
--- a/app/components/MobileBottomSheet.jsx
+++ b/app/components/MobileBottomSheet.jsx
@@ -24,22 +24,22 @@ export default function MobileBottomSheet({
   return (
     <>
       {/* Backdrop */}
-      <div className="fixed bottom-0 left-0 right-0 h-48 bg-gray-50 rounded-xl z-40 border-t border-gray-200"></div>
+      <div className="fixed bottom-0 left-0 right-0 h-48 bg-gray-50 dark:bg-zinc-900 rounded-xl z-40 border-t border-gray-200 dark:border-zinc-700"></div>
 
       {/* Content container - single fixed element */}
       <div className="fixed bottom-4 left-4 right-4 z-[100] pointer-events-none">
         <div className="pointer-events-auto space-y-3">
           {/* Progress indicator (only show when not both selected) */}
           {!bothSelected && (
-            <div className="bg-white p-3 rounded-lg border border-gray-200">
+            <div className="bg-white dark:bg-zinc-800 p-3 rounded-lg border border-gray-200 dark:border-zinc-700">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-sm text-gray-700 whitespace-nowrap">
+                <span className="text-sm text-gray-700 dark:text-zinc-300 whitespace-nowrap">
                   <span>Step {currentStep} of 2:</span>
                   <span className="ml-1 font-medium">Select {stepText}</span>
                 </span>
-                <span className="text-sm text-gray-500">{progress}%</span>
+                <span className="text-sm text-gray-500 dark:text-zinc-400">{progress}%</span>
               </div>
-              <div className="w-full bg-gray-200 rounded-full h-2">
+              <div className="w-full bg-gray-200 dark:bg-zinc-700 rounded-full h-2">
                 <div
                   className="bg-pink-400 h-2 rounded-full transition-all duration-500 ease-in-out"
                   style={{ width: `${progress}%` }}
@@ -50,9 +50,9 @@ export default function MobileBottomSheet({
 
           {/* Wedge selector panel (only show when both selected and has wedges) */}
           {bothSelected && hasWedges && (showBookWedge || showAudiobookWedge) && (
-            <div className="bg-white p-3 rounded-lg border border-gray-200">
+            <div className="bg-white dark:bg-zinc-800 p-3 rounded-lg border border-gray-200 dark:border-zinc-700">
               <div className="flex items-center justify-center gap-3">
-                <span className="text-sm text-gray-700 font-medium">Use FL Wedge:</span>
+                <span className="text-sm text-gray-700 dark:text-zinc-300 font-medium">Use FL Wedge:</span>
                 {showBookWedge && (
                   <WedgeToggleButton
                     active={useBookWedge}
@@ -74,11 +74,11 @@ export default function MobileBottomSheet({
           )}
 
           {/* Download button panel */}
-          <div className="bg-white rounded-lg shadow-lg p-4">
+          <div className="bg-white dark:bg-zinc-800 rounded-lg shadow-lg p-4">
             <button
               onClick={onDownload}
               disabled={disabled}
-              className="w-full rounded-md bg-pink-400 px-5 py-3 text-base font-semibold text-white hover:bg-pink-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:bg-gray-300 disabled:text-gray-600 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2"
+              className="w-full rounded-md bg-pink-400 px-5 py-3 text-base font-semibold text-white hover:bg-pink-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:bg-gray-300 disabled:text-gray-600 dark:disabled:bg-zinc-600 dark:disabled:text-zinc-400 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2"
             >
               {loading ? (
                 <>
diff --git a/app/components/ProgressIndicator.jsx b/app/components/ProgressIndicator.jsx
index 2631610..02628a7 100644
--- a/app/components/ProgressIndicator.jsx
+++ b/app/components/ProgressIndicator.jsx
@@ -14,18 +14,18 @@ export default function ProgressIndicator({
     return (
       <>
         {/* Bottom sheet backdrop */}
-        <div className="fixed bottom-0 left-0 right-0 h-40 bg-gray-50 rounded-xl z-40 border-t border-gray-200"></div>
+        <div className="fixed bottom-0 left-0 right-0 h-40 bg-gray-50 dark:bg-zinc-900 rounded-xl z-40 border-t border-gray-200 dark:border-zinc-700"></div>
 
         {/* Progress indicator content */}
-        <div className="fixed bottom-20 left-4 right-4 z-50 bg-white p-3 rounded-lg border border-gray-200">
+        <div className="fixed bottom-20 left-4 right-4 z-50 bg-white dark:bg-zinc-800 p-3 rounded-lg border border-gray-200 dark:border-zinc-700">
           <div className="flex items-center justify-between mb-2">
-            <span className="text-sm text-gray-700 whitespace-nowrap">
+            <span className="text-sm text-gray-700 dark:text-zinc-300 whitespace-nowrap">
               <span>Step {currentStep} of {totalSteps}:</span>
               <span className="ml-1 font-medium">Select {stepText}</span>
             </span>
-            <span className="text-sm text-gray-500">{progress}%</span>
+            <span className="text-sm text-gray-500 dark:text-zinc-400">{progress}%</span>
           </div>
-          <div className="w-full bg-gray-200 rounded-full h-2">
+          <div className="w-full bg-gray-200 dark:bg-zinc-700 rounded-full h-2">
             <div
               className="bg-pink-400 h-2 rounded-full transition-all duration-500 ease-in-out"
               style={{ width: `${progress}%` }}
@@ -40,19 +40,19 @@ export default function ProgressIndicator({
   if (compact) {
     return (
       <div className="flex items-center gap-4 flex-1">
-        <span className="text-sm text-gray-700 whitespace-nowrap font-medium">
+        <span className="text-sm text-gray-700 dark:text-zinc-300 whitespace-nowrap font-medium">
           <span>Step {currentStep} of {totalSteps}:</span>
           <span className="ml-1">Select {stepText}</span>
         </span>
         <div className="flex-1 max-w-md">
-          <div className="w-full bg-gray-200 rounded-full h-2.5">
+          <div className="w-full bg-gray-200 dark:bg-zinc-700 rounded-full h-2.5">
             <div
               className="bg-pink-400 h-2.5 rounded-full transition-all duration-500 ease-in-out"
               style={{ width: `${progress}%` }}
             />
           </div>
         </div>
-        <span className="text-sm font-semibold text-gray-900 min-w-[45px] text-right">{progress}%</span>
+        <span className="text-sm font-semibold text-gray-900 dark:text-zinc-100 min-w-[45px] text-right">{progress}%</span>
       </div>
     );
   }
@@ -60,21 +60,21 @@ export default function ProgressIndicator({
   // Desktop: Flatter design with panel - progress bar with inline text and button
   return (
     <div className="mb-6 flex flex-row gap-2">
-      <div className="flex-1 flex items-center gap-4 p-3 bg-white rounded-lg border border-gray-200">
-        <span className="text-sm text-gray-700 whitespace-nowrap">
+      <div className="flex-1 flex items-center gap-4 p-3 bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700">
+        <span className="text-sm text-gray-700 dark:text-zinc-300 whitespace-nowrap">
           <span>Step {currentStep} of {totalSteps}:</span>
           <span className="ml-1 font-medium">Select {stepText}</span>
         </span>
 
         <div className="flex-1 relative">
-          <div className="w-full bg-gray-200 rounded-full h-2">
+          <div className="w-full bg-gray-200 dark:bg-zinc-700 rounded-full h-2">
             <div
               className="bg-pink-400 h-2 rounded-full transition-all duration-500 ease-in-out"
               style={{ width: `${progress}%` }}
             />
           </div>
         </div>
-        <span className="text-sm text-gray-500 whitespace-nowrap min-w-[35px] text-right">{progress}%</span>
+        <span className="text-sm text-gray-500 dark:text-zinc-400 whitespace-nowrap min-w-[35px] text-right">{progress}%</span>
       </div>
       {actionButton && (
         <div className="flex-shrink-0">
diff --git a/app/components/SearchForm.jsx b/app/components/SearchForm.jsx
index 4ce9194..3a21c63 100644
--- a/app/components/SearchForm.jsx
+++ b/app/components/SearchForm.jsx
@@ -49,7 +49,7 @@ export default function SearchForm({
             onChange={(e) => setQ(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={`Search ${searchCategory}...`}
-            className="block w-full rounded-md sm:rounded-l-md sm:rounded-r-none bg-white px-4 py-2.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-200 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-400 sm:text-sm/6 pr-10"
+            className="block w-full rounded-md sm:rounded-l-md sm:rounded-r-none bg-white dark:bg-zinc-800 px-4 py-2.5 text-base text-gray-900 dark:text-zinc-100 outline-1 -outline-offset-1 outline-gray-200 dark:outline-zinc-600 placeholder:text-gray-400 dark:placeholder:text-zinc-500 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-400 sm:text-sm/6 pr-10"
             autoComplete="off"
             spellCheck="false"
           />
@@ -58,7 +58,7 @@ export default function SearchForm({
               type="button"
               aria-label="Clear search"
               onClick={handleClearSearch}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-pink-400 focus:outline-none"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 dark:text-zinc-500 hover:text-pink-400 dark:hover:text-pink-400 focus:outline-none"
               style={{ padding: 0, background: 'none', border: 'none', cursor: 'pointer' }}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
@@ -70,7 +70,7 @@ export default function SearchForm({
         <select
           value={searchCategory}
           onChange={(e) => onCategoryChange(e.target.value)}
-          className="bg-gray-100 border-t border-gray-200 sm:border-t-0 sm:border-l px-3 py-2.5 mt-2 sm:mt-0 text-sm text-gray-700 rounded-md sm:rounded-l-none sm:rounded-r-md outline-1 -outline-offset-1 outline-gray-200 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-400 cursor-pointer w-full sm:w-auto sm:min-w-36 appearance-none bg-no-repeat bg-right bg-[length:16px_16px]"
+          className="bg-gray-100 dark:bg-zinc-700 border-t border-gray-200 dark:border-zinc-600 sm:border-t-0 sm:border-l px-3 py-2.5 mt-2 sm:mt-0 text-sm text-gray-700 dark:text-zinc-200 rounded-md sm:rounded-l-none sm:rounded-r-md outline-1 -outline-offset-1 outline-gray-200 dark:outline-zinc-600 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-400 cursor-pointer w-full sm:w-auto sm:min-w-36 appearance-none bg-no-repeat bg-right bg-[length:16px_16px]"
           style={{
             backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e")`,
             backgroundPosition: 'right 0.5rem center'
@@ -82,7 +82,7 @@ export default function SearchForm({
         </select>
       </div>
       <button 
-        className="rounded-md bg-pink-100 px-5 py-2.5 text-sm font-semibold text-pink-500 hover:bg-pink-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer min-w-[100px] flex items-center justify-center gap-2" 
+        className="rounded-md bg-pink-100 dark:bg-pink-900/40 px-5 py-2.5 text-sm font-semibold text-pink-500 dark:text-pink-400 hover:bg-pink-200 dark:hover:bg-pink-900/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer min-w-[100px] flex items-center justify-center gap-2" 
         disabled={loading || !q.trim()}
       >
         <>
@@ -105,4 +105,4 @@ SearchForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired,
   onClearResults: PropTypes.func
-};
\ No newline at end of file
+};
diff --git a/app/components/SearchResultItem.jsx b/app/components/SearchResultItem.jsx
index ae5e4d3..aaf9f0c 100644
--- a/app/components/SearchResultItem.jsx
+++ b/app/components/SearchResultItem.jsx
@@ -40,9 +40,9 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
 
   const borderClasses = selectable
     ? selected
-      ? 'border-3 border-pink-300 cursor-pointer'
-      : 'border-2 border-gray-100 hover:border-pink-200 cursor-pointer'
-    : 'border-2 border-gray-100 hover:border-pink-200';
+      ? 'border-3 border-pink-300 dark:border-pink-600 cursor-pointer'
+      : 'border-2 border-gray-100 dark:border-zinc-700 hover:border-pink-200 dark:hover:border-pink-700 cursor-pointer'
+    : 'border-2 border-gray-100 dark:border-zinc-700 hover:border-pink-200 dark:hover:border-pink-700';
 
   return (
     <li 
@@ -61,7 +61,7 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
         <div className="flex-1 min-w-0">
           {/* Basic torrent information */}
           <div className="mb-1">
-            <div className="font-semibold text-gray-900 inline-flex items-center flex-wrap">
+            <div className="font-semibold text-gray-900 dark:text-zinc-100 inline-flex items-center flex-wrap">
               {result.vip && (
                 <span className="inline-flex mr-1 relative top-0.25">
                   <Image
@@ -87,7 +87,7 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
                 </span>
               )}
               <span>{result.title}</span>
-              <span className="text-gray-600 font-normal">
+              <span className="text-gray-600 dark:text-zinc-400 font-normal">
                 <span className="mx-1">by</span>
                 <span>{result.author}</span>
               </span>
@@ -98,7 +98,7 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
                 className="inline-flex ml-1.5 hover:text-pink-400 transition-colors duration-200"
                 onClick={(e) => e.stopPropagation()}
               >
-                <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 flex-shrink-0 text-gray-400 hover:text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 flex-shrink-0 text-gray-400 dark:text-zinc-500 hover:text-pink-400 dark:hover:text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                   <polyline points="15 3 21 3 21 9"></polyline>
                   <line x1="10" y1="14" x2="21" y2="3"></line>
@@ -107,12 +107,12 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
             </div>
           </div>
           {/* Torrent metadata */}
-          <div className="text-sm text-gray-500 mt-1">
+          <div className="text-sm text-gray-500 dark:text-zinc-400 mt-1">
             {result.size} • {result.filetypes} • {result.seeders} seeders • {result.downloads} downloads
           </div>
           {/* Determine if torrent has already been snatched */}
           {result.snatched && (
-            <div className="text-sm font-bold mt-2" style={{ color: '#bf6952' }}>
+            <div className="text-sm font-bold mt-2 text-[#bf6952]">
               💩 Snatched Already!
             </div>
           )}
@@ -139,7 +139,7 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
               )}
               {/* Projected ratio - center on mobile, below on desktop */}
               {projectedRatioDisplay && !result.snatched && (
-                <div className="text-xs text-gray-400 cursor-default md:hidden flex-1 text-center" title="New ratio after download">
+                <div className="text-xs text-gray-400 dark:text-zinc-500 cursor-default md:hidden flex-1 text-center" title="New ratio after download">
                   {projectedRatioDisplay}
                 </div>
               )}
@@ -160,7 +160,7 @@ export default function SearchResultItem({ result, onAddItem, selectable = false
             </div>
             {/* Projected ratio - below on desktop */}
             {projectedRatioDisplay && !result.snatched && (
-              <div className="text-xs text-gray-400 cursor-default hidden md:block" title="New ratio after download">
+              <div className="text-xs text-gray-400 dark:text-zinc-500 cursor-default hidden md:block" title="New ratio after download">
                 {projectedRatioDisplay}
               </div>
             )}
@@ -198,4 +198,4 @@ SearchResultItem.propTypes = {
   }),
   useWedge: PropTypes.bool,
   onToggleWedge: PropTypes.func
-};
\ No newline at end of file
+};
diff --git a/app/components/SearchResultsList.jsx b/app/components/SearchResultsList.jsx
index 24250a6..f694e35 100644
--- a/app/components/SearchResultsList.jsx
+++ b/app/components/SearchResultsList.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export default function SearchResultsList({ results, onAddItem, loading, userStats, singleModeWedges, onToggleWedge }) {
   if (!loading && results.length === 0) {
-    return <p className="text-gray-500 mt-5">☝️ Try a search to see results...</p>;
+    return <p className="text-gray-500 dark:text-zinc-400 mt-5">☝️ Try a search to see results...</p>;
   }
 
   return (
@@ -34,4 +34,4 @@ SearchResultsList.propTypes = {
   }),
   singleModeWedges: PropTypes.object,
   onToggleWedge: PropTypes.func
-};
\ No newline at end of file
+};
diff --git a/app/components/SequentialSearchResults.jsx b/app/components/SequentialSearchResults.jsx
index 8895db4..a17668b 100644
--- a/app/components/SequentialSearchResults.jsx
+++ b/app/components/SequentialSearchResults.jsx
@@ -58,7 +58,7 @@ export default function SequentialSearchResults({
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
-          <p className="text-gray-600">Searching both categories...</p>
+          <p className="text-gray-600 dark:text-zinc-400">Searching both categories...</p>
         </div>
       </div>
     );
@@ -69,7 +69,7 @@ export default function SequentialSearchResults({
   const noBooks = bookResults.length === 0;
 
   if (noResults) {
-    return <p className="text-gray-500 mt-5">No results found for either category. Try a different search...</p>;
+    return <p className="text-gray-500 dark:text-zinc-400 mt-5">No results found for either category. Try a different search...</p>;
   }
 
   // Calculate progress
@@ -134,12 +134,12 @@ export default function SequentialSearchResults({
 
       {/* Combined info display when both selected */}
       {combinedInfo && (
-        <div className="mb-4 px-4 py-2 bg-pink-50 border border-pink-200 rounded-lg text-center text-sm">
-          <span className="text-gray-700">Combined: </span>
-          <span className="font-semibold text-gray-900">{combinedInfo.totalSize}</span>
-          <span className="text-gray-500 mx-2">•</span>
-          <span className="text-gray-700">New ratio: </span>
-          <span className="font-semibold text-gray-900">
+        <div className="mb-4 px-4 py-2 bg-pink-50 dark:bg-pink-900/20 border border-pink-200 dark:border-pink-800/40 rounded-lg text-center text-sm">
+          <span className="text-gray-700 dark:text-zinc-300">Combined: </span>
+          <span className="font-semibold text-gray-900 dark:text-zinc-100">{combinedInfo.totalSize}</span>
+          <span className="text-gray-500 dark:text-zinc-500 mx-2">•</span>
+          <span className="text-gray-700 dark:text-zinc-300">New ratio: </span>
+          <span className="font-semibold text-gray-900 dark:text-zinc-100">
             {combinedInfo.diff ? `${combinedInfo.projectedRatio} (${combinedInfo.diff})` : combinedInfo.projectedRatio}
           </span>
         </div>
@@ -151,12 +151,12 @@ export default function SequentialSearchResults({
           // Collapsed view showing selected book
           <div className="mb-6">
             <div className="flex items-center justify-between mb-2">
-              <h3 className="text-base font-semibold text-gray-700 flex items-center gap-2">
+              <h3 className="text-base font-semibold text-gray-700 dark:text-zinc-300 flex items-center gap-2">
                 📚 Selected Book
               </h3>
               <button 
                 onClick={() => onSelectBook(null)}
-                className="text-sm text-pink-300 hover:text-pink-500 font-medium"
+                className="text-sm text-pink-300 hover:text-pink-500 dark:text-pink-400 dark:hover:text-pink-300 font-medium"
                 aria-label="Change selected book"
               >
                 Change
@@ -175,12 +175,12 @@ export default function SequentialSearchResults({
         ) : (
           // Full book list
           <div>
-            <h3 className="text-base font-semibold text-gray-700 mb-4 flex items-center gap-2">
+            <h3 className="text-base font-semibold text-gray-700 dark:text-zinc-300 mb-4 flex items-center gap-2">
               📚 Books
-              <span className="text-sm font-normal text-gray-500">({bookResults.length})</span>
+              <span className="text-sm font-normal text-gray-500 dark:text-zinc-400">({bookResults.length})</span>
             </h3>
             {noBooks ? (
-              <p className="text-gray-500 text-sm">No books found</p>
+              <p className="text-gray-500 dark:text-zinc-400 text-sm">No books found</p>
             ) : (
               <ul className="list-none p-0" role="list" aria-label="Book results">
                 {bookResults.map((result) => (
@@ -206,12 +206,12 @@ export default function SequentialSearchResults({
             // Collapsed view showing selected audiobook
             <div className="mb-6">
               <div className="flex items-center justify-between mb-2">
-                <h3 className="text-base font-semibold text-gray-700 flex items-center gap-2">
+                <h3 className="text-base font-semibold text-gray-700 dark:text-zinc-300 flex items-center gap-2">
                   🎧 Selected Audiobook
                 </h3>
                 <button 
                   onClick={() => onSelectAudiobook(null)}
-                  className="text-sm text-pink-300 hover:text-pink-500 font-medium"
+                  className="text-sm text-pink-300 hover:text-pink-500 dark:text-pink-400 dark:hover:text-pink-300 font-medium"
                   aria-label="Change selected audiobook"
                 >
                   Change
@@ -230,12 +230,12 @@ export default function SequentialSearchResults({
           ) : (
             // Full audiobook list
             <div>
-              <h3 className="text-base font-semibold text-gray-700 mb-4 flex items-center gap-2">
+              <h3 className="text-base font-semibold text-gray-700 dark:text-zinc-300 mb-4 flex items-center gap-2">
                 🎧 Audiobooks
-                <span className="text-sm font-normal text-gray-500">({audiobookResults.length})</span>
+                <span className="text-sm font-normal text-gray-500 dark:text-zinc-400">({audiobookResults.length})</span>
               </h3>
               {noAudiobooks ? (
-                <p className="text-gray-500 text-sm">No audiobooks found</p>
+                <p className="text-gray-500 dark:text-zinc-400 text-sm">No audiobooks found</p>
               ) : (
                 <ul className="list-none p-0" role="list" aria-label="Audiobook results">
                   {audiobookResults.map((result) => (
diff --git a/app/components/ThemeProvider.jsx b/app/components/ThemeProvider.jsx
new file mode 100644
index 0000000..add29eb
--- /dev/null
+++ b/app/components/ThemeProvider.jsx
@@ -0,0 +1,73 @@
+"use client";
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+
+const ThemeContext = createContext({
+  theme: "auto", // 'light' | 'dark' | 'auto'
+  resolvedTheme: "light", // 'light' | 'dark' (what's actually applied)
+  setTheme: () => {},
+});
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+const STORAGE_KEY = "scurry_theme";
+
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export default function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState("auto");
+  const [resolvedTheme, setResolvedTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+
+  const applyTheme = useCallback((themeValue) => {
+    const resolved = themeValue === "auto" ? getSystemTheme() : themeValue;
+    setResolvedTheme(resolved);
+
+    const root = document.documentElement;
+    if (resolved === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, []);
+
+  const setTheme = useCallback((newTheme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(STORAGE_KEY, newTheme);
+    applyTheme(newTheme);
+  }, [applyTheme]);
+
+  // Initialize on mount
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    const initial = saved && ["light", "dark", "auto"].includes(saved) ? saved : "auto";
+    setThemeState(initial);
+    applyTheme(initial);
+    setMounted(true);
+  }, [applyTheme]);
+
+  // Listen for system theme changes when in auto mode
+  useEffect(() => {
+    if (!mounted) return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if (theme === "auto") {
+        applyTheme("auto");
+      }
+    };
+
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [theme, mounted, applyTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
diff --git a/app/components/ThemeToggle.jsx b/app/components/ThemeToggle.jsx
new file mode 100644
index 0000000..b8f3d6d
--- /dev/null
+++ b/app/components/ThemeToggle.jsx
@@ -0,0 +1,56 @@
+"use client";
+import { useTheme } from "./ThemeProvider";
+
+const modes = [
+  { value: "light", label: "Light" },
+  { value: "auto", label: "Auto" },
+  { value: "dark", label: "Dark" },
+];
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex items-center bg-gray-200 dark:bg-zinc-700 rounded-md p-0.5">
+      {modes.map((mode) => (
+        <button
+          key={mode.value}
+          onClick={() => setTheme(mode.value)}
+          className={`px-2.5 py-1 text-xs font-medium rounded transition-colors cursor-pointer ${
+            theme === mode.value
+              ? "bg-white dark:bg-zinc-500 text-gray-900 dark:text-white shadow-sm"
+              : "text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200"
+          }`}
+          aria-label={`Switch to ${mode.label} theme`}
+        >
+          {mode.value === "light" && (
+            <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="5"></circle>
+              <line x1="12" y1="1" x2="12" y2="3"></line>
+              <line x1="12" y1="21" x2="12" y2="23"></line>
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+              <line x1="1" y1="12" x2="3" y2="12"></line>
+              <line x1="21" y1="12" x2="23" y2="12"></line>
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>
+          )}
+          {mode.value === "auto" && (
+            <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+              <line x1="8" y1="21" x2="16" y2="21"></line>
+              <line x1="12" y1="17" x2="12" y2="21"></line>
+            </svg>
+          )}
+          {mode.value === "dark" && (
+            <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+          )}
+          {mode.label}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/TokenManager.jsx b/app/components/TokenManager.jsx
index 3552269..f9aad30 100644
--- a/app/components/TokenManager.jsx
+++ b/app/components/TokenManager.jsx
@@ -110,46 +110,46 @@ export default function TokenManager({ onTokenUpdate }) {
   const isMouseholeMode = tokenData.mouseholeInfo?.enabled;
 
   return (
-    <div className="bg-white border border-gray-200 rounded-lg p-6">
-      <h2 className="text-xl font-semibold mb-4 text-gray-800">MAM Token Manager</h2>
+    <div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg p-6">
+      <h2 className="text-xl font-semibold mb-4 text-gray-800 dark:text-zinc-100">MAM Token Manager</h2>
       
       {isMouseholeMode ? (
         // Mousehole Read-Only View
         <div className="space-y-4">
-          <div className="p-4 bg-purple-50 border border-purple-200 rounded-md">
+          <div className="p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800/40 rounded-md">
             <div className="flex items-start gap-3">
               <div className="flex-shrink-0 mt-1">
-                <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                 </svg>
               </div>
               <div className="flex-1">
-                <h3 className="text-sm font-semibold text-purple-900 mb-1">
+                <h3 className="text-sm font-semibold text-purple-900 dark:text-purple-300 mb-1">
                   Token Managed by Mousehole
                 </h3>
-                <p className="text-sm text-purple-700">
+                <p className="text-sm text-purple-700 dark:text-purple-400">
                   Your MAM token is dynamically managed by the mousehole service. Token editing is disabled.
                 </p>
               </div>
             </div>
           </div>
 
-          <div className="p-3 bg-gray-50 rounded-md">
-            <p className="text-sm text-gray-600 mb-2">
-              Status: <span className="font-medium text-green-600">
+          <div className="p-3 bg-gray-50 dark:bg-zinc-700 rounded-md">
+            <p className="text-sm text-gray-600 dark:text-zinc-400 mb-2">
+              Status: <span className="font-medium text-green-600 dark:text-green-400">
                 {tokenData.exists ? 'Token active' : 'Waiting for mousehole...'}
               </span>
             </p>
             {tokenData.exists && (
               <>
-                <p className="text-sm text-gray-600 mb-1">
-                  Token: <span className="font-mono text-gray-800">{tokenData.token}</span>
+                <p className="text-sm text-gray-600 dark:text-zinc-400 mb-1">
+                  Token: <span className="font-mono text-gray-800 dark:text-zinc-200">{tokenData.token}</span>
                 </p>
-                <p className="text-sm text-gray-600 mb-1">
+                <p className="text-sm text-gray-600 dark:text-zinc-400 mb-1">
                   Length: <span className="font-medium">{tokenData.fullLength} characters</span>
                 </p>
                 {tokenData.mouseholeInfo?.lastUpdate && (
-                  <p className="text-sm text-gray-600">
+                  <p className="text-sm text-gray-600 dark:text-zinc-400">
                     Last updated: <span className="font-medium">
                       {new Date(tokenData.mouseholeInfo.lastUpdate).toLocaleString()}
                     </span>
@@ -157,22 +157,22 @@ export default function TokenManager({ onTokenUpdate }) {
                 )}
               </>
             )}
-            <p className="text-xs text-gray-500 mt-2">
-              Source: <code className="bg-gray-200 px-1 rounded">{tokenData.mouseholeInfo?.stateFile || tokenData.location}</code>
+            <p className="text-xs text-gray-500 dark:text-zinc-500 mt-2">
+              Source: <code className="bg-gray-200 dark:bg-zinc-600 px-1 rounded">{tokenData.mouseholeInfo?.stateFile || tokenData.location}</code>
             </p>
           </div>
 
-          <div className="py-4 px-6 bg-blue-50 rounded-md">
-            <p className="text-sm text-blue-800">
+          <div className="py-4 px-6 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+            <p className="text-sm text-blue-800 dark:text-blue-300">
               <strong>About Mousehole Integration:</strong>
             </p>
-            <ul className="text-sm text-blue-700 mt-1 list-disc list-inside space-y-1">
+            <ul className="text-sm text-blue-700 dark:text-blue-400 mt-1 list-disc list-inside space-y-1">
               <li>Tokens are automatically rotated when your IP changes</li>
               <li>No manual token updates required</li>
               <li>Scurry reads the token from mousehole&apos;s state file</li>
             </ul>
-            <p className="text-xs text-blue-600 mt-2">
-              To disable mousehole mode, set <code className="bg-blue-100 px-1 rounded">MOUSEHOLE_ENABLED=false</code> in your .env file.
+            <p className="text-xs text-blue-600 dark:text-blue-500 mt-2">
+              To disable mousehole mode, set <code className="bg-blue-100 dark:bg-blue-900/40 px-1 rounded">MOUSEHOLE_ENABLED=false</code> in your .env file.
             </p>
           </div>
         </div>
@@ -180,20 +180,20 @@ export default function TokenManager({ onTokenUpdate }) {
         // Standard Manual Token Management View
         <>
           {/* Current Token Status */}
-          <div className="p-3 bg-gray-50 rounded-md">
+          <div className="p-3 bg-gray-50 dark:bg-zinc-700 rounded-md">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600">
-                  Status: <span className={`font-medium ${tokenData.exists ? 'text-green-600' : 'text-red-600'}`}>
+                <p className="text-sm text-gray-600 dark:text-zinc-400">
+                  Status: <span className={`font-medium ${tokenData.exists ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
                     {tokenData.exists ? 'Token configured' : 'No token found'}
                   </span>
                 </p>
                 {tokenData.exists && (
                   <>
-                    <p className="text-sm text-gray-600">
-                      Token: <span className="font-mono text-gray-800">{tokenData.token}</span>
+                    <p className="text-sm text-gray-600 dark:text-zinc-400">
+                      Token: <span className="font-mono text-gray-800 dark:text-zinc-200">{tokenData.token}</span>
                     </p>
-                    <p className="text-sm text-gray-600">
+                    <p className="text-sm text-gray-600 dark:text-zinc-400">
                       Length: <span className="font-medium">{tokenData.fullLength} characters</span>
                     </p>
                   </>
@@ -204,14 +204,14 @@ export default function TokenManager({ onTokenUpdate }) {
                 <div className="flex gap-2">
                   <button
                     onClick={() => setShowTokenInput(!showTokenInput)}
-                    className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded cursor-pointer hover:bg-blue-200 transition-colors"
+                    className="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400 rounded cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900/60 transition-colors"
                   >
                     Update
                   </button>
                   <button
                     onClick={deleteToken}
                     disabled={loading}
-                    className="px-3 py-1 text-sm bg-red-100 text-red-700 cursor-pointer rounded hover:bg-red-200 transition-colors disabled:opacity-50"
+                    className="px-3 py-1 text-sm bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-400 cursor-pointer rounded hover:bg-red-200 dark:hover:bg-red-900/60 transition-colors disabled:opacity-50"
                   >
                     Delete
                   </button>
@@ -224,7 +224,7 @@ export default function TokenManager({ onTokenUpdate }) {
           {showTokenInput && (
             <div className="space-y-4 mt-4">
               <div>
-                <label htmlFor="mam-token" className="block text-sm font-medium text-gray-700 mb-2">
+                <label htmlFor="mam-token" className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2">
                   MAM Session Token
                 </label>
                 <textarea
@@ -232,7 +232,7 @@ export default function TokenManager({ onTokenUpdate }) {
                   value={newToken}
                   onChange={(e) => setNewToken(e.target.value)}
                   placeholder="Paste your MAM session token here..."
-                  className="w-full p-3 border border-gray-300 rounded-md resize-none font-mono text-sm focus:outline-none focus:ring-2 focus:ring-pink-200 focus:border-pink-200"
+                  className="w-full p-3 border border-gray-300 dark:border-zinc-600 rounded-md resize-none font-mono text-sm bg-white dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 placeholder:text-gray-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-pink-200 dark:focus:ring-pink-800 focus:border-pink-200 dark:focus:border-pink-700"
                   rows={4}
                   disabled={loading}
                 />
@@ -255,7 +255,7 @@ export default function TokenManager({ onTokenUpdate }) {
                       setMessage(null);
                     }}
                     disabled={loading}
-                    className="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded cursor-pointer"
+                    className="bg-gray-200 dark:bg-zinc-600 hover:bg-gray-300 dark:hover:bg-zinc-500 text-gray-700 dark:text-zinc-200 font-semibold py-2 px-4 rounded cursor-pointer"
                   >
                     Cancel
                   </button>
@@ -268,27 +268,27 @@ export default function TokenManager({ onTokenUpdate }) {
           {message && (
             <div className={`mt-4 p-3 rounded-md ${
               message.type === 'error' 
-                ? 'bg-red-50 text-red-700 border border-red-200' 
-                : 'bg-green-50 text-green-700 border border-green-200'
+                ? 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800/40' 
+                : 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800/40'
             }`}>
               {message.text}
             </div>
           )}
 
           {/* Help Text */}
-          <div className="mt-4 py-4 px-6 bg-blue-50 rounded-md">
-            <p className="text-sm text-blue-800">
+          <div className="mt-4 py-4 px-6 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+            <p className="text-sm text-blue-800 dark:text-blue-300">
               <strong>How to get your MAM session token:</strong>
             </p>
-            <ol className="text-sm text-blue-700 mt-1 list-decimal list-inside space-y-1">
+            <ol className="text-sm text-blue-700 dark:text-blue-400 mt-1 list-decimal list-inside space-y-1">
               <li>Go to your <a href="https://www.myanonamouse.net/preferences/index.php?view=security" className="underline" target="_blank" rel="noopener noreferrer">Security Preferences</a>.</li>
               <li>Create a session with the IP where you&apos;ll run Scurry.</li>
               <li>Copy your session token value and paste it above.</li>
             </ol>
-            <i className="mt-2 block text-xs text-blue-800">Note: do not prepend <code className="bg-gray-200 text-red-600 p-1 rounded">MAM_ID=</code> above - just the raw token value.</i>
+            <i className="mt-2 block text-xs text-blue-800 dark:text-blue-400">Note: do not prepend <code className="bg-gray-200 dark:bg-zinc-600 text-red-600 dark:text-red-400 p-1 rounded">MAM_ID=</code> above - just the raw token value.</i>
           </div>
         </>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/components/UserStatsBar.jsx b/app/components/UserStatsBar.jsx
index 2a469f3..dad823e 100644
--- a/app/components/UserStatsBar.jsx
+++ b/app/components/UserStatsBar.jsx
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 export default function UserStatsBar({ stats, loading, error }) {
   if (loading) {
     return (
-      <div className="mt-4 mb-4 px-4 py-3 bg-pink-50 border border-pink-200 rounded-lg">
+      <div className="mt-4 mb-4 px-4 py-3 bg-pink-50 dark:bg-pink-900/20 border border-pink-200 dark:border-pink-800/40 rounded-lg">
         <div className="flex items-center justify-center">
           <svg className="animate-spin h-4 w-4 text-pink-400 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
           </svg>
-          <span className="text-sm text-gray-600">Loading stats...</span>
+          <span className="text-sm text-gray-600 dark:text-zinc-400">Loading stats...</span>
         </div>
       </div>
     );
@@ -17,8 +17,8 @@ export default function UserStatsBar({ stats, loading, error }) {
 
   if (error) {
     return (
-      <div className="mt-4 mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-lg">
-        <p className="text-sm text-red-700">Failed to load user stats: {error}</p>
+      <div className="mt-4 mb-4 px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/40 rounded-lg">
+        <p className="text-sm text-red-700 dark:text-red-400">Failed to load user stats: {error}</p>
       </div>
     );
   }
@@ -28,49 +28,49 @@ export default function UserStatsBar({ stats, loading, error }) {
   }
 
   return (
-    <div className="mt-4 mb-4 px-4 py-3 bg-pink-50 border border-pink-200 rounded-lg">
+    <div className="mt-4 mb-4 px-4 py-3 bg-pink-50 dark:bg-pink-900/20 border border-pink-200 dark:border-pink-800/40 rounded-lg">
       {/* Mobile: 2x2 grid layout with vertical divider */}
       <div className="grid grid-cols-[1fr_auto_1fr] gap-x-4 gap-y-2 text-sm sm:hidden justify-items-center items-center">
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">U:</span>
-          <span className="text-gray-900 font-semibold">{stats.uploaded}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">U:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.uploaded}</span>
         </div>
-        <div className="row-span-2 border-l border-pink-200 h-full"></div>
+        <div className="row-span-2 border-l border-pink-200 dark:border-pink-800/40 h-full"></div>
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">D:</span>
-          <span className="text-gray-900 font-semibold">{stats.downloaded}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">D:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.downloaded}</span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">R:</span>
-          <span className="text-gray-900 font-semibold">{stats.ratio}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">R:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.ratio}</span>
         </div>
         {/* Vertical divider spans both rows */}
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">FL:</span>
-          <span className="text-gray-900 font-semibold">{stats.flWedges || 0}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">FL:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.flWedges || 0}</span>
         </div>
       </div>
 
       {/* Desktop: horizontal layout with dots */}
       <div className="hidden sm:flex items-center justify-center gap-6 text-sm">
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">Upload:</span>
-          <span className="text-gray-900 font-semibold">{stats.uploaded}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">Upload:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.uploaded}</span>
         </div>
-        <span className="text-gray-400">•</span>
+        <span className="text-gray-400 dark:text-zinc-500">•</span>
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">Download:</span>
-          <span className="text-gray-900 font-semibold">{stats.downloaded}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">Download:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.downloaded}</span>
         </div>
-        <span className="text-gray-400">•</span>
+        <span className="text-gray-400 dark:text-zinc-500">•</span>
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">Ratio:</span>
-          <span className="text-gray-900 font-semibold">{stats.ratio}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">Ratio:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.ratio}</span>
         </div>
-        <span className="text-gray-400">•</span>
+        <span className="text-gray-400 dark:text-zinc-500">•</span>
         <div className="flex items-center gap-2">
-          <span className="text-gray-700 font-medium">FL Wedges:</span>
-          <span className="text-gray-900 font-semibold">{stats.flWedges || 0}</span>
+          <span className="text-gray-700 dark:text-zinc-300 font-medium">FL Wedges:</span>
+          <span className="text-gray-900 dark:text-zinc-100 font-semibold">{stats.flWedges || 0}</span>
         </div>
       </div>
     </div>
diff --git a/app/components/WedgeToggleButton.jsx b/app/components/WedgeToggleButton.jsx
index 2828dac..e8a9663 100644
--- a/app/components/WedgeToggleButton.jsx
+++ b/app/components/WedgeToggleButton.jsx
@@ -18,7 +18,7 @@ export default function WedgeToggleButton({
       className={`flex items-center gap-2 ${sizeClasses} rounded transition-colors duration-200 cursor-pointer ${
         active 
           ? 'bg-amber-400 text-white hover:bg-amber-500' 
-          : 'bg-gray-200 text-gray-600 hover:bg-gray-300'
+          : 'bg-gray-200 dark:bg-zinc-600 text-gray-600 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-500'
       }`}
       title={active ? `Freeleech Wedge will be used${label ? ` for ${label}` : ''}` : `Use Freeleech Wedge${label ? ` for ${label}` : ''}`}
       aria-label={active ? `Remove Freeleech Wedge${label ? ` from ${label}` : ''}` : `Use Freeleech Wedge${label ? ` for ${label}` : ''}`}
diff --git a/app/layout.js b/app/layout.js
index fa6547d..516089d 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,4 +1,5 @@
 import React from "react";
+import ThemeProvider from "./components/ThemeProvider";
 
 export const viewport = {
   themeColor: [
@@ -26,8 +27,25 @@ import "./styles/globals.css";
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var theme = localStorage.getItem('scurry_theme');
+                  var isDark = theme === 'dark' || ((!theme || theme === 'auto') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+                  if (isDark) document.documentElement.classList.add('dark');
+                } catch(e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className="bg-white dark:bg-zinc-900 transition-colors">
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/login/page.jsx b/app/login/page.jsx
index 0a7bf0d..f0adab7 100644
--- a/app/login/page.jsx
+++ b/app/login/page.jsx
@@ -36,8 +36,8 @@ function LoginForm() {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-      <form onSubmit={handleSubmit} className="bg-white p-10 rounded shadow-md w-80">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-zinc-900">
+      <form onSubmit={handleSubmit} className="bg-white dark:bg-zinc-800 p-10 rounded shadow-md w-80">
         <div className="text-center mb-5">
            <Image
              src="/images/logo.png"
@@ -49,17 +49,17 @@ function LoginForm() {
              priority
              unoptimized
            />
-           <h1 className="text-2xl font-bold text-center text-gray-800">Scurry Password</h1>
+           <h1 className="text-2xl font-bold text-center text-gray-800 dark:text-zinc-100">Scurry Password</h1>
         </div>
         <input
           type="password"
-          className="block w-full rounded-md bg-white px-4 py-2.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-200 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-400 sm:text-sm/6 pr-10 mb-5"
+          className="block w-full rounded-md bg-white dark:bg-zinc-700 px-4 py-2.5 text-base text-gray-900 dark:text-zinc-100 outline-1 -outline-offset-1 outline-gray-200 dark:outline-zinc-600 placeholder:text-gray-400 dark:placeholder:text-zinc-500 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-400 sm:text-sm/6 pr-10 mb-5"
           placeholder="Password"
           value={password}
           onChange={e => setPassword(e.target.value)}
           disabled={loading}
         />
-        {error && <div className="text-red-500 mb-5 text-center">{error}</div>}
+        {error && <div className="text-red-500 dark:text-red-400 mb-5 text-center">{error}</div>}
         <button
           type="submit"
           className="w-full bg-pink-400 text-white py-2 rounded hover:bg-pink-500 cursor-pointer disabled:opacity-50"
@@ -74,7 +74,7 @@ function LoginForm() {
 
 export default function LoginPage() {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<div className="dark:text-zinc-400">Loading...</div>}>
       <LoginForm />
     </Suspense>
   );
diff --git a/app/page.jsx b/app/page.jsx
index 5552e5f..4af9fc4 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -480,7 +480,7 @@ function SearchPage() {
               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
               <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>
-            <p className="text-gray-600">Sniffing out the cheese... 🧀</p>
+            <p className="text-gray-600 dark:text-zinc-400">Sniffing out the cheese... 🧀</p>
           </div>
         </div>
       </main>
@@ -492,12 +492,12 @@ function SearchPage() {
       <Header onTokenUpdate={handleTokenUpdate} mamTokenExists={mamTokenExists} />
 
       {!mamTokenExists ? (
-        <div className="mt-6 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
+        <div className="mt-6 p-6 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/40 rounded-lg">
           <div className="flex items-center mb-4">
             <span className="text-2xl mr-3">⚠️</span>
             <div>
-              <h3 className="text-lg font-semibold text-yellow-800">MAM Token Required</h3>
-              <p className="text-yellow-700">Please add your MAM session token using the &quot;Add Token&quot; button above to begin searching.</p>
+              <h3 className="text-lg font-semibold text-yellow-800 dark:text-yellow-300">MAM Token Required</h3>
+              <p className="text-yellow-700 dark:text-yellow-400">Please add your MAM session token using the &quot;Add Token&quot; button above to begin searching.</p>
             </div>
           </div>
         </div>
@@ -586,8 +586,8 @@ export default function Page() {
     <Suspense fallback={
       <div className="my-4 p-4 w-full max-w-4xl mx-auto">
         <div className="animate-pulse">
-          <div className="h-32 bg-gray-200 rounded-lg mb-6"></div>
-          <div className="h-12 bg-gray-200 rounded-lg"></div>
+          <div className="h-32 bg-gray-200 dark:bg-zinc-700 rounded-lg mb-6"></div>
+          <div className="h-12 bg-gray-200 dark:bg-zinc-700 rounded-lg"></div>
         </div>
       </div>
     }>
@@ -595,4 +595,3 @@ export default function Page() {
     </Suspense>
   );
 }
-
diff --git a/app/styles/globals.css b/app/styles/globals.css
index a461c50..9c0f814 100644
--- a/app/styles/globals.css
+++ b/app/styles/globals.css
@@ -1 +1,3 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/package-lock.json b/package-lock.json
index 774e24c..6aff665 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "scurry",
-  "version": "2.3.0",
+  "version": "2.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "scurry",
-      "version": "2.3.0",
+      "version": "2.5.1",
       "dependencies": {
         "next": "16.1.4",
         "react": "19.2.3",
@@ -156,7 +156,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -516,7 +515,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -560,7 +558,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2657,6 +2654,7 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -2677,6 +2675,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -2752,7 +2751,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2883,7 +2883,6 @@
       "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.1",
         "@typescript-eslint/types": "8.53.1",
@@ -3532,7 +3531,6 @@
       "integrity": "sha512-CGJ25bc8fRi8Lod/3GHSvXRKi7nBo3kxh0ApW4yCjmrWmRmlT53B5E08XRSZRliygG0aVNxLrBEqPYdz/KcCtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.0.18",
         "fflate": "^0.8.2",
@@ -3569,7 +3567,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3620,6 +3617,7 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -3943,7 +3941,6 @@
       "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
       }
@@ -4018,7 +4015,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001733",
         "electron-to-chromium": "^1.5.199",
@@ -4410,6 +4406,7 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -4442,7 +4439,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
@@ -4755,7 +4753,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4941,7 +4938,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -6305,7 +6301,6 @@
       "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -6738,6 +6733,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -7373,7 +7369,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7406,6 +7401,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -7421,6 +7417,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7433,7 +7430,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
@@ -7483,7 +7481,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7493,7 +7490,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8372,7 +8368,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8735,7 +8730,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -8829,7 +8823,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8843,7 +8836,6 @@
       "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.18",
         "@vitest/mocker": "4.0.18",
@@ -9173,7 +9165,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index e52f8d4..33d3f63 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 const config = {
+  darkMode: 'class',
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",

From 8499879c38d95be1e67d49cf1e566181c54de3d7 Mon Sep 17 00:00:00 2001
From: Mason Fox <masonfox22@gmail.com>
Date: Thu, 12 Feb 2026 08:53:10 -0500
Subject: [PATCH 2/4] refactor: Replace theme segmented control with compact
 icon dropdown

---
 app/components/ThemeToggle.jsx | 127 ++++++++++++++++++++++-----------
 1 file changed, 84 insertions(+), 43 deletions(-)

diff --git a/app/components/ThemeToggle.jsx b/app/components/ThemeToggle.jsx
index b8f3d6d..6ae8745 100644
--- a/app/components/ThemeToggle.jsx
+++ b/app/components/ThemeToggle.jsx
@@ -1,56 +1,97 @@
 "use client";
+import { useState, useEffect, useRef } from "react";
 import { useTheme } from "./ThemeProvider";
 
 const modes = [
-  { value: "light", label: "Light" },
-  { value: "auto", label: "Auto" },
-  { value: "dark", label: "Dark" },
+  {
+    value: "light",
+    label: "Light",
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+    ),
+  },
+  {
+    value: "auto",
+    label: "Auto",
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+        <line x1="8" y1="21" x2="16" y2="21"></line>
+        <line x1="12" y1="17" x2="12" y2="21"></line>
+      </svg>
+    ),
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    ),
+  },
 ];
 
 export default function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+
+  const current = modes.find((m) => m.value === theme) || modes[0];
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
 
   return (
-    <div className="flex items-center bg-gray-200 dark:bg-zinc-700 rounded-md p-0.5">
-      {modes.map((mode) => (
-        <button
-          key={mode.value}
-          onClick={() => setTheme(mode.value)}
-          className={`px-2.5 py-1 text-xs font-medium rounded transition-colors cursor-pointer ${
-            theme === mode.value
-              ? "bg-white dark:bg-zinc-500 text-gray-900 dark:text-white shadow-sm"
-              : "text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200"
-          }`}
-          aria-label={`Switch to ${mode.label} theme`}
-        >
-          {mode.value === "light" && (
-            <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <circle cx="12" cy="12" r="5"></circle>
-              <line x1="12" y1="1" x2="12" y2="3"></line>
-              <line x1="12" y1="21" x2="12" y2="23"></line>
-              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-              <line x1="1" y1="12" x2="3" y2="12"></line>
-              <line x1="21" y1="12" x2="23" y2="12"></line>
-              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-            </svg>
-          )}
-          {mode.value === "auto" && (
-            <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-              <line x1="8" y1="21" x2="16" y2="21"></line>
-              <line x1="12" y1="17" x2="12" y2="21"></line>
-            </svg>
-          )}
-          {mode.value === "dark" && (
-            <svg xmlns="http://www.w3.org/2000/svg" className="w-3.5 h-3.5 inline mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-            </svg>
-          )}
-          {mode.label}
-        </button>
-      ))}
+    <div className="relative" ref={containerRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="p-2 rounded-md bg-gray-200 dark:bg-zinc-700 text-gray-600 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600 transition-colors cursor-pointer"
+        aria-label="Change theme"
+        aria-expanded={open}
+      >
+        {current.icon}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-1 w-32 rounded-md shadow-lg bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 py-1 z-50">
+          {modes.map((mode) => (
+            <button
+              key={mode.value}
+              onClick={() => {
+                setTheme(mode.value);
+                setOpen(false);
+              }}
+              className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors cursor-pointer ${
+                theme === mode.value
+                  ? "bg-gray-100 dark:bg-zinc-700 text-gray-900 dark:text-white"
+                  : "text-gray-600 dark:text-zinc-400 hover:bg-gray-50 dark:hover:bg-zinc-700/50"
+              }`}
+            >
+              {mode.icon}
+              {mode.label}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

From 3e9a2e99fa749edcd496536cce682f11dd65b622 Mon Sep 17 00:00:00 2001
From: Mason Fox <masonfox22@gmail.com>
Date: Thu, 12 Feb 2026 08:53:29 -0500
Subject: [PATCH 3/4] align mode toggle and title

---
 app/components/Header.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Header.jsx b/app/components/Header.jsx
index 2dd8b50..67f34b9 100644
--- a/app/components/Header.jsx
+++ b/app/components/Header.jsx
@@ -23,7 +23,7 @@ export default function Header({ onTokenUpdate, mamTokenExists }) {
   return (
     <div className="p-7 rounded-lg bg-gray-50 dark:bg-zinc-800">
       <div>
-        <div className="flex items-start justify-between">
+        <div className="flex items-center justify-between">
           <h1 className="text-3xl font-bold flex items-center -ml-1">
             <span className="mr-1">
               <Image

From c708489a46bda6d280fd96e209107002ce43beab Mon Sep 17 00:00:00 2001
From: Mason Fox <masonfox22@gmail.com>
Date: Thu, 12 Feb 2026 08:54:31 -0500
Subject: [PATCH 4/4] chore: bump to v2.5.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7f53f74..d7a1e12 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "email": "masonfox22@gmail.com"
   },
   "private": true,
-  "version": "2.5.1",
+  "version": "2.5.2",
   "scripts": {
     "dev": "next dev",
     "build": "next build",