Appearance
The Appearance tab controls the visual presentation of the consent dialog: position, animation, the inline placeholder, color theme, and dark mode behavior. It is organized into sub-fieldsets — Layout, Theme, and Custom Colors (Light and Dark).
Layout
Consent Box Position
| Option | Value | Description |
|---|---|---|
| Center (modal) | 1 | Centered overlay with semi-transparent backdrop. Max width 500px. (default) |
| Bottom bar (full width) | 2 | Full-width bar fixed to the bottom of the viewport. |
| Bottom right | 3 | Card fixed to the bottom-right corner. Max width 400px. |
| Bottom left | 4 | Card fixed to the bottom-left corner. Max width 400px. |
| Inline (replace video) | 5 | Replaces each detected video in place with a click-to-load placeholder. |
See Positions & Animations for visual details and responsive behavior.
Inline Placeholder Size
These fields appear only when Consent Box Position is set to Inline (replace video):
| Field | Type | Default | Range |
|---|---|---|---|
| Placeholder Width (%) | Number | 100 | 10–100 |
| Placeholder Height (px) | Number | 400 | 100–1000 |
Set these to match your video's dimensions so the placeholder keeps the same layout footprint.
Animation
The animation field applies to overlay positions (1–4) only:
| Option | Description |
|---|---|
| Fade in down | Slides in from above (default) |
| Fade in up | Slides in from below |
| Fade in left | Slides in from the left |
| Fade in right | Slides in from the right |
All animations respect the prefers-reduced-motion media query. When a visitor has reduced motion enabled, the consent box appears instantly.
Play Button Style & Placeholder Image
When the position is Inline (replace video), you can also configure the poster and play button. See Placeholder Images for full detail.
| Field | Options | Default |
|---|---|---|
| Play Button Style | None, Light (white), Dark, Red (YouTube-style) | Red (YouTube-style) |
| Placeholder Image | Icon only (privacy-safe), Single custom image, Per-video custom images, YouTube thumbnail (leaks IP before consent) | Icon only (privacy-safe) |
| Custom Image | Media field (shown for Single custom image) | — |
| Per-video Placeholders | Repeatable list of YouTube Video ID + Placeholder Image rows (shown for Per-video custom images) | Empty |
The play button is drawn only over an image; in Icon only mode it is not shown.
Theme
Color Theme
| Theme | Light Colors | Description |
|---|---|---|
| Clean | White background, green accept button | Neutral, works with any site (default) |
| Midnight | Navy background, amber accept button | Bold, high-contrast |
| Forest | Emerald tones, coral accept button | Natural, organic feel |
| Slate | Gray background, blue accept button | Professional, understated |
| Warm | Cream background, teal accept button | Friendly, approachable |
| Custom colors | Your colors | Full control via color pickers |
Each built-in theme includes a carefully crafted dark mode variant.
Dark Mode
| Option | Behavior |
|---|---|
| Auto (follow OS preference) | Uses the prefers-color-scheme media query to detect the visitor's OS setting. Switches automatically. (default) |
| Always light | Forces the light variant regardless of OS preference. |
| Always dark | Forces the dark variant regardless of OS preference. |
Custom Colors
When Color Theme is set to Custom colors, 6 color picker fields appear for light mode. The colors apply to the consent box and to every inline placeholder:
| Field | Default | CSS Variable |
|---|---|---|
| Background Color | #ffffff |
--sly-bg |
| Text Color | #374151 |
--sly-text |
| Accept Button Background | #16a34a |
--sly-btn-agree-bg |
| Accept Button Text | #ffffff |
--sly-btn-agree-text |
| Decline Button Background | #e5e7eb |
--sly-btn-decline-bg |
| Decline Button Text | #4b5563 |
--sly-btn-decline-text |
When dark mode is Auto or Always dark, 6 additional color pickers appear for the dark variant:
| Field | Default | CSS Variable |
|---|---|---|
| Dark: Background Color | #1f2937 |
--sly-bg |
| Dark: Text Color | #f3f4f6 |
--sly-text |
| Dark: Accept Button Background | #22c55e |
--sly-btn-agree-bg |
| Dark: Accept Button Text | #ffffff |
--sly-btn-agree-text |
| Dark: Decline Button Background | #374151 |
--sly-btn-decline-bg |
| Dark: Decline Button Text | #d1d5db |
--sly-btn-decline-text |
Tip: The dark color pickers are hidden when dark mode is set to Always light, since the dark variant will never be displayed.