When the Lightbox Theme is set to Custom, every color in the Lightbox can be defined individually. Colors are organized into five groups — General, Toolbar, Navigation, Thumbnails, and Info Panel — and the Custom Theme section only appears when Custom is selected.
Location Gallery Settings → Interactions → Lightbox Settings → Layout & Styling → Custom Theme
General #
Colors that apply globally across the Lightbox.
| Color | Default | Description |
|---|---|---|
| Background | rgba(0, 0, 0, 0.92) | Main backdrop behind the item and panels |
| Full Item Shadow Color | rgba(0, 0, 0, 0.3) | Shadow beneath the main item (only visible when Enable Shadow on Full Image is on) |
| Spinner Color | rgba(255, 255, 255, 0.8) | Loading spinner shown while items load |
| Progress Bar / Spinner Color | rgba(60, 70, 240, 1) | Auto-progress indicator color (visible when auto-progress is enabled with a Bar or Spinner indicator) |
Toolbar #
Colors for the top toolbar and its buttons.
| Color | Default | Description |
|---|---|---|
| Toolbar Background | rgba(0, 0, 0, 0.35) | Background of the top toolbar |
| Button Color | rgba(255, 255, 255, 0.7) | Icon color for toolbar buttons (close, info, fullscreen, zoom, etc.) |
| Button Hover Color | rgba(255, 255, 255, 1) | Icon color when hovering a button |
| Active Button Background | rgba(255, 255, 255, 0.15) | Background on buttons in an active/toggled-on state |
Navigation #
Colors for navigation arrows and dot indicators. This group is visible when Show Navigation Arrows is enabled.
Navigation Arrows
| Color | Default | Description |
|---|---|---|
| Arrow Icon Color | rgba(255, 255, 255, 1) | Color of the arrow icon |
| Arrow Icon Hover Color | rgba(255, 255, 255, 1) | Arrow icon color on hover |
| Arrow Background | rgba(0, 0, 0, 0.45) | Background of the arrow button |
| Arrow Background Hover | rgba(0, 0, 0, 0.75) | Arrow button background on hover |
Dot Navigation
| Color | Default | Description |
|---|---|---|
| Dot Color | rgba(255, 255, 255, 1) | Color of inactive dots |
| Dot Hover Color | rgba(255, 255, 255, 1) | Dot color on hover |
| Active Dot Color | rgba(60, 70, 240, 1) | Color of the dot representing the current item |
Thumbnails #
Colors for the thumbnail strip. This group is visible when Thumbnail Strip Location is not None.
| Color | Default | Description |
|---|---|---|
| Thumbnail Strip Background | rgba(0, 0, 0, 0.7) | Background area behind the thumbnail strip |
| Thumbnail Border | rgba(255, 255, 255, 0.45) | Border around each thumbnail tile |
| Active Thumbnail Highlight | rgba(60, 70, 240, 1) | Highlight color on the currently active item’s thumbnail |
Info Panel #
Colors for the info panel and its content blocks. This group is visible when Show Info Panel is Always or On Click.
| Color | Default | Description |
|---|---|---|
| Info Panel Background | rgba(0, 0, 0, 0.25) | Background of the entire info panel |
| Info Block Background | rgba(255, 255, 255, 0.06) | Background of individual blocks (visible when Info Blocks Style is Boxed) |
| Info Block Divider | rgba(255, 255, 255, 0.12) | Divider color between blocks (visible when Info Blocks Style is Divided) |
| Info Text Color | rgba(255, 255, 255, 0.85) | Body text inside the info panel |
| Info Title Color | rgba(255, 255, 255, 1) | Heading/title text inside each block |
Tips #
All colors accept any CSS color value — hex, RGB, or RGBA. Use RGBA to control transparency, which is especially useful for the backdrop and toolbar background.
The Dark and Light built-in themes use these same color properties internally. Switching to Custom gives full control over the same set of tokens. If you only want to change one or two colors, switch to Custom Theme and match the remaining values to the dark or light defaults listed above.
