From a05ea86f931b17b0599960a6d496af842b527f00 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Sat, 18 Apr 2026 20:03:54 +0200
Subject: feat: theme-aware default thumbnails with picture element

- Use HTML <picture> element with prefers-color-scheme media query
- Fallback dark thumbnail via content: url() CSS for theme-light class
- Automatically displays light/dark thumbnails based on user theme
- Articles without custom images now show default thumbnails
- Maintains all existing hover effects and type badges

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/assets/css/main.css             |  5 +++++
 themes/danix-xyz-hacker/assets/css/main.min.css         |  6 ++++++
 .../layouts/partials/article-list-item.html             | 17 ++++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

(limited to 'themes')

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index a2f6b09..f618f2d 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -72,6 +72,11 @@ html.theme-light {
   }
 }
 
+/* Theme-aware picture element for default thumbnails */
+html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
+  content: url('/images/default_thumbnail_light.png');
+}
+
 @layer base {
   html {
     @apply overflow-x-hidden;
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 899978a..d928b7a 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -2532,6 +2532,12 @@ html.theme-light {
   }
 }
 
+/* Theme-aware picture element for default thumbnails */
+
+html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
+  content: url('/images/default_thumbnail_light.png');
+}
+
 /* Prose overrides for light theme */
 
 html.theme-light .prose,
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
index d473e9a..d0ab504 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -4,6 +4,7 @@
 {{ $excerpt := .Description | default .Summary }}
 
 {{ $imageURL := "" }}
+{{ $useDefaultThumbnail := false }}
 {{ if .Params.image }}
   {{ $resource := .Resources.GetMatch .Params.image }}
   {{ if $resource }}
@@ -11,18 +12,32 @@
   {{ else }}
     {{ $imageURL = .Params.image }}
   {{ end }}
+{{ else }}
+  {{ $useDefaultThumbnail = true }}
 {{ end }}
 
 <article class="card group bg-bg">
   <!-- Thumbnail -->
-  {{ if $imageURL }}
+  {{ if or $imageURL $useDefaultThumbnail }}
   <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
+    {{ if $useDefaultThumbnail }}
+    <picture>
+      <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
+      <img
+        src="/images/default_thumbnail_dark.png"
+        alt="{{ .Title }}"
+        class="card-image group-hover:scale-105 transition-transform duration-200"
+        loading="lazy"
+      />
+    </picture>
+    {{ else }}
     <img
       src="{{ $imageURL }}"
       alt="{{ .Title }}"
       class="card-image group-hover:scale-105 transition-transform duration-200"
       loading="lazy"
     />
+    {{ end }}
     <!-- Type badge pill overlay -->
     {{ if $typeData }}
     <div
-- 
cgit v1.2.3