diff --git a/changelog.d/3264-dark-mode-logo.fixed.md b/changelog.d/3264-dark-mode-logo.fixed.md
new file mode 100644
index 0000000000..aecbf25634
--- /dev/null
+++ b/changelog.d/3264-dark-mode-logo.fixed.md
@@ -0,0 +1 @@
+- Fixed the wheels.dev header and footer logo being invisible in dark mode — the `lockup` logo variant now swaps to the white lockup under `prefers-color-scheme: dark` via a pure-CSS toggle ([#3264](https://github.com/wheels-dev/wheels/issues/3264))
diff --git a/web/packages/ui/src/components/Logo.astro b/web/packages/ui/src/components/Logo.astro
index 66642c0eda..b1abbd30f6 100644
--- a/web/packages/ui/src/components/Logo.astro
+++ b/web/packages/ui/src/components/Logo.astro
@@ -22,16 +22,12 @@ const lockupHeights = {
 	md: 28,
 	lg: 40,
 };
-
-const isLockup = variant === 'lockup' || variant === 'lockup-on-dark';
-const src =
-	variant === 'mark' ? markPng : variant === 'lockup-on-dark' ? lockupWhitePng : lockupPng;
 ---
 
 {
 	variant === 'mark' && (
 		<img
-			src={src.src}
+			src={markPng.src}
 			width={markSizes[size].w}
 			height={markSizes[size].h}
 			alt="Wheels"
@@ -43,9 +39,32 @@ const src =
 }
 
 {
-	isLockup && (
+	variant === 'lockup' && (
+		<>
+			<img
+				src={lockupPng.src}
+				height={lockupHeights[size]}
+				alt="wheels.dev"
+				class:list={['wd-logo', 'wd-logo--lockup', 'wd-logo--lockup-light', className]}
+				loading="eager"
+				decoding="async"
+			/>
+			<img
+				src={lockupWhitePng.src}
+				height={lockupHeights[size]}
+				alt="wheels.dev"
+				class:list={['wd-logo', 'wd-logo--lockup', 'wd-logo--lockup-dark', className]}
+				loading="eager"
+				decoding="async"
+			/>
+		</>
+	)
+}
+
+{
+	variant === 'lockup-on-dark' && (
 		<img
-			src={src.src}
+			src={lockupWhitePng.src}
 			height={lockupHeights[size]}
 			alt="wheels.dev"
 			class:list={['wd-logo', 'wd-logo--lockup', className]}
@@ -63,4 +82,18 @@ const src =
 	.wd-logo--lockup {
 		width: auto;
 	}
+	/* Auto color-scheme lockup: dark-ink in light mode, white in dark mode.
+	   The site's dark mode is CSS-only (prefers-color-scheme in tokens.css),
+	   so the swap must be pure CSS too — see #3264. */
+	.wd-logo--lockup-dark {
+		display: none;
+	}
+	@media (prefers-color-scheme: dark) {
+		.wd-logo--lockup-light {
+			display: none;
+		}
+		.wd-logo--lockup-dark {
+			display: inline-block;
+		}
+	}
 </style>