API Portal
Theme
Theme your API Portal in the dashboard: brand and button colours, typography, button style and the code block, the landing page images and texts, and the logo, button colours and footer domain of the emails your developers receive, with a live preview.
You theme the API Portal under Portal, Theme, on the page titled Theme Settings. A sidebar holds the controls in sections, and a live preview beside it shows your landing page as you change them. Choose Save Changes to apply them to the portal.
What can you theme on the portal?
Theme Settings groups its controls into seven sections. Colours, Typography and Buttons set the look of the whole portal. General Settings, Hero Section and Texts fill the landing page. Email Settings brands the emails your developers receive.
| Section | Controls |
|---|---|
| General Settings | Logo, Favicon, Show video component, Embed video url |
| Hero Section | Hero Image, CTA Button 1, CTA Button 2 |
| Colours | Primary, Secondary, Text Primary, Text Secondary, Code Block |
| Typography | Custom Font, Font Family |
| Buttons | Rounded buttons |
| Texts | Hero Title, Hero Text, CTA Button 1, CTA Button 2, Hero Body, Hero Body 2, Video Text, Product Text 1, Product Text 2, Products link, Copyright |
| Email Settings | Email Logo, Button background, Button text, Footer domain |
How do you change the portal colours?
Open Colours and set each colour with its picker. Primary and Secondary are your brand colours. Text Primary and Text Secondary are the text colours on buttons in those colours, not the colour of body text.
| Colour | What it sets |
|---|---|
| Primary | Primary buttons, selected checkboxes and other accents. |
| Secondary | Secondary buttons and accent text. |
| Text Primary | The text on primary buttons and on other elements drawn in the primary colour. |
| Text Secondary | The text on secondary buttons. |
Pick a Text Primary that reads well on your Primary, and a Text Secondary that reads well on your Secondary. The preview updates as you change them.
Body text, headings, backgrounds and link colours are fixed in the portal's stylesheet and are not set here. To change them, override the portal's CSS variables in custom CSS, on plans that include it.
How do you set the typography?
Open Typography. Pick a font from Font Family, or paste a font address into Custom Font. When a custom font resolves, the portal uses that font family and the list is replaced by a read-only field showing it.
Font Family offers DIN, Public Sans, SourceSans3, Segoe UI, System-ui, Arial, Arial Black, Century Gothic, Courier New, Garamond, Georgia, Impact, Trebuchet MS, Fira Sans, Fira Sans Extra Condensed, and Eina.
How do you style buttons and the code block?
Open Buttons and untick Rounded buttons for square corners. For code samples, open Colours, pick a theme under Code Block, then adjust its colours with the pickers below it.
The Code Block list offers vsDark, oceanicNext, nightOwl, vsLight, dracula, and shadesOfPurple. After you pick one, pickers let you change the plain text colour, the background, and the colour of each token type.
How do you edit the landing page?
The General Settings, Hero Section and Texts fields fill variables that the landing page content uses. The layout itself lives in two protected pages under Portal, Pages. A field shows on the portal only where that content uses its variable.
| Field | Section | Where it appears |
|---|---|---|
| Logo | General Settings | The portal header and footer. |
| Favicon | General Settings | The browser tab. |
| Show video component, Embed video url, Video Text | General Settings, Texts | The landing page video, as $showVideo, $videoUrl and $videoText. |
| Hero Image | Hero Section | $heroImage |
| CTA Button 1, CTA Button 2 | Hero Section, Texts | $ctaButton1, $ctaButton2 |
| Hero Title, Hero Text | Texts | $heroText1, $heroText2 |
| Hero Body, Hero Body 2 | Texts | $heroDescription1, $heroDescription2 |
| Product Text 1, Product Text 2, Products link | Texts | $productText1, $productText2, $productsLink |
| Copyright | Texts | The footer, as the copyright symbol, your text and the current year. |
How do you brand the emails your developers receive?
Open Email Settings, set the four fields, and choose Save Changes. They style the emails Apiable sends to your developers, such as team invitations and the notifications about the sandbox-to-production pipeline, scope grants and new plan versions. Fields you leave empty use the defaults in the table.
| Field | What it sets | Default |
|---|---|---|
| Email Logo | The logo at the top of each email. Recommended size 200 by 50 pixels. | Your portal logo, or Apiable's logo |
| Button background | The colour of buttons in emails. | #000 |
| Button text | The text colour on those buttons. | #CAB0FC |
| Footer domain | The hostname the email footer links to, for example developer.example.com. | apiable.io |
Use a PNG, JPG or GIF for the Email Logo, because email clients do not show SVG images. Without a usable email logo, emails use your portal Logo if it is one of those formats, and Apiable's logo otherwise. Enter the Footer domain as a bare hostname, without https://.
Emails sent during sign-in, such as sign-up verification codes and password resets, come from the sign-in service and do not use these settings. The address emails are sent from is set under Email domain and templates.
How does the live preview work?
The preview beside the controls renders your Landing Page with the current, unsaved settings. It follows colour, typography, button, image and text changes as you make them. Nothing reaches the portal until you choose Save Changes.
Troubleshooting
| What you see | What to do |
|---|---|
| Font Family shows a read-only font name, not the list | A Custom Font is set. Clear it to choose from the list. |
| Body text keeps its colour after you change Text Primary | Text Primary colours button text. Change body text with custom CSS. |
| Saving shows "Invalid domain format!" | The Footer domain is not a bare hostname. Enter it like developer.example.com, without https:// or a path. |
| Emails show your portal logo or Apiable's, not the email logo | The email logo is not a PNG, JPG or GIF. Upload it again in one of those formats. |
| Phones and tablets show an old version of the home page | They show the Mobile Landing Page. Update it under Portal, Pages. |
| The controls and Save Changes are disabled | Your role cannot edit the theme. Ask your Organisation Owner or an Organisation Admin. |
Where to next
Portal pages
Edit the Landing Page and the pages that render with this theme.
Custom CSS and Markdoc partials
Change the colours and styles the theme does not cover.
Markdoc components
The components and variables your pages use.
Email domain and templates
Send portal email from your own domain and edit notification templates.