@hoangyell/gallery 1.0.0 → 1.0.5

package/README.md

@@ -2,6 +2,28 @@
 
 [Astro](https://astro.build/) image gallery component with lightbox, pyramid multi-row layout, and accessible controls.
 
+**Live demo → [gallery.hoangyell.com](https://gallery.hoangyell.com)**
+
+<p align="center">
+  <a href="https://gallery.hoangyell.com">
+    <img
+      src="https://raw.githubusercontent.com/HoangYell/hoangyell-gallery/main/packages/astro/docs/site-hero.jpg"
+      alt="@hoangyell/gallery landing page hero — The friendly Astro image gallery"
+      width="720"
+    />
+  </a>
+</p>
+
+<p align="center">
+  <em>Click any image to open the lightbox — keyboard arrows, swipe, ESC to close.</em>
+  <br />
+  <img
+    src="https://raw.githubusercontent.com/HoangYell/hoangyell-gallery/main/packages/astro/docs/gallery-lightbox.jpg"
+    alt="Lightbox view with page indicator, close button, and next-image arrow"
+    width="640"
+  />
+</p>
+
 ## Features
 
 - **Pyramid layout** — distribute images across rows with `rows` prop
@@ -60,6 +82,16 @@ import { Gallery } from "@hoangyell/gallery";
 | `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit |
 | `class` | `string` | — | Extra wrapper class |
 
+## Dark mode
+
+The component auto-themes via three mechanisms (last one wins):
+
+1. `prefers-color-scheme: dark` — OS preference (default).
+2. `<html class="dark">` or `<html data-theme="dark">` — Tailwind-style class toggle.
+3. `<html class="light">` or `<html data-theme="light">` — explicit light theme override.
+
+This means it Just Works™ with manual theme toggles **and** OS preference.
+
 ## Customization
 
 Override CSS custom properties on `.hy-gallery`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoangyell/gallery",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "description": "Astro image gallery with lightbox, pyramid multi-row layout, and accessible controls.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,7 @@
     "photo-gallery"
   ],
   "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
-  "homepage": "https://github.com/HoangYell/hoangyell-gallery#readme",
+  "homepage": "https://gallery.hoangyell.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/HoangYell/hoangyell-gallery.git",

package/src/Gallery.astro

@@ -159,6 +159,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     --hy-gallery-control-bg: rgba(255, 255, 255, 0.95);
   }
 
+  /* OS-level dark preference. */
   @media (prefers-color-scheme: dark) {
     .hy-gallery {
       --hy-gallery-bg: #0f172a;
@@ -170,6 +171,28 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     }
   }
 
+  /* Explicit light theme on any ancestor wins over OS preference.
+     Supports Tailwind-style `.light` class and `[data-theme="light"]`. */
+  :where(.light, [data-theme="light"]) .hy-gallery {
+    --hy-gallery-bg: #f8fafc;
+    --hy-gallery-overlay-bg: rgba(255, 255, 255, 0.7);
+    --hy-gallery-accent: #2563eb;
+    --hy-gallery-border: #e2e8f0;
+    --hy-gallery-text: #334155;
+    --hy-gallery-control-bg: rgba(255, 255, 255, 0.95);
+  }
+
+  /* Explicit dark theme on any ancestor wins over OS preference.
+     Supports Tailwind-style `.dark` class and `[data-theme="dark"]`. */
+  :where(.dark, [data-theme="dark"]) .hy-gallery {
+    --hy-gallery-bg: #0f172a;
+    --hy-gallery-overlay-bg: rgba(2, 6, 23, 0.8);
+    --hy-gallery-accent: #60a5fa;
+    --hy-gallery-border: #334155;
+    --hy-gallery-text: #e2e8f0;
+    --hy-gallery-control-bg: rgba(30, 41, 59, 0.95);
+  }
+
   .hy-gallery {
     display: flex;
     flex-direction: column;