Match the widget to your brand — colors, dark mode, and dynamic theme syncing.

Theming

Lumifeed gives you four layers of control over the widget's appearance, from zero-config CSS variable inheritance to full programmatic control.

Theme mode

Set data-theme on the script tag (or the theme option in init()):

Value	Behavior
`dark`	Always dark
`light`	Always light
`auto`	Follows `prefers-color-scheme` media query
`follow`	Mirrors your app's dark/light toggle in real-time

<!-- Mirrors your app's Tailwind dark mode class automatically -->
<script
  src="https://lumifeed.app/widget/lumifeed-widget.iife.js"
  data-lumifeed-key="fp_live_YOUR_KEY"
  data-base-url="https://lumifeed.app"
  data-theme="follow"
  async
></script>

`follow` mode — how it works

follow watches document.documentElement for any of these signals and re-applies the widget theme whenever they change:

class="dark" or class="light" (Tailwind CSS dark mode)
data-theme="dark" / data-theme="light" attribute
data-color-scheme="dark" / data-color-scheme="light" attribute

If none match, it falls back to prefers-color-scheme. This means Tailwind, shadcn/ui, Radix, and most other design system dark-mode implementations work out of the box — no extra code needed.

Dual palettes (light + dark)

When using auto or follow mode, you can configure separate color palettes for each theme in the Lumifeed dashboard under Widget Setup → Appearance → Colors.

Use the Light / Dark tabs to set an accent color, panel background, and surface color for each mode independently. When the widget switches modes, it automatically applies the correct palette.

CSS variable bridge

The widget renders inside a Shadow DOM, but CSS custom properties (variables) still inherit through the boundary. You can override any widget color from your app's global CSS:

/* Apply to both light and dark modes */
:root {
  --lf-accent: #6366f1;
}

/* Per-mode overrides using your app's dark class */
:root.dark {
  --lf-accent: #818cf8;
  --lf-bg: #09090b;
  --lf-bg-raised: #111111;
}

Full list of public CSS variables

Variable	Controls
`--lf-accent`	Accent color (button, active tabs, focus rings)
`--lf-accent-fg`	Text color on accent background (default: `#ffffff`)
`--lf-bg`	Panel background
`--lf-bg-raised`	Surface color (inputs, category badges)
`--lf-bg-hover`	Hover background
`--lf-border`	Border color
`--lf-text`	Primary text color
`--lf-text-muted`	Secondary / placeholder text color

These variables are only consulted as fallbacks — if you've configured colors in the Lumifeed dashboard, those take precedence.

shadcn/ui auto-bridge

If your app uses shadcn/ui, add data-css-vars="shadcn" to automatically map shadcn's CSS variables (--primary, --background, --card, etc.) to the widget. The mapping re-runs on every theme change, so dark mode transitions are seamless.

<script
  src="https://lumifeed.app/widget/lumifeed-widget.iife.js"
  data-lumifeed-key="fp_live_YOUR_KEY"
  data-base-url="https://lumifeed.app"
  data-theme="follow"
  data-css-vars="shadcn"
  async
></script>

Runtime control via JS API

For React, Vue, or other apps that manage theme in a context provider, update the widget whenever your theme changes:

// React example
useEffect(() => {
  window.Lumifeed.setTheme(isDark ? "dark" : "light")
}, [isDark])

To update colors dynamically:

window.Lumifeed.setColors({
  light: { accentColor: "#6366f1" },
  dark:  { accentColor: "#818cf8", panelBg: "#09090b", surfaceColor: "#111111" },
})

setColors merges the provided keys into the active palettes — you only need to pass the values you want to override.

See the full JavaScript API reference for all available methods.

Theming

On this page