Theming
Control the visual appearance of Adkit slots. Set a built-in theme, override individual color tokens, or apply global CSS variables.
theme prop
Every AdSlot accepts a theme prop that controls the placeholder's built-in color scheme.
| Value | Behavior |
|---|---|
| "auto" | Follows prefers-color-scheme media query (default) |
| "light" | Always use the light palette |
| "dark" | Always use the dark palette |
src/components/Sidebar.tsx
Theme is set per-slot. There is no global theme prop on
AdkitProvider — each slot manages its own appearance independently.styles prop — fine-grained overrides
The styles prop accepts an AdSlotStyles object that overrides individual color tokens on the placeholder. All fields are optional and any valid CSS color value is accepted.
| Field | What it controls |
|---|---|
| borderColor | Dashed outline color of the placeholder (applied at 40% / 60% opacity for normal / hover) |
| backgroundColor | Background fill of the placeholder (default: transparent) |
| textColorPrimary | Price text color |
| textColorSecondary | Label ("Your ad here") and CTA ("Rent this spot") text color |
src/components/Indigo.tsx
CSS custom properties
The slot sets these CSS custom properties inline on its root element. You can target them in your stylesheet for global or conditional overrides — though the styles prop is usually easier for per-slot changes.
| Variable | Description |
|---|---|
| --adkit-bg | Placeholder background |
| --adkit-text | Primary text (price) |
| --adkit-text-muted | Secondary text (label, CTA) |
| --adkit-text-strong | Strong text emphasis |
| --adkit-border | Dashed border color (normal state) |
| --adkit-border-hover | Dashed border color (hover state) |
| --adkit-aspect | CSS aspect-ratio value derived from the aspectRatio prop |
src/index.css
Data attributes on the DOM element
The rendered slot element has these data attributes you can use as CSS selectors:
| Attribute | Value |
|---|---|
| data-adkit-site | Your site ID |
| data-adkit-slot | The slot name |
| data-adkit-ratio | The aspect ratio value (e.g. 4:3) |
| data-adkit-size | sm, md, or lg |