Docs
Core Concepts
Theming

Theming

FeatureDrop supports theme presets and token overrides.

Apply theme to a subtree

featuredrop-theme.tsx
import { ThemeProvider, ChangelogWidget } from 'featuredrop/react'
 
<ThemeProvider theme="dark">
  <ChangelogWidget />
</ThemeProvider>

Preset options: light, dark, minimal, vibrant, auto.

Component-scoped theme

<ChangelogWidget
  theme={{
    colors: { primary: '#0ea5e9', background: '#ffffff', text: '#0f172a' },
    radii: { lg: '16px' }
  }}
/>

Utility APIs

import {
  FEATUREDROP_THEMES,
  createTheme,
  resolveTheme,
  themeToCSSVariables
} from 'featuredrop'
 
const custom = createTheme({ colors: { primary: '#0ea5e9' } })
const resolved = resolveTheme('auto', { prefersDark: true })
const cssVars = themeToCSSVariables(custom)

Theme values become CSS variables, so they can also be merged with your design-system tokens.