Customization

Yet Another React Lightbox allows you to customize pretty much any aspect of its visual appearance. Custom icons can be rendered via render prop. The color palette can be customized through CSS variables. The existing styles can be modified by targeting customization slots.

Customization slots

Yet Another React Lightbox defines the following customization slots that can be targeted either via lightbox styles prop or via corresponding CSS class.

CSS variables

All design-related styles can be overwritten via corresponding CSS variables. Here are some examples of lightbox variables, and you can find the complete list in the lightbox stylesheet.

• --yarl__color_backdrop
• --yarl__color_button
• --yarl__color_button_active
• --yarl__color_button_disabled
• --yarl__slide_title_color
• --yarl__slide_title_font_size
• --yarl__slide_title_font_weight
• --yarl__slide_description_color

Styling

Here are some typical recipes to style the lightbox.

CSS-in-JS

<Lightbox
    styles={{ container: { backgroundColor: "rgba(0, 0, 0, .8)" } }}
    // ...
/>

or

<Lightbox
    styles={{ root: { "--yarl__color_backdrop": "rgba(0, 0, 0, .8)" } }}
    // ...
/>

Global CSS

.yarl__container {
    background-color: rgba(0, 0, 0, .8);
}

or

.yarl__root {
    --yarl__color_backdrop: rgba(0, 0, 0, .8);
}

Module scoped CSS

import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import styles from "./Component.module.css";

// ...

<Lightbox
    className={styles.lightbox}
    // ...
/>

.lightbox :global(.yarl__container) {
    background-color: rgba(0, 0, 0, .8);
}

or

.lightbox {
    --yarl__color_backdrop: rgba(0, 0, 0, .8);
}