Theming

Color

Set the primary accent color using data-primary-color (HTML) or the primaryColor prop (React):

<!-- HTML -->
<script
  src="https://cdn.lumifeed.app/widget.js"
  data-key="YOUR_KEY"
  data-primary-color="#0ea5e9"
  defer
></script>

// React
<LumifeedWidget apiKey={key} primaryColor="#0ea5e9" />

The color is used for the button background, focus rings, and submit button.

Value	Behavior
`auto` (default)	Follows `prefers-color-scheme` media query
`light`	Always light
`dark`	Always dark

<script src="..." data-key="..." data-theme="dark" defer></script>

Change the floating button text:

<script src="..." data-key="..." data-label="Send feedback" defer></script>

The widget renders inside a Shadow DOM, so your global CSS won't bleed in. You can inject custom styles via the customCss prop:

<LumifeedWidget
  apiKey={key}
  customCss={`
    .fp-button { border-radius: 4px; }
    .fp-form { font-family: "Inter", sans-serif; }
  `}
/>