API Portal
Theme
Theme your API Portal in the dashboard: set colors, typography, button style, and the code block, edit the landing page content, and add email branding, with a live preview.
You theme the API Portal under Portal, Theme, on the page titled Theme Settings. A sidebar holds the controls, grouped into sections, and a live preview shows the result as you change them. Choose Save Changes to apply.
What can you theme on the portal?
Theme Settings groups its controls into sections. Colours, Typography, and Buttons control the look. General Settings, Hero Section, and Texts control the landing page. Email Settings controls portal email branding.
| Section | What it controls |
|---|---|
| General Settings | Logo, Favicon, and the landing page video (Show video component, Embed video url). |
| Hero Section | The landing Hero Image and CTA Button 1 and CTA Button 2 labels. |
| Colours | Primary, Secondary, Text Primary, Text Secondary, and the Code Block theme. |
| Typography | A Custom Font URL and the Font Family. |
| Buttons | Rounded buttons on or off. |
| Texts | The landing page hero, CTA, video, product, and copyright text. |
| Email Settings | The Email logo for portal emails. |
How do you change the portal colors?
Open the Colours section. Set Primary, Secondary, Text Primary, and Text Secondary with the color pickers. The live preview updates immediately. Choose Save Changes to apply them to the portal.
| Color | What it sets |
|---|---|
| Primary | The main brand color, used for primary actions and accents. |
| Secondary | The secondary color. |
| Text Primary | The main text color. |
| Text Secondary | The secondary, lower-emphasis text color. |
How do you set the typography?
Open the Typography section. Pick a font from the Font Family list, or paste a font URL into Custom Font. When you provide a custom font, Apiable resolves and applies the font family for you.
The Font Family list includes 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 the Buttons section and use Rounded buttons to choose rounded or square corners. For code samples, open Colours and pick a Code Block theme from the selector, then fine-tune its colors below.
The Code Block selector offers vsDark, oceanicNext, nightOwl, vsLight, dracula, and shadesOfPurple. After you pick one, color pickers let you adjust the plain text color, the background, and individual token colors.
How do you edit the landing page?
Use the General Settings, Hero Section, and Texts sections in Theme Settings. They set the logo, favicon, hero image, video, CTA button labels, and the hero, product, and copyright text. The live preview renders the landing page.
| Control | Section | What it sets |
|---|---|---|
| Logo | General Settings | The portal logo image. |
| Favicon | General Settings | The browser tab icon. |
| Show video component | General Settings | Whether the landing page shows a video. |
| Embed video url | General Settings | The video to embed when the video component is on. |
| Hero Image | Hero Section | The landing page hero image. |
| CTA Button 1, CTA Button 2 | Hero Section, Texts | The call-to-action button labels. |
| Hero Title, Hero Text | Texts | The hero heading and subheading. |
| Hero Body, Hero Body 2 | Texts | The longer hero copy. |
| Product Text 1, Product Text 2 | Texts | Copy for the products area. |
| Copyright | Texts | The footer copyright line. |
How do you brand portal emails?
Open the Email Settings section and upload an Email logo. Apiable shows it in the transactional emails it sends from your portal. Choose Save Changes to apply.
How does the live preview work?
The preview pane sits beside the controls and renders your portal landing page with the current theme. It reflects color, typography, button, and text changes as you make them. Choose Save Changes to apply the changes to the live portal.
Where to next
Portal pages
Create and publish the content pages that render with this theme.
Navigation
Arrange the header and footer menus for your themed portal.
Markdoc components
The components you place in pages that render with this theme.
Portal localization
Translate the portal's system strings into another language.