Skip to main content
GET
/
api
/
themes
Themes
curl --request GET \
  --url https://api.example.com/api/themes \
  --header 'Content-Type: application/json' \
  --data '
{
  "project_id": "<string>",
  "name": "<string>",
  "description": "<string>",
  "colors": {},
  "typography": {},
  "based_on": "<string>",
  "screen_type": "<string>"
}
'
{
  "success": true,
  "data": [
    {
      "id": "theme_default",
      "project_id": "proj_xyz789",
      "name": "Default Theme",
      "description": "Clean and modern default theme",
      "is_default": true,
      "colors": {
        "primary": "#0069ED",
        "secondary": "#6C757D",
        "success": "#28A745",
        "danger": "#DC3545",
        "warning": "#FFC107",
        "info": "#17A2B8",
        "background": "#FFFFFF",
        "surface": "#F8F9FA",
        "text": "#212529",
        "textSecondary": "#6C757D"
      },
      "typography": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "headingFontFamily": "Inter, system-ui, sans-serif",
        "fontSize": {
          "base": "16px",
          "h1": "2.5rem",
          "h2": "2rem",
          "h3": "1.75rem",
          "body": "1rem",
          "small": "0.875rem"
        }
      },
      "borderRadius": {
        "small": "4px",
        "medium": "8px",
        "large": "12px",
        "button": "8px"
      },
      "created_at": "2024-01-15T10:30:00Z",
      "updated_at": "2024-01-20T14:45:00Z"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 20,
    "total": 2,
    "totalPages": 1
  }
}

Documentation Index

Fetch the complete documentation index at: https://muchadostudio.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
List Themes

Get all themes for a project.
​
project_id
string
required
The project ID to filter themes
​
page
number
default:"1"
Page number for pagination
​
limit
number
default:"20"
Number of items per page
{
  "success": true,
  "data": [
    {
      "id": "theme_default",
      "project_id": "proj_xyz789",
      "name": "Default Theme",
      "description": "Clean and modern default theme",
      "is_default": true,
      "colors": {
        "primary": "#0069ED",
        "secondary": "#6C757D",
        "success": "#28A745",
        "danger": "#DC3545",
        "warning": "#FFC107",
        "info": "#17A2B8",
        "background": "#FFFFFF",
        "surface": "#F8F9FA",
        "text": "#212529",
        "textSecondary": "#6C757D"
      },
      "typography": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "headingFontFamily": "Inter, system-ui, sans-serif",
        "fontSize": {
          "base": "16px",
          "h1": "2.5rem",
          "h2": "2rem",
          "h3": "1.75rem",
          "body": "1rem",
          "small": "0.875rem"
        }
      },
      "borderRadius": {
        "small": "4px",
        "medium": "8px",
        "large": "12px",
        "button": "8px"
      },
      "created_at": "2024-01-15T10:30:00Z",
      "updated_at": "2024-01-20T14:45:00Z"
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 20,
    "total": 2,
    "totalPages": 1
  }
}

​
Get Theme

Get details for a specific theme.
​
id
string
required
The theme ID
{
  "success": true,
  "data": {
    "id": "theme_dark",
    "project_id": "proj_xyz789",
    "name": "Dark Mode",
    "description": "Elegant dark theme for night viewing",
    "is_default": false,
    "colors": {
      "primary": "#4D9CFF",
      "secondary": "#6C757D",
      "success": "#28A745",
      "danger": "#DC3545",
      "background": "#1A1A1A",
      "surface": "#2D2D2D",
      "text": "#FFFFFF",
      "textSecondary": "#B0B0B0"
    },
    "typography": {
      "fontFamily": "Inter, system-ui, sans-serif",
      "headingFontFamily": "Inter, system-ui, sans-serif",
      "fontSize": {
        "base": "16px",
        "h1": "2.5rem",
        "h2": "2rem",
        "h3": "1.75rem"
      },
      "fontWeight": {
        "normal": 400,
        "medium": 500,
        "bold": 700
      }
    },
    "spacing": {
      "unit": "8px",
      "small": "8px",
      "medium": "16px",
      "large": "24px",
      "xlarge": "32px"
    },
    "shadows": {
      "small": "0 2px 4px rgba(0,0,0,0.1)",
      "medium": "0 4px 8px rgba(0,0,0,0.15)",
      "large": "0 8px 16px rgba(0,0,0,0.2)"
    },
    "animations": {
      "duration": "300ms",
      "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
    }
  }
}

​
Create Theme

Create a new theme.
​
project_id
string
required
The project ID this theme belongs to
​
name
string
required
Theme name (3-50 characters)
​
description
string
Theme description
​
colors
object
required
Color palette for the theme
​
typography
object
Typography settings
​
based_on
string
ID of theme to base this on (copies settings)
{
  "success": true,
  "data": {
    "id": "theme_brand123",
    "project_id": "proj_xyz789",
    "name": "Brand Theme",
    "description": "Custom brand colors",
    "colors": {
      "primary": "#FF6B6B",
      "secondary": "#4ECDC4",
      "background": "#FFFFFF",
      "text": "#2D3436"
    },
    "created_at": "2024-01-25T12:00:00Z"
  }
}

​
Update Theme

Update an existing theme.
​
id
string
required
The theme ID to update
​
name
string
Updated theme name
​
colors
object
Updated color palette
​
typography
object
Updated typography settings
Updating a theme affects all flows using it. Changes are reflected immediately.

​
Delete Theme

Delete a theme.
​
id
string
required
The theme ID to delete
Cannot delete the default theme or themes currently in use by flows.

​
Duplicate Theme

Create a copy of an existing theme.
​
id
string
required
The theme ID to duplicate
​
name
string
required
Name for the new theme

​
Preview Theme

Generate a preview of a theme without saving.
​
colors
object
required
Color palette to preview
​
screen_type
string
default:"welcome"
Screen type to preview: welcome, feature, permissions
{
  "success": true,
  "data": {
    "preview_url": "https://onboardsync.vercel.app/preview/temp_abc123",
    "expires_at": "2024-01-25T13:00:00Z"
  }
}

​
Theme Structure

​
Complete Theme Object

{
  "colors": {
    "primary": "#0069ED",
    "secondary": "#6C757D",
    "success": "#28A745",
    "danger": "#DC3545",
    "warning": "#FFC107",
    "info": "#17A2B8",
    "background": "#FFFFFF",
    "surface": "#F8F9FA",
    "text": "#212529",
    "textSecondary": "#6C757D",
    "border": "#DEE2E6"
  },
  "typography": {
    "fontFamily": "Inter, system-ui, sans-serif",
    "headingFontFamily": "Inter, system-ui, sans-serif",
    "fontSize": {
      "base": "16px",
      "h1": "2.5rem",
      "h2": "2rem",
      "h3": "1.75rem",
      "h4": "1.5rem",
      "body": "1rem",
      "small": "0.875rem",
      "tiny": "0.75rem"
    },
    "fontWeight": {
      "light": 300,
      "normal": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "lineHeight": {
      "tight": 1.2,
      "normal": 1.5,
      "relaxed": 1.75
    }
  },
  "spacing": {
    "unit": "8px",
    "tiny": "4px",
    "small": "8px",
    "medium": "16px",
    "large": "24px",
    "xlarge": "32px",
    "xxlarge": "48px"
  },
  "borderRadius": {
    "none": "0",
    "small": "4px",
    "medium": "8px",
    "large": "12px",
    "xlarge": "16px",
    "full": "9999px",
    "button": "8px",
    "input": "6px",
    "card": "12px"
  },
  "shadows": {
    "none": "none",
    "small": "0 1px 3px rgba(0,0,0,0.12)",
    "medium": "0 4px 6px rgba(0,0,0,0.15)",
    "large": "0 10px 20px rgba(0,0,0,0.19)",
    "xlarge": "0 20px 40px rgba(0,0,0,0.25)"
  },
  "animations": {
    "duration": {
      "fast": "150ms",
      "normal": "300ms",
      "slow": "500ms"
    },
    "easing": {
      "linear": "linear",
      "ease": "ease",
      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
      "easeOut": "cubic-bezier(0, 0, 0.2, 1)",
      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)"
    }
  }
}

​
Code Examples

// Create a custom brand theme
const createBrandTheme = async () => {
  const theme = {
    project_id: 'proj_xyz789',
    name: 'Company Brand',
    description: 'Our official brand colors and styles',
    colors: {
      primary: '#FF5722',
      secondary: '#795548',
      success: '#4CAF50',
      danger: '#F44336',
      background: '#FAFAFA',
      surface: '#FFFFFF',
      text: '#212121',
      textSecondary: '#757575'
    },
    typography: {
      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
      fontSize: {
        base: '16px',
        h1: '3rem',
        h2: '2.5rem',
        h3: '2rem'
      }
    }
  };

  const response = await fetch('https://onboardsync.vercel.app/api/themes', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(theme)
  });

  return response.json();
};

// Apply theme to a flow
const applyThemeToFlow = async (flowId, themeId) => {
  const response = await fetch(`https://onboardsync.vercel.app/api/flows/${flowId}`, {
    method: 'PUT',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      theme_id: themeId
    })
  });

  return response.json();
};