Appearance options

Dark mode, grid columns, card aspect ratio, category display style and modal height.

All appearance options live under Before After Gallery → Settings → Appearance (Pro). The free plugin includes the brand-color setting; the rest are Pro.

Brand color (Free & Pro)

Set a primary color for the gallery. It accepts a solid hex value or a CSS gradient, and is applied across buttons, accents and active states.

Dark mode (Pro)

Choose how the gallery renders:

Off — always light.
Always on — always dark.
Auto — follows the visitor’s operating-system preference, updating live if they switch.

Grid columns (Pro)

Auto, 2, 3 or 4 columns. Auto adapts to the viewport; fixed values are capped on small screens so cards never get too narrow.

Card aspect ratio (Pro, Classic layout)

Force a consistent card shape in the Classic grid:

Default (square), 1:1, 4:3, or 3:2.

This keeps an even grid even when source images have mixed dimensions. (Ignored in the Masonry layout, which uses natural heights.)

Category display style (Pro)

How the category selector appears:

Carousel — image cards you can swipe through.
Tabs — a compact, text-only tab row with scroll arrows.

Set the case modal’s maximum height on desktop, from 20–100 vh (leave at the default for ~90vh). On mobile the modal always uses the full viewport height.

Hide elements (Pro)

Under Display Options you can selectively hide UI to match your design:

Hide case title on cards
Hide category label on cards
Hide the filter sidebar (Classic layout)
Hide case details in the modal