Styling

Although you can override any of the CSS style properties, it is recommended to use CSS variables. You can set them in your custom CSS stylesheet, or you can set them directly using JS. Example:

Fancybox.bind("[data-fancybox]", {
  mainStyle: {
    "--f-toolbar-padding": "16px 32px",
    "--f-toolbar-gap": "8px",
    "--f-button-border-radius": "50%",
    "--f-thumb-width": "82px",
    "--f-thumb-height": "82px",
    "--f-thumb-opacity": "0.5",
    "--f-thumb-hover-opacity": "1",
    "--f-thumb-selected-opacity": "1",
  },
  Carousel: {
    Toolbar: {
      display: {
        right: ["toggleFull", "close"],
      },
    },
  },
});

You can use the theme option to quickly switch to a light color scheme. It is also a good idea to customize the colors to match your website design and branding.

Fancybox.bind("[data-fancybox]", {
  theme: "light",
  mainStyle: {
    "--f-toolbar-padding": "0",
    "--f-button-svg-stroke-width": "1.5",
    "--f-arrow-svg-stroke-width": "1.75",
    "--f-thumb-width": "82px",
    "--f-thumb-height": "82px",
    "--f-thumb-border-radius": "8px",
    "--f-thumb-selected-shadow": "inset 0 0 0 2px #fff, 0 0 0 1.5px #ff2e00",
  },
  zoomEffect: false,
  fadeEffect: false,
  showClass: "f-fadeIn",
  hideClass: false,
  dragToClose: false,
  Carousel: {
    Toolbar: {
      absolute: false,
      display: {
        middle: ["counter"],
        right: ["toggleFull", "close"],
      },
    },
    Thumbs: {
      type: "classic",
    },
  },
});

Styling ​

Styling