Theming & Colors

Control how ads look on your site.

Color Priority

Colors are resolved in this order, highest priority first:

1. Publisher data attributes (set on the script tag) → 2. Advertiser colors (set in the campaign) → 3. Defaults (white background, dark text).

This means your data attributes always win. If you don't set any, the advertiser's brand colors are used. If the advertiser hasn't set colors either, the defaults apply.

Dark Theme Shortcut

Add data-theme="dark" for a quick dark mode look. This sets a dark background with light text without needing individual color overrides.

<script
  src="https://adventory.to/ad.banner.js"
  data-placement="YOUR_PLACEMENT_ID"
  data-theme="dark"
></script>

Custom Color Overrides

For full control, use individual data attributes to override specific colors:

data-bg — background color
data-text — text color
data-cta-bg — CTA button background
data-cta-text — CTA button text

Example with custom colors

<script
  src="https://adventory.to/ad.banner.js"
  data-placement="YOUR_PLACEMENT_ID"
  data-bg="#1a1a2e"
  data-text="#e0e0e0"
  data-cta-bg="#6c3ce9"
  data-cta-text="#ffffff"
></script>
All color values should be hex codes (e.g. #ff5500).