For Affiliates

Theming

Customize the widget's appearance with light/dark mode, custom colors, and CSS variables.

3 min read

The widget supports light and dark themes out of the box, plus custom brand colors to match your site.

#Light Mode (Default)

The default theme uses a light background with dark text, suitable for most websites:

<exlitem-search api-key="YOUR_KEY"></exlitem-search>

No additional configuration is needed for light mode.

#Dark Mode

Set theme="dark" for sites with dark backgrounds:

<exlitem-search api-key="YOUR_KEY" theme="dark"></exlitem-search>

Dark mode adjusts all colors — background, text, borders, and cards — to work well on dark surfaces.

#Auto Mode

Use theme="auto" to automatically follow the user's operating system preference:

<exlitem-search api-key="YOUR_KEY" theme="auto"></exlitem-search>

This uses the prefers-color-scheme media query. When the user switches their OS between light and dark mode, the widget updates to match.

#Custom Brand Colors

Override the default amber accent color and other visual properties using HTML attributes:

<exlitem-search
  api-key="YOUR_KEY"
  primary-color="#2563eb"
  accent-fg="#ffffff"
  card-bg="#f8f9fa"
  text-color="#1a1a2e"
  border-color="rgba(0,0,0,0.10)"
  font-family="Inter, system-ui, sans-serif"
  border-radius="0.75rem"
></exlitem-search>

#Available Attributes

Attribute	Default	Description
`primary-color`	`#E8A016`	Accent color for buttons, links, and interactive elements
`accent-fg`	`#ffffff`	Text color on primary-colored buttons
`card-bg`	(theme default)	Background color for result cards
`text-color`	(theme default)	Primary text color
`border-color`	(theme default)	Border color for cards and inputs
`font-family`	`system-ui, sans-serif`	Font family for all widget text
`border-radius`	`0.5rem`	Border radius for cards and inputs

Any valid CSS color value works: hex (#2563eb), RGB (rgb(37, 99, 235)), or HSL (hsl(217, 91%, 60%)).

#CSS Variable Overrides

For advanced customization, the widget exposes CSS custom properties that you can override from your page's stylesheet. Since the widget uses Shadow DOM, you need to target the custom element itself:

exlitem-search {
  --exlitem-primary: #2563eb;
  --exlitem-radius: 0.5rem;
  --exlitem-font: "Inter", system-ui, sans-serif;
}

#Available Variables

Variable	Default (Light)	Description
`--exlitem-primary`	`#E8A016`	Accent color for buttons and links
`--exlitem-primary-fg`	`#ffffff`	Text color on primary-colored elements
`--exlitem-bg`	`#FAFAF8`	Widget background
`--exlitem-card-bg`	`#ffffff`	Result card background
`--exlitem-text-high`	`rgba(0,0,0,0.88)`	Primary text color
`--exlitem-text-medium`	`rgba(0,0,0,0.65)`	Secondary text color
`--exlitem-text-low`	`rgba(0,0,0,0.45)`	Muted text color
`--exlitem-border`	`rgba(0,0,0,0.10)`	Border color
`--exlitem-radius`	`0.5rem`	Border radius for cards and inputs
`--exlitem-font-family`	`system-ui, sans-serif`	Font family

These variables are scoped to the widget's Shadow DOM, so they won't leak into or conflict with your page styles. CSS custom properties cross the Shadow DOM boundary, which is why they work for theming.

#Admin Embed Panel

If you're a platform administrator, you can configure widget theming visually from the admin dashboard:

Navigate to Admin Dashboard → Affiliates
Click an affiliate to open the detail drawer
Scroll to the Widget Embed section
Use the color pickers and input fields to customize the theme
Changes save automatically on blur
Copy the generated embed snippet — it includes all your customizations as HTML attributes

All For Affiliates articles