Theme Logos

Themes can include logo configurations that automatically place your logo on slides. This enables consistent branding across all presentations using a theme, with intelligent placement based on slide type.

Overview

The logo system supports:

Automatic placement - Logos appear on slides without manual insertion
9 position options - Corner, center, and edge positions
Light/dark variants - Automatic switching for different backgrounds
Per-slide-type rules - Different placement for title, content, and section slides
Size control - Preset sizes or custom dimensions
Fine-tuning - Opacity and margin adjustments

Position Options

Logos can be placed in 9 positions on the slide, plus “none” to hide:

+------------+------------+------------+
|            |            |            |
| top-left   | top-center | top-right  |
|            |            |            |
+------------+------------+------------+
|            |            |            |
| left-center|   center   |right-center|
|            |            |            |
+------------+------------+------------+
|            |            |            |
|bottom-left |bottom-center|bottom-right|
|            |            |            |
+------------+------------+------------+

Position values:

Position	Description
`top-left`	Top-left corner
`top-center`	Top edge, horizontally centered
`top-right`	Top-right corner
`left-center`	Left edge, vertically centered
`center`	Center of the slide
`right-center`	Right edge, vertically centered
`bottom-left`	Bottom-left corner
`bottom-center`	Bottom edge, horizontally centered
`bottom-right`	Bottom-right corner (most common)
`none`	Hide logo on this slide type

Size Options

Logos can use preset sizes or custom dimensions:

Preset sizes:

Size	Height
`small`	40px
`medium`	80px
`large`	120px

Custom dimensions:

{ "width": 100, "height": 50 }

Width and height maintain aspect ratio if only one is specified.

Pages Options

Control which slides show the logo:

Option	Description
`all`	Show on every slide
`first`	Only the first slide
`last`	Only the last slide
`first-and-last`	First and last slides only
`content`	All slides except first and last

Logo Variants

Themes can include two logo versions:

Primary logo (logoAssetId) - For light backgrounds (typically dark/colored logo)
Light variant (logoLightAssetId) - For dark backgrounds (typically white/light logo)

The variant property in placement rules controls which is used:

{
  "default": { "position": "bottom-right", "size": "small" },
  "invert": { "position": "bottom-right", "size": "small", "variant": "light" }
}

Per-Slide-Type Rules

Different slide types can have different logo placement. Common slide classes:

Class	Description
`default`	Applied to all slides unless overridden (required)
`lead`	Title/intro slides
`section`	Section divider slides
`invert`	Dark background slides
Custom classes	Any class defined in your theme CSS

Example configuration:

{
  "default": { "position": "bottom-right", "size": "small" },
  "lead": { "position": "top-left", "size": "large" },
  "section": { "position": "none" },
  "invert": { "position": "bottom-right", "size": "small", "variant": "light" }
}

Full LogoPlacement Structure

interface LogoSlideRule {
  position: LogoPosition;     // Where on the slide
  size: LogoSize;             // "small" | "medium" | "large" | {width?, height?}
  opacity?: number;           // 0.0 to 1.0 (default: 1.0)
  margin?: number | {         // Pixels from edge
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
  };
  variant?: "default" | "light";  // Which logo asset to use
}

interface LogoPlacement {
  default: LogoSlideRule;     // Required - base rule
  lead?: LogoSlideRule;       // Optional override
  section?: LogoSlideRule;    // Optional override
  invert?: LogoSlideRule;     // Optional override
  [customClass: string]: LogoSlideRule;  // Any custom class
}

CLI Usage

Adding a theme with logo

# Simple logo configuration
agentpreso themes add ./my-theme \
  --logo ./assets/logo.png \
  --logo-position bottom-right \
  --logo-size small

# With light variant for dark slides
agentpreso themes add ./my-theme \
  --logo ./assets/logo-dark.png \
  --logo-light ./assets/logo-light.png \
  --logo-position bottom-right \
  --logo-size medium

# With custom dimensions
agentpreso themes add ./my-theme \
  --logo ./assets/logo.svg \
  --logo-size 80x40

# Advanced placement from JSON file
agentpreso themes add ./my-theme \
  --logo ./assets/logo.png \
  --logo-light ./assets/logo-light.png \
  --logo-placement ./logo-rules.json

Updating theme logo

# Update logo file
agentpreso themes update my-brand --logo ./new-logo.png

# Change position
agentpreso themes update my-brand --logo-position top-left

# Advanced placement inline
agentpreso themes update my-brand --logo-placement-json '{
  "default": {"position": "bottom-right", "size": "small"},
  "lead": {"position": "top-left", "size": "large"}
}'

Viewing theme logo configuration

agentpreso themes show my-brand

Output:

Theme: my-brand
Description: Company branding theme
Built-in: No
Created: 2024-01-15T10:30:00Z

Logo Configuration:
  Primary Logo Asset: asset_abc123
  Light Logo Asset: asset_def456
  Placement Rules:
    {
        "default": {
            "position": "bottom-right",
            "size": "small"
        },
        "lead": {
            "position": "top-left",
            "size": "large"
        },
        "invert": {
            "position": "bottom-right",
            "size": "small",
            "variant": "light"
        }
    }

API Usage

Creating a theme with logo (REST API)

# First upload the logo assets
LOGO_ID=$(curl -X POST https://api.agentpreso.com/api/assets \
  -H "Authorization: Bearer ap_..." \
  -F "[email protected]" \
  | jq -r '.id')

LOGO_LIGHT_ID=$(curl -X POST https://api.agentpreso.com/api/assets \
  -H "Authorization: Bearer ap_..." \
  -F "[email protected]" \
  | jq -r '.id')

# Create theme with logo configuration
curl -X POST https://api.agentpreso.com/api/themes \
  -H "Authorization: Bearer ap_..." \
  -H "Content-Type: application/json" \
  -d '{
    "name": "my-brand",
    "description": "Company branding theme",
    "css": "/* @theme my-brand */ ...",
    "logoAssetId": "'$LOGO_ID'",
    "logoLightAssetId": "'$LOGO_LIGHT_ID'",
    "logoPlacement": "{\"default\":{\"position\":\"bottom-right\",\"size\":\"small\"},\"invert\":{\"variant\":\"light\"}}"
  }'

Creating a theme with logo (MCP)

The create_theme tool accepts logo parameters:

{
  "name": "create_theme",
  "arguments": {
    "name": "my-brand",
    "description": "Company branding theme",
    "css": "/* @theme my-brand */ ...",
    "logoAssetId": "asset_abc123",
    "logoLightAssetId": "asset_def456",
    "logoPlacement": "{\"default\":{\"position\":\"bottom-right\",\"size\":\"small\"},\"lead\":{\"position\":\"top-left\",\"size\":\"large\"},\"invert\":{\"variant\":\"light\"}}"
  }
}

Updating theme logo (MCP)

The update_theme tool can modify logo settings:

{
  "name": "update_theme",
  "arguments": {
    "name": "my-brand",
    "logoPlacement": "{\"default\":{\"position\":\"bottom-left\",\"size\":\"medium\"}}"
  }
}

Set to null to remove:

{
  "name": "update_theme",
  "arguments": {
    "name": "my-brand",
    "logoAssetId": null,
    "logoLightAssetId": null,
    "logoPlacement": null
  }
}

Best Practices

Logo file formats

SVG - Preferred for scalability and crisp rendering at any size
PNG - Good for raster logos with transparency
WebP - Efficient with good quality

Recommended placements

Slide Type	Recommended Position	Rationale
Content slides	`bottom-right`	Unobtrusive, professional standard
Title slides	`top-left` or `center`	More prominent brand presence
Section dividers	`none` or `bottom-center`	Clean, focused appearance
Dark slides	Same position, `light` variant	Maintain consistency

Size guidelines

Small (40px) - Best for content slides, subtle branding
Medium (80px) - Good for section slides, balanced presence
Large (120px) - Title slides, maximum brand impact

Opacity

Use opacity (0.0-1.0) to make logos less prominent:

{
  "default": { "position": "bottom-right", "size": "small", "opacity": 0.6 }
}

Margins

Adjust distance from edges:

{
  "default": {
    "position": "bottom-right",
    "size": "small",
    "margin": 24
  }
}

Or per-side:

{
  "default": {
    "position": "bottom-right",
    "size": "small",
    "margin": { "bottom": 32, "right": 40 }
  }
}

Complete Example

A comprehensive logo configuration:

{
  "default": {
    "position": "bottom-right",
    "size": "small",
    "opacity": 0.9,
    "margin": 16
  },
  "lead": {
    "position": "top-left",
    "size": "large",
    "margin": { "top": 40, "left": 60 }
  },
  "section": {
    "position": "bottom-center",
    "size": "medium",
    "opacity": 0.5
  },
  "invert": {
    "position": "bottom-right",
    "size": "small",
    "variant": "light",
    "opacity": 0.9,
    "margin": 16
  },
  "quote": {
    "position": "none"
  }
}

This configuration:

Shows a small logo in the bottom-right on most slides
Displays a large logo on title slides
Uses a centered, semi-transparent logo on section dividers
Switches to the light variant on inverted (dark) slides
Hides the logo on quote slides