Skip to main content
Themes control the colors, fonts, spacing, and other visual properties applied to your Chameleon Experiences (Tours, Microsurveys, Launchers, and Tooltips). Each account has a default Theme, and additional Themes can be created to apply different styling to different Experiences.
For more on using Themes and Templates to style Experiences, see the Help Center article.
With the Chameleon API for Themes, you can:
  • Retrieve a list of all Themes configured for your account.
  • Retrieve a single Theme by its id.

​
Schema

PropertyTypeDescription
idIDThe Chameleon ID
created_attimestampWhen this happened or when this was added to the Database
updated_attimestampThe last time any property was updated
namestringThe name given by an administrator of Chameleon
descriptionstringA description of the Theme
cssstringCustom CSS applied to Experiences using this Theme
defaultbooleanWhether this is the default Theme for the account
content_summarystringA summary of the Theme’s visual differences from the default
dashboard_urlstringA link to the Theme in the Chameleon Dashboard

​
Style properties

Themes include many style_* properties that control the visual appearance of Experiences. These are grouped by category: Typography:
PropertyTypeDescription
style_fontstringThe font family (e.g. "system-ui", "Inter")
style_font_sizestringThe base font size (e.g. "14px")
style_font_weightstringThe base font weight (e.g. "normal", "bold")
style_line_heightstringThe base line height (e.g. "100%")
style_title_font_sizestringThe title font size
style_title_font_weightstringThe title font weight
style_title_line_heightstringThe title line height
style_button_font_sizestringThe button font size
Colors:
PropertyTypeDescription
style_color_backgroundstringBackground color (hex, e.g. "19362d")
style_color_textstringBody text color
style_color_titlestringTitle text color
style_color_button_highlightstringPrimary button background color
style_color_button_textstringPrimary button text color
style_color_button_hoverstringPrimary button hover color
style_color_button_borderstringPrimary button border color
style_color_secondary_button_highlightstringSecondary button background color
style_color_secondary_button_textstringSecondary button text color
style_color_secondary_button_hoverstringSecondary button hover color
style_color_secondary_button_borderstringSecondary button border color
style_color_linkstringLink text color
style_color_dismissstringDismiss button color
style_color_shroudstringOverlay/shroud color
style_color_hotspotstringHotspot indicator color
style_color_iconstringIcon color
style_color_icon_backgroundstringIcon background color
style_color_progressstringProgress bar color
style_color_timerstringTimer color
style_color_checkmarkstringCheckmark color
style_color_borderstringBorder color
style_color_highlightstringHighlight color
Spacing & Layout:
PropertyTypeDescription
style_corner_radiusstringCorner radius for the Experience container (e.g. "8px")
style_button_corner_radiusstringCorner radius for buttons
style_button_border_widthstringBorder width for buttons
style_border_widthstringBorder width for the container
style_spacing_canvasstringInternal padding of the Experience
style_spacing_itemsstringSpacing between items
style_spacing_button_verticalstringVertical padding for buttons
style_spacing_button_horizontalstringHorizontal padding for buttons
style_widthstringWidth of the Experience
style_heightstringHeight of the Experience
style_opacity_shroudstringOpacity of the overlay/shroud (e.g. "50%")
style_size_dismissstringSize of the dismiss button
Themes may include additional style_* properties not listed above. Please ignore any properties you don’t need.

​
Listing Themes

Retrieve a list of Themes for your account.

​
HTTP Request

GET
https://api.chameleon.io/v3/edit/themes
param-description
limitoptionalDefaults to 50 with a maximum of 500
beforeoptionalUsed when paginating, use directly from the cursor object from the previous response
beforeoptionalRead as “created before” and can be given as a timestamp to get only limit items that were created before this time
afteroptionalRead as “created after” and can be given as a timestamp or ID to get only limit items that were created after this time

​
HTTP Response

{
  "themes": [
    {
      "id": "5f3c4232c712de665632a6d5",
      "created_at": "2029-01-15T10:30:00Z",
      "updated_at": "2029-06-20T14:22:00Z",
      "name": "Brand Theme",
      "description": "Primary brand styling",
      "css": "",
      "default": true,
      "style_font": "system-ui",
      "style_font_size": "14px",
      "style_line_height": "100%",
      "style_font_weight": "normal",
      "style_title_font_size": "25px",
      "style_title_font_weight": "bold",
      "style_color_background": "FFFFFF",
      "style_color_text": "333333",
      "style_color_title": "333333",
      "style_color_button_highlight": "4F46E5",
      "style_color_button_text": "FFFFFF",
      "style_color_button_hover": "3730A3",
      "style_color_button_border": "4F46E5",
      "style_color_secondary_button_highlight": "F3F4F6",
      "style_color_secondary_button_text": "333333",
      "style_color_link": "4F46E5",
      "style_color_dismiss": "333333",
      "style_color_shroud": "000000",
      "style_opacity_shroud": "50%",
      "style_corner_radius": "8px",
      "style_button_corner_radius": "8px",
      "style_button_border_width": "2px",
      "style_spacing_canvas": "24px",
      "style_spacing_items": "12px",
      "content_summary": null,
      "dashboard_url": "https://app.chameleon.io/styling/themes/5f3c4232c712de665632a6d5"
    },
    {
      "id": "5f3c4232c712de665632a6d6",
      "name": "Dark Mode Theme",
      "description": "Dark theme for onboarding flows",
      "default": false,
      ...
    },
    ...
  ],
  "cursor": {
    "limit": 50,
    "before": "5f3c4232c712de665632a6d5"
  }
}

​
Showing a Theme

Retrieve a single Theme.

​
HTTP Request

GET
https://api.chameleon.io/v3/edit/themes/:id
param-description
idrequiredA Theme ID to lookup

​
HTTP Response

{
  "theme": {
    "id": "5f3c4232c712de665632a6d5",
    "created_at": "2029-01-15T10:30:00Z",
    "updated_at": "2029-06-20T14:22:00Z",
    "name": "Brand Theme",
    "description": "Primary brand styling",
    "css": ".chmln-step .chmln-inner { border: 2px solid #4F46E5; }",
    "default": true,
    "style_font": "system-ui",
    "style_font_size": "14px",
    "style_line_height": "100%",
    "style_font_weight": "normal",
    "style_title_font_size": "25px",
    "style_title_font_weight": "bold",
    "style_color_background": "FFFFFF",
    "style_color_text": "333333",
    "style_color_title": "333333",
    "style_color_button_highlight": "4F46E5",
    "style_color_button_text": "FFFFFF",
    "style_color_button_hover": "3730A3",
    "style_color_button_border": "4F46E5",
    "style_color_secondary_button_highlight": "F3F4F6",
    "style_color_secondary_button_text": "333333",
    "style_color_secondary_button_hover": "E5E7EB",
    "style_color_secondary_button_border": "D1D5DB",
    "style_color_link": "4F46E5",
    "style_color_dismiss": "333333",
    "style_size_dismiss": "14px",
    "style_color_shroud": "000000",
    "style_opacity_shroud": "50%",
    "style_color_hotspot": "1A86FF",
    "style_color_progress": "4F46E5",
    "style_corner_radius": "8px",
    "style_button_corner_radius": "8px",
    "style_button_border_width": "2px",
    "style_spacing_canvas": "24px",
    "style_spacing_items": "12px",
    "style_spacing_button_vertical": "8px",
    "style_spacing_button_horizontal": "12px",
    "content_summary": null,
    "dashboard_url": "https://app.chameleon.io/styling/themes/5f3c4232c712de665632a6d5"
  }
}