Appearance & theming

Named themes

lightning("init", { theme: "light" }); // "light" | "dark" | "auto"

"auto" follows the visitor’s prefers-color-scheme.

Custom design tokens

Pass a token object instead of a name to match your brand. Tokens map to CSS custom properties inside the banner’s shadow root:

lightning("init", {
  theme: {
    surface: "#ffffff",
    text: "#14151a",
    accent: "#ffd400",
    accentText: "#14151a",
    border: "#e5e7eb",
    radius: "10px",
    fontFamily: "Inter, system-ui, sans-serif",
    // …textMuted, secondary, secondaryText, overlay
  },
});

Position & floating button

lightning("init", {
  position: "bottom", // "bottom" | "top" | "bottom-left" | "bottom-right"
  showFloatingButton: true, // persistent re-open button after a decision
  floatingButtonPosition: "bottom-left",
});

White-labelling

lightning("init", { hideBranding: true }); // hides the "Powered by Lightning" footer