Theming
Control the visual appearance of JavaScript SDK slots using data attributes and CSS custom properties.
Built-in themes
Set data-adkit-theme on any slot to control its color palette. The theme is applied per-slot — different slots on the same page can use different themes.
| Value | Behavior |
|---|---|
| "auto" | Follows the system prefers-color-scheme media query (default) |
| "light" | Always use the light palette |
| "dark" | Always use the dark palette |
index.html
Color data attributes
Override individual color tokens per slot using data attributes. These accept any valid CSS color value (hex, rgb, oklch, etc.).
| Attribute | What it controls |
|---|---|
| data-adkit-bg-color | Placeholder background fill (default: transparent) |
| data-adkit-border-color | Dashed outline color (applied at 40%/60% opacity for normal/hover) |
| data-adkit-text-color-primary | Price text color |
| data-adkit-text-color-secondary | Label ("Your ad here") and CTA ("Rent this spot") text color |
index.html
CSS custom properties
The SDK sets these CSS custom properties inline on each slot's root element. You can override them in your stylesheet to apply changes globally or conditionally.
| 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 derived from data-adkit-aspect-ratio |
styles.css
Data attributes (e.g.,
data-adkit-bg-color) take precedence over CSS custom property overrides because they are set as inline styles. Use data attributes for per-slot control and CSS variables for global defaults.