From eaf53ea5e558b2eec1e087390b29f334bd351a91 Mon Sep 17 00:00:00 2001
From: Christian van der Loo <chris.vanderloo@icloud.com>
Date: Wed, 5 Aug 2026 23:33:52 -0400
Subject: [PATCH] feat: add dark mode

---
 src/components/CopyImageUrlButton.tsx |  2 +-
 src/components/DeleteImageButton.tsx  | 14 +++++++++-----
 src/components/ImageCard.astro        |  6 +++---
 src/components/ImageGallery.astro     |  2 +-
 src/components/UploadForm.tsx         | 20 +++++++++++++-------
 src/layouts/BaseLayout.astro          |  3 ++-
 src/pages/index.astro                 |  6 +++---
 src/pages/sign-in.astro               |  6 +++---
 8 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/CopyImageUrlButton.tsx b/src/components/CopyImageUrlButton.tsx
index 6488e78..351ec6c 100644
--- a/src/components/CopyImageUrlButton.tsx
+++ b/src/components/CopyImageUrlButton.tsx
@@ -22,7 +22,7 @@ export default function CopyImageUrlButton({ cid }: Props) {
       type="button"
       aria-label="Copy image URL"
       title="Copy image URL"
-      className="flex items-center justify-center rounded-md cursor-pointer size-7 text-zinc-900 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+      className="flex items-center justify-center rounded-md cursor-pointer size-7 text-zinc-900 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800 dark:focus-visible:outline-zinc-100"
       onClick={copyUrl}
     >
       <Copy aria-hidden="true" size={16} />
diff --git a/src/components/DeleteImageButton.tsx b/src/components/DeleteImageButton.tsx
index 1e9c5da..6076c07 100644
--- a/src/components/DeleteImageButton.tsx
+++ b/src/components/DeleteImageButton.tsx
@@ -39,27 +39,27 @@ export default function DeleteImageButton({ cardId, recordCid, rkey }: Props) {
         type="button"
         aria-label="Delete image"
         title="Delete image"
-        className="flex items-center justify-center rounded-md cursor-pointer size-7 text-red-700 hover:bg-red-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700"
+        className="flex items-center justify-center rounded-md cursor-pointer size-7 text-red-700 hover:bg-red-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 dark:text-red-400 dark:hover:bg-red-950 dark:focus-visible:outline-red-400"
         onClick={() => dialog.current?.showModal()}
       >
         <Trash2 aria-hidden="true" size={16} />
       </button>
       <dialog
         ref={dialog}
-        className="m-auto max-w-sm rounded-lg border border-zinc-200 bg-white p-0 text-zinc-900 shadow-xl backdrop:bg-zinc-950/40"
+        className="m-auto max-w-sm rounded-lg border border-zinc-200 bg-white p-0 text-zinc-900 shadow-xl backdrop:bg-zinc-950/40 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:backdrop:bg-black/60"
         onCancel={(event) => isDeleting && event.preventDefault()}
       >
         <div className="grid gap-5 p-6">
           <div className="grid gap-2">
             <h2 className="text-lg font-semibold">Delete this image?</h2>
-            <p className="text-sm text-zinc-600">
+            <p className="text-sm text-zinc-600 dark:text-zinc-400">
               This deletes the image from your PDS and cannot be undone.
             </p>
           </div>
           <div className="flex justify-end gap-2">
             <button
               type="button"
-              className="cursor-pointer rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+              className="cursor-pointer rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:focus-visible:outline-zinc-100"
               disabled={isDeleting}
               onClick={() => dialog.current?.close()}
             >
@@ -72,7 +72,11 @@ export default function DeleteImageButton({ cardId, recordCid, rkey }: Props) {
               onClick={deleteImage}
             >
               {isDeleting ? (
-                <LoaderCircle aria-hidden="true" className="animate-spin" size={16} />
+                <LoaderCircle
+                  aria-hidden="true"
+                  className="animate-spin"
+                  size={16}
+                />
               ) : (
                 <Trash2 aria-hidden="true" size={16} />
               )}
diff --git a/src/components/ImageCard.astro b/src/components/ImageCard.astro
index 62cafdf..5670b15 100644
--- a/src/components/ImageCard.astro
+++ b/src/components/ImageCard.astro
@@ -17,7 +17,7 @@ const cardId = `image-${rkey}`;
 
 <figure
   id={cardId}
-  class="relative overflow-hidden rounded-lg border border-zinc-200 bg-white transition-shadow hover:shadow-md focus-within:shadow-md"
+  class="relative overflow-hidden rounded-lg border border-zinc-200 bg-white transition-shadow hover:shadow-md focus-within:shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:hover:shadow-zinc-950 dark:focus-within:shadow-zinc-950"
 >
   <a
     class="absolute inset-0 z-10 size-full"
@@ -26,7 +26,7 @@ const cardId = `image-${rkey}`;
   />
   <div class="relative aspect-square z-0">
     <img
-      class="pointer-events-none size-full bg-zinc-100 object-cover"
+      class="pointer-events-none size-full bg-zinc-100 object-cover dark:bg-zinc-800"
       src={`/images/${cid}?quality=placeholder`}
       alt={alt}
       loading="lazy"
@@ -47,7 +47,7 @@ const cardId = `image-${rkey}`;
           <DeleteImageButton client:load {cardId} {recordCid} {rkey} />
         </div>
       </div>
-      <time class="text-sm text-zinc-500" datetime={createdAt}>
+      <time class="text-sm text-zinc-500 dark:text-zinc-400" datetime={createdAt}>
         {new Date(createdAt).toLocaleString()}
       </time>
     </div>
diff --git a/src/components/ImageGallery.astro b/src/components/ImageGallery.astro
index 5f585f9..65196bf 100644
--- a/src/components/ImageGallery.astro
+++ b/src/components/ImageGallery.astro
@@ -15,7 +15,7 @@ const images = result.data ? result.data.records : [];
 <section class={className}>
 	<h2 class="mb-4 text-xl font-semibold">Images</h2>
 	{error ? (
-		<p class="text-red-700" role="alert">{error}</p>
+		<p class="text-red-700 dark:text-red-400" role="alert">{error}</p>
 	) : images.length ? (
 		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 			{images.map((image) => (
diff --git a/src/components/UploadForm.tsx b/src/components/UploadForm.tsx
index acaa25f..7efc2f7 100644
--- a/src/components/UploadForm.tsx
+++ b/src/components/UploadForm.tsx
@@ -40,7 +40,9 @@ export default function UploadForm() {
       window.location.href = "/";
     } catch (error) {
       setError(
-        error instanceof Error ? error.message : "Your browser cannot create image previews.",
+        error instanceof Error
+          ? error.message
+          : "Your browser cannot create image previews.",
       );
     } finally {
       setStatus("idle");
@@ -49,14 +51,14 @@ export default function UploadForm() {
 
   return (
     <>
-      <div className="flex items-end gap-4 rounded-lg border border-zinc-200 bg-white p-4 max-sm:flex-col">
+      <div className="flex items-end gap-4 rounded-lg border border-zinc-200 bg-white p-4 max-sm:flex-col dark:border-zinc-800 dark:bg-zinc-900">
         <div className="flex flex-col gap-1 flex-1 w-full">
           <label htmlFor="image" className="text-sm font-medium">
             Image
           </label>
           <input
             id="image"
-            className="h-10 w-full cursor-pointer rounded-md border border-zinc-300 bg-white px-3 py-2 file:mr-3 file:border-0 file:bg-transparent file:font-medium hover:bg-zinc-50 active:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+            className="h-10 w-full cursor-pointer rounded-md border border-zinc-300 bg-white px-3 py-2 file:mr-3 file:border-0 file:bg-transparent file:font-medium hover:bg-zinc-50 active:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:active:bg-zinc-700 dark:focus-visible:outline-zinc-100"
             name="image"
             type="file"
             accept={IMAGE_ENCODINGS.join(",")}
@@ -73,7 +75,7 @@ export default function UploadForm() {
           </label>
           <input
             id="alt"
-            className="h-10 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+            className="h-10 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:border-zinc-700 dark:bg-zinc-950 dark:focus-visible:outline-zinc-100"
             name="alt"
             maxLength={2000}
             placeholder="Describe the image"
@@ -84,12 +86,16 @@ export default function UploadForm() {
         </div>
         <button
           type="button"
-          className="inline-flex min-w-24 h-10 cursor-pointer items-center justify-center gap-2 rounded-md border border-zinc-700 bg-zinc-700 px-4 py-2 text-sm font-medium text-white hover:bg-hover-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hover-700 disabled:cursor-not-allowed disabled:opacity-60"
+          className="inline-flex min-w-24 h-10 cursor-pointer items-center justify-center gap-2 rounded-md border border-zinc-700 bg-zinc-700 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-700 disabled:cursor-not-allowed disabled:opacity-60 dark:border-zinc-200 dark:bg-zinc-200 dark:text-zinc-950 dark:hover:bg-zinc-400 dark:focus-visible:outline-zinc-100"
           disabled={isBusy}
           onClick={upload}
         >
           {isBusy ? (
-            <LoaderCircle aria-hidden="true" className="animate-spin" size={16} />
+            <LoaderCircle
+              aria-hidden="true"
+              className="animate-spin"
+              size={16}
+            />
           ) : (
             <Upload aria-hidden="true" size={16} />
           )}
@@ -97,7 +103,7 @@ export default function UploadForm() {
         </button>
       </div>
       {error && (
-        <p className="mt-2 text-sm text-red-700" role="alert">
+        <p className="mt-2 text-sm text-red-700 dark:text-red-400" role="alert">
           {error}
         </p>
       )}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index e51c0f6..b07051c 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -14,10 +14,11 @@ const { title = "pixl" } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width" />
+		<meta name="color-scheme" content="light dark" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
-	<body class="min-h-screen bg-zinc-50 font-sans text-zinc-900">
+	<body class="min-h-screen bg-zinc-50 font-sans text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
 		<slot />
 		<ToastProvider client:load />
 	</body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4327ac9..fe8c496 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,17 +11,17 @@ if (!signedIn) return Astro.redirect("/sign-in")
 <BaseLayout>
 	<main class="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
 		<header class="flex items-center justify-between gap-4 max-sm:flex-col">
-			<img src="/wordmark.png" class="max-w-48" />
+			<img src="/wordmark.png" alt="pixl" class="max-w-48 dark:invert" />
 			<div class="flex gap-2">
   			<button
           id="upload-button"
-					class="cursor-pointer rounded-md border border-zinc-300 bg-white px-4 py-2 font-medium text-zinc-900 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+					class="cursor-pointer rounded-md border border-zinc-300 bg-white px-4 py-2 font-medium text-zinc-900 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800 dark:focus-visible:outline-zinc-100"
 				>
 				  <span class="text-xl leading-1 font-light mr-2">+</span>Upload
 				</button>
   			<form action="/oauth/logout" method="post">
   				<button
-  					class="cursor-pointer rounded-md border border-zinc-300 bg-white px-4 py-2 font-medium text-zinc-900 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+					class="cursor-pointer rounded-md border border-zinc-300 bg-white px-4 py-2 font-medium text-zinc-900 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800 dark:focus-visible:outline-zinc-100"
   				>
   					Sign out
   				</button>
diff --git a/src/pages/sign-in.astro b/src/pages/sign-in.astro
index ed96acf..8874abf 100644
--- a/src/pages/sign-in.astro
+++ b/src/pages/sign-in.astro
@@ -9,7 +9,7 @@ if (signedIn) return Astro.redirect("/")
 <BaseLayout>
 	<main class="mx-auto w-full max-w-lg px-4 py-6 sm:px-6 sm:py-8">
 		<header class="flex flex-col justify-between gap-4">
-			<img src="/wordmark.png" alt="pixl" class="h-auto w-full max-w-48 self-center" />
+			<img src="/wordmark.png" alt="pixl" class="h-auto w-full max-w-48 self-center dark:invert" />
 			<h2 class="text-2xl font-medium tracking-tight">Sign in</h2>
 		</header>
 		<form
@@ -20,14 +20,14 @@ if (signedIn) return Astro.redirect("/")
 			<label class="flex flex-col gap-2 text-sm font-medium">
 				AT Protocol handle
 				<input
-					class="min-h-11 w-full min-w-0 rounded-md border border-zinc-300 bg-white px-3 py-2 text-base font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 sm:text-sm"
+					class="min-h-11 w-full min-w-0 rounded-md border border-zinc-300 bg-white px-3 py-2 text-base font-normal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 sm:text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:focus-visible:outline-zinc-100"
 					name="handle"
 					placeholder="you.bsky.social"
 					required
 				/>
 			</label>
 			<button
-				class="min-h-11 cursor-pointer rounded-md border border-zinc-900 bg-zinc-900 px-4 py-2 font-medium text-white hover:bg-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900"
+				class="min-h-11 cursor-pointer rounded-md border border-zinc-900 bg-zinc-900 px-4 py-2 font-medium text-white hover:bg-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-zinc-300 dark:focus-visible:outline-zinc-100"
 			>
 				Sign in
 			</button>
-- 
2.51.2