Style and theme

Change the look of albums and the lightbox - css all vs structure, CSS variables for colors, buttons, mat, glow and placeholders, ui classes, scoped styles, dark themes, and Tailwind CSS with a complete Tailwind lightbox.

Nuxt Photo splits its CSS in two. The structure CSS does the layout: row and column geometry, the lightbox position, gestures, and transitions. The theme CSS does the look: colors, buttons, shadows, and the glow. Keep the structure CSS and choose who owns the look.

`nuxtPhoto.css`	Loads	Use it when
`'all'`	Structure and theme	You adjust the included look with CSS variables.
`'structure'`	Structure only. Default.	Your own CSS or Tailwind owns the look.
`'none'`	Nothing	You rewrite every structural rule. Rarely right.

With 'none', albums collapse and the lightbox cannot position photos until your CSS replaces all structural rules.

Adjust the included look

With css: 'all', set CSS variables on .np-lightbox:

app/assets/css/main.css

/* A light room, square photos, and no glow */
.np-lightbox {
  --np-backdrop-bg: #f4f2ee;
  --np-ambient-opacity: 0;
  --np-img-radius: 0;
  --np-btn-bg: rgba(255, 255, 255, 0.8);
  --np-btn-hover-bg: #fff;
  --np-btn-color: #1c1b19;
  --np-btn-border: rgba(0, 0, 0, 0.08);
  --np-focus-ring: #1c1b19;
  --np-counter-color: #4a4843;
  --np-caption-color: #1c1b19;
  --np-caption-secondary: #6b6862;
}

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-photo'],
  css: ['~/assets/css/main.css'],
  nuxtPhoto: { css: 'all' },
})

The mat around the photo is structure, so its variables work in both modes:

css

.np-lightbox {
  --np-frame-inset-inline: 72px; /* space left and right of the photo */
  --np-caption-reserve: 120px; /* room below the photo for the caption */
}

The CSS reference lists every variable and class.

Match the placeholder to your page

Before a photo loads, its frame shows the photo's blurred preview or average color. Photos without either show --np-placeholder-bg, a light gray. Set it for dark pages:

app/assets/css/main.css

:root {
  --np-placeholder-bg: #e7e5e4;
}

.dark {
  --np-placeholder-bg: #292524;
}

Add classes to albums and carousels

Ready-made components take a ui object. Its classes are added to the component's own classes:

vue

<PhotoAlbum :photos="photos" :ui="{ item: 'gallery-item', img: 'gallery-image' }" />

Component	`ui` keys
`Photo`	`root`, `img`, `caption`
`PhotoAlbum`	`root`, `item`, `img`
`PhotoCarousel`	`root`, `slide`, `img`, `thumb`, `caption`, `controls`

In a <style scoped> block, reach the component's own classes with :deep():

vue

<style scoped>
.portfolio :deep(.np-album__item) {
  border-radius: 8px;
  overflow: hidden;
}
</style>

Own the look with Tailwind

Load only the structure CSS, and add Tailwind:

nuxt.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-photo'],
  css: ['~/assets/css/main.css'],
  nuxtPhoto: { css: 'structure' },
  vite: { plugins: [tailwindcss()] },
})

app/assets/css/main.css

@import 'tailwindcss';

Style albums with ui:

vue

<PhotoAlbum
  :photos="photos"
  :ui="{
    item: 'group overflow-hidden rounded-xl bg-stone-900',
    img: 'transition duration-300 group-hover:scale-[1.02]',
  }"
/>

With 'structure', the built-in lightbox has no colors: the color variables above belong to the theme CSS and do nothing. Give it a look with your own rules on its classes:

app/assets/css/main.css

@import 'tailwindcss';

.np-lightbox__backdrop {
  @apply bg-stone-950;
}

.np-lightbox__btn {
  @apply grid size-10 place-items-center rounded-full bg-white/10 text-white;
  @apply hover:bg-white/20 disabled:opacity-35;
  @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white;
}

.np-lightbox__counter,
.np-lightbox__label {
  @apply text-sm text-white/80;
}

For full control over the markup, build the lightbox from the lower-level components. This one uses only Tailwind utilities. The mat comes from the --np-frame-inset-* variables, and the caption and arrows follow the photo through --np-frame-*:

River canyon with moss-covered walls — app/components/TailwindGallery.vue

Dandelion seed heads in evening light — app/components/TailwindGallery.vue

Check the result

Open the lightbox in light and dark mode, and at phone width. Every button shows a visible focus ring with Tab, and disabled buttons look disabled. With 'structure', check that the backdrop is not transparent.