Widget Themes

Pre-built themes and dark mode support.

Built-in Themes

Light Theme

Clean and minimal, works well on light backgrounds.

data-theme="light"

• White background
• Dark text
• Subtle shadows

Dark Theme

Optimized for dark mode websites.

data-theme="dark"

• Dark background
• Light text
• Accent glow effects

Auto Theme

Automatically matches the user's system preference.

data-theme="auto"

Uses prefers-color-scheme media query to detect user preference.

Theme Configuration

Combine themes with custom colors:

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="wgt_abc123"
  data-theme="auto"
  data-primary-color="#7c3aed"
  async
></script>

Syncing with Your Site

If your site has a theme toggle, sync the widget:

// When your site theme changes
document.documentElement.classList.toggle('dark');

// Update widget theme
window.FeedValue?.setTheme('dark'); // or 'light' or 'auto'

Theme CSS Variables

Override theme defaults with CSS:

/* Light theme overrides */
.feedvalue-widget[data-theme="light"] {
  --fv-bg: #fafafa;
  --fv-text: #1a1a1a;
  --fv-border: #e5e5e5;
}

/* Dark theme overrides */
.feedvalue-widget[data-theme="dark"] {
  --fv-bg: #1a1a1a;
  --fv-text: #fafafa;
  --fv-border: #333333;
}

TIP

The auto theme provides the best user experience by respecting user preferences.