Art Gallery theme

A typography-led Drupal theme for artists and galleries, built for Drupal Canvas and the Art Gallery site template. Black ink on a white or warm ground, Archivo for display type, IBM Plex Mono for the "wall labels" that describe each work, one accent color used only as a highlight behind short labels, and gray mats behind the artworks.

The theme was generated from the Mercury starterkit and restyled. Like Mercury it is Tailwind 4 + daisyUI 5, single-directory components only (no Canvas code components), with cva for component variants.

What you get

• Gallery components: artwork-card (image on a mat with a wall label and lightbox link), artwork-details (the full wall label of a work: medium, dimensions, edition, status and price), exhibition-row (year, image, title and dates in one line), exhibition-facts and facts (label/value lists), and a hero that puts a wall label over or under a full-width image.
• General components, restyled from Mercury: section, group, grid, heading, text, button, badge, blockquote, card, cta, image, navbar, footer, accordion, anchor, icon, video.
• A lightbox for artworks, built on PhotoSwipe 5 and bundled with the theme (no CDN). It is keyboard-operable (Enter opens, Escape closes, focus is trapped and returned), uses the wall label as its caption and respects prefers-reduced-motion. The markup contract is the same as the contrib PhotoSwipe module's (a.photoswipe with data-pswp-width/data-pswp-height), so a site can switch to that module without touching templates; when it is installed the theme's lightbox steps aside.
• Theme settings (Appearance → Art Gallery → Settings): light or dark scheme, page ground (white, two warm off-whites or a custom color) and the accent color. The form refuses combinations that do not reach a 4.5:1 contrast ratio.
• Accessibility as a requirement, not an afterthought: one h1 per page and a sane heading order, visible focus rings, 24 px minimum targets, reduced-motion support, and axe-clean default pages. See ACCESSIBILITY.md.
• Bundled fonts (Archivo, IBM Plex Mono; SIL OFL 1.1) and Phosphor icons, no external requests.

Customizing

See CUSTOMIZING.md: colors and fonts without a rebuild, the --ag-* color contract and how Canvas Brand Kits plug into it, rebuilding the CSS, formatting, and component JavaScript.

Known issues

Canvas code components are not compatible with Tailwind-based themes, and creating one will break the styling until #3549628 lands. Workaround: in Canvas's code editor, open the Global CSS tab and paste the contents of theme.css and then main.css (without its @import lines) and save.

Getting help

Please use the issue queue for bugs and feature requests.

Credits

Generated from the Mercury starterkit (GPL-2.0-or-later) and restyled by Sven Decabooter. It bundles Archivo and IBM Plex Mono (SIL OFL 1.1), PhotoSwipe and Motion (MIT) and Phosphor Icons (MIT). The example images in the component assets are public-domain works. The full list with links is in CREDITS.md.

AI disclosure

This theme was built with AI assistance, but was reviewed, tested and refined by the maintainer.