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 <redacted>

diff --git a/static/images/default_thumbnail_dark.png b/static/images/default_thumbnail_dark.png
new file mode 100644 (file)
index 0000000..c054b7a
Binary files /dev/null and b/static/images/default_thumbnail_dark.png differ

diff --git a/static/images/default_thumbnail_light.png b/static/images/default_thumbnail_light.png
new file mode 100644 (file)
index 0000000..7bf35bc
Binary files /dev/null and b/static/images/default_thumbnail_light.png differ

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index a2f6b09cd004756a462f1939134c9f91135a03ab..f618f2de4556686397d649acac26b0f2ee22802a 100644 (file)
--- 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 899978a37ec22a317bb675d91008b797e569d48b..d928b7ab84947cd21580a8cac7027500e7b4b89f 100644 (file)
--- 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 d473e9a95c6934421052637ef3dd98c9701f761f..d0ab5049a91952b6e82d19be837ce37e0740c3b7 100644 (file)
--- 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