Last updated

Developer portal theme customization

To personalize your developer portal with custom fonts, colors, spacing and styles, modify the theme.ts file. The file defines a JSON configuration variable named theme. The values you define in this file override the default portal theme. If your portal has any integrated Reference docs pages, your custom theme applies to those pages as well.

Expand the schema below to show all available theming options. Notice the use of arrow functions to calculate certain values, like the section horizontal and vertical spacing.

The additionalProperties objects in the schema indicate that you can expand the existing theming options by implementing your own options when developing custom components.

Tip

All color values in the theme.ts file can be provided in any of the common color formats (hexadecimal value, RGB, HSL, human-friendly color names).

object

Controls the breakpoints used for scaling the portal layout according to the screen size. The values defined here are interpreted as starting points for different screen sizes. In addition to small, medium and large which are required, you can set other breakpoints with custom names. The special character _ is a reserved breakpoint name and you can't set it in this section of the theme, but you should use it in all breakpoints objects. It defines the value for the smallest screen sizes (0 to small). If you don't specify it in a breakpoints object, the default theme value will be used instead.

large
string
Default: "1200px"

Sets the breakpoint for the large screen size.

medium
string
Default: "900px"

Sets the breakpoint for the medium screen size.

small
string
Default: "550px"

Sets the breakpoint for the small screen size.

property name*
additional property
string
object

Controls the appearance of code block elements in MD(X) pages and in OpenAPI fields that support Markdown formatting.

backgroundColor
string

Sets the background color for all code block elements. The default value is calculated using ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor).

object

Controls the appearance of code highlighted with Prism.js. The values set for default apply to all tokens. You can customize specific tokens using the same schema from the default object. Supported tokens: comment, prolog, doctype, cdata, punctuation, property, tag, number, constant, symbol, boolean, selector, string, char, builtin, inserted, operator, entity, url, variable, atrule, keyword, regex, important, bold, italic, entity, deleted.

object

Controls the appearance of syntax-highlighted code. To target specific tokens, replace default with the name of a supported token.

color
string

Sets the text color for syntax-highlighted code matching the specified token.

fontFamily
string

Sets the font family for syntax-highlighted code matching the specified token. The value can be a string or a breakpoints object.

fontSize
string

Sets the font size for syntax-highlighted code matching the specified token. The value can be a string or a breakpoints object, provided in any of the standard units (px, em, rem...).

lineHeight
string

Sets the line height for syntax-highlighted code matching the specified token. The value can be a string or a breakpoints object.

additional property
string or object
One of:
string
object

Controls the color of elements in the portal and in integrated Reference docs.

background
string
Default: "#ffffff"

Sets the main background color for the portal. This color is used as background on all MD(X) pages and in the middle panel of integrated Reference docs.

object

Sets the border color variations for elements with a border (e.g. tables, images...).

dark
string
Default: "rgba(0,0,0, 0.15)"

Affects the color of horizontal lines (<hr> HTML elements) in text, the border around inline code, and the top border of table rows.

light
string
Default: "#ffffff"
object

Sets the default color variations for danger admonitions in MD(X) pages and error messages in Reference docs. You can override the values for admonitions in the components.alert.variants section of the portal theme.

contrastText
string

This value is used to calculate body text color and heading color in danger admonitions. The default is derived from error.main by applying the tonal offset value.

dark
string

The default is derived from error.main by applying the tonal offset value.

light
string

This value is used to calculate the background color of danger admonitions. The default is derived from error.main by applying the tonal offset value.

main
string
Default: "#e53935"

This value is used to calculate the icon color in danger admonitions and the default color of the required label in Reference docs. You can override both with custom values in relevant sections of the portal theme.

object

Sets the colors for the portal footer.

contrastText
string

Controls the text color in the footer. Also affects the color of links in the footer (default and hovered). If the links are in a column list, they inherit color from the theme.colors.primary.contrastText value.

main
string

Sets the background color for the footer. The default value is ({ colors }) => colors.primary.main.

object

Sets the color of HTTP method badges in Reference docs. The values set here apply to badges in the Reference docs sidebar and in the middle/right panel (the badge next to the path).

basic
string
Default: "#999"
delete
string
Default: "#e27a7a"
get
string
Default: "#6bbd5b"
head
string
Default: "#c167e4"
link
string
Default: "#31bbb6"
options
string
Default: "#d3ca12"
patch
string
Default: "#e09d43"
post
string
Default: "#248fb2"
put
string
Default: "#9b708b"
object

Sets the default color variations for attention admonitions in MD(X) pages and info messages in Reference docs. You can override the values for admonitions in the components.alert.variants section of the portal theme.

contrastText
string

This value is used to calculate body text color and heading color in attention admonitions. The default is derived from info.main by applying the tonal offset value.

dark
string

The default is derived from info.main by applying the tonal offset value.

light
string

This value is used to calculate the background color of attention admonitions. The default is derived from info.main by applying the tonal offset value.

main
string
Default: "#4782cb"

This value is used to calculate the icon color in attention admonitions and the color of info response schema headings in Reference docs. You can override both with custom values in relevant sections of the portal theme.

object

Sets the color variations for the navigation bar. Additional theming options can be set in the main navbar section of the portal theme.

contrastText
string

Sets the text color for navigation bar items. The default is derived from the navbar.main value, or if not set, from the colors.primary.contrastText value.

gradient
string

Sets the color that will be used to create a linear gradient effect for the navigation bar background. The default is derived from the navbar.main value by applying the tonal offset value.

main
string

Sets the background color of the navigation bar. The default is ({ colors }) => colors.primary.main. The value set here is used as the main color of the gradient.

object

Sets the primary color variations for the portal and integrated Reference docs. You can override these values for most of the elements.

contrastText
string

Sets the background/text color for a number of elements in the portal, such as the search results list, links in the page ToC, text color for Markdown table headers. The default is derived from primary.main by applying the tonal offset value.

dark
string

The default is derived from primary.main by applying the tonal offset value.

light
string

The default is derived from primary.main by applying the tonal offset value.

main
string
Default: "#4b1fb8"

Sets the primary color for the portal. This value is inherited by a number of elements in the portal, or used to calculate their default color values. Those elements include: background and text color of search results items, links in the page ToC, Reference docs version switcher border and shadow color, text in the expandable summary/details HTML element, background color of Markdown table headers, text color of active code block tabs in MD(X) pages, text color in buttons, text color on the default 404 page.

object

Controls the appearance of expandable 'Responses' headers in the middle panel of integrated Reference docs.

object

Sets the text and background color for the error response header in Reference docs.

backgroundColor
string

Sets the background color of the response header. The default value is derived from colors.error.main.

borderColor
string

Sets the border color for the response section.

color
string

Sets the text color of the response header. The default value is derived from colors.error.main.

object

Sets the text and background color for the info response header in Reference docs.

backgroundColor
string

Sets the background color of the response header. The default value is derived from info.color.

borderColor
string

Sets the border color for the response section.

color
string

Sets the text color of the response header. The default value is derived from colors.info.main.

object

Sets the text and background color for the redirect response header in Reference docs.

backgroundColor
string

Sets the background color of the response header. The default value is derived from redirect.color.

borderColor
string

Sets the border color for the response section.

color
string

Sets the text color of the response header. The default value is derived from colors.warning.main.

object

Sets the text and background color for the success response header in Reference docs.

backgroundColor
string

Sets the background color of the response header. The default value is derived from colors.success.main.

borderColor
string

Sets the border color for the response section.

color
string

Sets the text color of the response header. The default value is derived from colors.success.main.

object

Sets the default color variations for success admonitions in MD(X) pages and success messages in Reference docs. You can override the values for admonitions in the components.alert.variants section of the portal theme.

contrastText
string

This value is used to calculate body text color and heading color in success admonitions. The default is derived from success.main by applying the tonal offset value.

dark
string

The default is derived from success.main by applying the tonal offset value.

light
string

This value is used to calculate the background color of success admonitions. The default is derived from success.main by applying the tonal offset value.

main
string
Default: "#00aa13"

This value is used to calculate the icon color in success admonitions and the default color of the success response schema headings in Reference docs. You can override both with custom values in relevant sections of the portal theme.

object

Sets the default colors for text in the portal and in Reference docs. You can override these values for most of the elements.

primary
string
Default: "#424242"

Sets the primary text color. This value is used to calculate default color values for other elements, such as tab headers for code blocks in MD(X) pages, body and heading text in admonitions, body text in blockquotes, H2-H6 headings, links in the search results box.

secondary
string
Default: "#4e566d"

Sets the secondary text color. This value is used to calculate default color values for other elements, such as the arrow to expand nested schemas in Reference docs, type names in Reference docs schemas, search results descriptions.

tonalOffset
number
Default: 0.2

The value used to calculate tonal offsets for all colors in the theme.

object

Sets the default color variations for warning admonitions in MD(X) pages and warning messages in Reference docs. You can override the values for admonitions in the components.alert.variants section of the portal theme.

contrastText
string

This value is used to calculate body text color and heading color in warning admonitions. The default is derived from warning.main by applying the tonal offset value.

dark
string

The default is derived from warning.main by applying the tonal offset value.

light
string

This value is used to calculate the background color of danger admonitions. The default is derived from warning.main by applying the tonal offset value.

main
string
Default: "#d4ad03"

This value is used to calculate the icon color in warning admonitions and the default color of the redirect response schema headings in Reference docs. You can override both with custom values in relevant sections of the portal theme.

additional property
string or object
One of:
string
object

Controls the appearance of specific components in the portal: admonitions, buttons, the search bar, blockquotes, the login component and the main content wrapper.

object

Controls the appearance of alert boxes (admonitions) in the portal.

borderRadius
string
Default: "8px"

Sets the border radius for all admonition types. Modify this value to add rounded corners to alert boxes.

fontFamily
string

Sets the font family for text in all admonition types. By default, the font family in alert boxes is inherited from the theme. Use this option to override the inherited value.

fontSize
string
Default: "16px"

Sets the font size for text in all admonition types. Can be provided in any of the standard units (px, em, rem...).

fontWeight
string
Default: "normal"

Sets the font weight for text in all admonition types. The value can be a string or a number.

object

Controls the typography-related options in admonition titles. Values configured here apply to all admonition types.

fontFamily
string

Sets the font family for titles in all admonition types. By default, the font family in alert box titles is inherited from the theme. Use this option to override the inherited value.

fontSize
string
Default: "16px"

Sets the font size for titles in all admonition types. Can be provided in any of the standard units (px, em, rem...).

fontWeight
string
Default: "600"

Sets the font weight for titles in all admonition types. The value can be a string or a number.

letterSpacing
string
Default: "0.3px"

Controls the spacing between letters in titles for all admonition types. Can be provided in any of the standard units (px, em, rem...).

lineHeight
string
Default: "1.5"

Sets the line height value for titles in all admonition types.

transform
string
Default: "uppercase"

Controls the text transformation of titles in all admonition types. The value must match one of the supported text transformation options in CSS (uppercase, lowercase, capitalize, none...).

iconSize
string
Default: "25px"

Sets the size of the icon displayed on the left side of the alert box. Applies to all admonition types.

lineHeight
string
Default: "1.5"

Sets the line height value for text in all admonition types.

marginHorizontal
string
Default: "0"

Sets the horizontal margin for the alert box. Applies to all admonition types.

marginVertical
number

Sets the vertical margin for the alert box. Applies to all admonition types. The default value is calculated from the theme spacing settings using ({ spacing }) => ${spacing.unit * 2}px.

paddingHorizontal
number

Sets the horizontal padding for the alert box. Applies to all admonition types. The default value is calculated from the theme spacing settings using ({ spacing }) => ${spacing.unit * 4}px.

paddingVertical
number

Sets the vertical padding for the alert box. Applies to all admonition types. The default value is calculated from the theme spacing settings using ({ spacing }) => ${spacing.unit * 4}px.

transform
string

Controls the text transformation of body text in all admonition types. The value must match one of the supported text transformation options in CSS (uppercase, lowercase, capitalize, none...). By default, this value is inherited from the theme, and this option can be used to override the default value.

object

Allows further customizing the appearance of each admonition type (attention, danger, info, success, warning).

object

Controls the appearance of the attention admonition type.

object

Controls the appearance of the danger admonition type.

object

Controls the appearance of the info admonition type.

object

Controls the appearance of the success admonition type.

object

Controls the appearance of the warning admonition type.

object

Controls the appearance of blockquote elements in MD(X) pages in the portal.

backgroundColor
string
Default: "transparent"

Sets the background color of the entire blockquote element.

borderLeft
string

Controls the styling of the left-side border in the blockquote element. The default is calculated using ({ colors }) => '4px solid ${colors.border.dark}'.

borderRadius
string
Default: "0"

Sets the border radius for the blockquote element. Modify this value to add rounded corners to blockquotes.

color
string

Sets the color of the blockquote body text. The default is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for all text in the blockquote element. By default, the font family in blockquotes is inherited from the theme. Use this option to override the inherited value.

fontSize
string

Sets the font size for all text in the blockquote element. By default, the font size in blockquotes is inherited from the theme. Use this option to override the inherited value.

fontWeight
string

Sets the font weight for all text in the blockquote element. By default, the font weight in blockquotes is inherited from the theme. Use this option to override the inherited value. The value can be a string or a number.

lineHeight
string

Sets the line height for all text in the blockquote element. By default, the line height in blockquotes is inherited from the theme. Use this option to override the inherited value.

marginHorizontal
string
Default: "0"

Sets the horizontal margin for the blockquote element.

marginVertical
string
Default: "1.5em"

Sets the vertical margin for the blockquote element.

paddingHorizontal
string

Sets the horizontal padding for the blockquote element. The default is calculated using ({ spacing }) => '${spacing.unit * 4}px'.

paddingVertical
string
Default: "0"

Sets the vertical padding for the blockquote element.

transform
string

Controls the text transformation of text in blockquotes. The value must match one of the supported text transformation options in CSS (uppercase, lowercase, capitalize, none...). By default, this value is inherited from the theme, and this option can be used to override the default value.

object

Controls the appearance of button components in MD(X) pages in the portal.

borderRadius
string
Default: "5px"

Sets the border radius and controls rounded corners for the button component.

string or object
Default: ""

Controls what the button will look like when hovered over with the cursor. The value can be defined as a CSS string (e.g. 'border-color: red; color: blue;') or as a CSS object (e.g. { borderRadius: 'red', color: 'blue' }).

One of:

Controls what the button will look like when hovered over with the cursor. The value can be defined as a CSS string (e.g. 'border-color: red; color: blue;') or as a CSS object (e.g. { borderRadius: 'red', color: 'blue' }).

string
Default: ""
fontWeight
string
Default: "({ typography }) => typography.fontWeightBold"

Sets the font weight for the button text.

boxShadow
string
Default: "none"

Adds the shadow effect around the button's frame. The value can be defined using standard CSS syntax supported by the box-shadow property.

hoverBoxShadow
string
Default: "0px 0px 12px 0px rgba(0, 0, 0, 0.2)"

Controls the shadow effect when the button is hovered over with the cursor. The value can be defined using standard CSS syntax supported by the box-shadow property.

fontFamily
string
Default: "inherit"

Sets the font family for the button text.

object

Controls the size and positioning of the main content area in relation to other elements of the portal page (sidebar, navbar...).

maxWidth
string
Default: "910px"

Sets the maximum allowed width of the main content area.

paddingHorizontal
string
Default: "0"

Sets the horizontal padding for the main content area.

paddingVertical
string
Default: "25px"

Sets the vertical padding for the main content area.

object

Controls the colors of floating action button (FAB)

backgroundColor
string

Sets the background color for floating action button (FAB). The default value is the primary color ({ colors }) => colors.primary.main.

color
string

Sets the color for floating action button (FAB). The default value is the primary color ({ colors }) => colors.primary.contrastText.

object

Controls the appearance of the login component in the top navigation bar. You must configure the login component in the login section of the siteConfig.yaml file for these theming options to apply.

avatarBgColor
string
Default: "rgb(80, 90, 111)"

Sets the background color for the user avatar image when userAvatar is configured in siteConfig.yaml > login. The value set here applies when the configured avatar image is transparent or when the configured fallback text is displayed instead of the image.

avatarBorderRadius
string

Sets the border radius of the user avatar image when userAvatar is configured in siteConfig.yaml > login. Set it to '100%' if you want to transform the avatar image to a circle. By default, this option inherits the value set for navbar.borderRadius in the portal theme.

object

Controls the appearance of the search bar. The search functionality must be enabled in the portal for the search bar to be visible.

icon
string

Lets you set a custom search icon, overriding the default icon displayed in the search bar. Format the icon as a set of SVG properties inside <svg> ... </svg> tags.

iconColor
string

Modifies the color of the search icon (either the default one, or your custom search icon). The default value is calculated from the navigation text color using ({ colors }) => colors.navbar.contrastText.

property name*
additional property
object
externalIconUrl
string

URL to the image used as external icon. Supports data-url's too.

object

Controls the appearance of the logo image displayed in the top navigation bar in the portal. The logo image must be defined under logo in the siteConfig.yaml file.

height
string
Default: "2rem"

Sets the height of the logo image within the navigation bar. Can be provided in any of the standard units (px, em, rem...).

maxHeight
string
Default: "100%"

Sets the maximum allowed height for scaling the logo image.

margin
string

Sets the margin for the logo image. Can be provided as a negative value (for example, -20px 0) to make the logo image bigger.

maxWidth
string
Default: "100%"

Sets the maximum allowed width for scaling the logo image.

property name*
additional property
string
object

Controls the appearance of the portal navbar. You must define the contents of the navigation bar in the nav section of the siteConfig.yaml file.

activeBgColor
string

Sets the background color of the currently selected navigation item. The default is calculated using ({ colors }) => transparentize(0.9, colors.navbar.contrastText).

activeTextColor
string

Sets the text color of the currently selected navigation item. The default is calculated using ({ colors }) => colors.navbar.contrastText.

activeTextDecoration
string
Default: "none"

Sets the text decoration for the currently selected navigation item (e.g. underline).

borderRadius
string
Default: "10px"

Sets the border radius and controls rounded corners for all items in the navigation bar, including the search input field.

marginHorizontal
string
Default: "0px"

Controls the spacing between items in the navigation bar. The value set here is used to calculate margin-left and margin-right for each of the navigation items.

marginVertical
string
Default: "0px"

Controls the vertical positioning of items within the navigation bar.

property name*
additional property
string
object

Controls the appearance of the right-side panel in integrated Reference docs (the panel containing code samples and the Try It console).

backgroundColor
string
Default: "#263238"

Sets the background color of the entire right-side panel.

showAtBreakpoint
string
Default: "large"

Defines the starting screen size at which the right panel will become visible in integrated Reference docs pages. The value must be a string, and it must match one of the breakpoints defined in the theme.

textColor
string
Default: "#ffffff"

Sets the color of all text in the right-side panel. Also affects the background color of the Try it button and the selected request/response sample tab.

width
string
Default: "40%"

Sets the width of the right-side panel. The value can be a string ('40%'), a breakpoints object {_: '10%', small: '40%', medium: '600px'} or a calc CSS function. When set as a string, the same value is used on all screen sizes.

additional property
string or object
One of:
string
object

Controls the appearance of elements in response and request schemas in integrated Reference docs.

object

Controls the appearance of the arrow used to expand nested elements in a schema.

color
string

Sets the arrow color. The default value is calculated using theme => theme.colors.text.secondary.

size
string
Default: "1.1em"

Sets the arrow size.

object

Controls the appearance of constraints in schemas.

fontFamily
string

Sets the font family for constraints text. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontSize
string

Sets the font size for constraints text. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for constraints text. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

defaultDetailsWidth
string
Default: "75%"

Sets the default width for the schema field descriptions.

object

Controls the appearance of example, default and enum values in schemas.

fontFamily
string

Sets the font family. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontSize
string

Sets the font size. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

labelsTextSize
string
Default: "0.9em"

Sets the font size of labels in schemas (such as the required label). Can be provided in any of the standard units (px, em, rem...).

linesColor
string

Sets the color of lines connecting the elements in schemas. The default value is calculated from theme.colors.primary.main by applying the tonal offset value.

nestedBackground
string
Default: "#fafafa"

Sets the background color for nested elements in schemas. This setting also affects the background color of alternate rows in Markdown tables in MD(X) pages.

nestingSpacing
string
Default: "1em"

Sets the spacing between nested elements in schemas.

requireLabelColor
string

Sets the color of the required label in schemas. The default value is calculated using theme => theme.colors.error.main.

typeNameColor
string

Sets the color of the data type (e.g. string, integer, array) in the details section of schemas. The default value is theme => theme.colors.text.secondary.

typeTitleColor
string

Sets the color of the data type title (e.g. Tag, Category) in the details section of schemas. The default value is theme => theme.schema.typeNameColor.

additional property
string or object
One of:
string
object

Controls the appearance of the left-side navigation sidebar.

activeBgColor
string
Default: "#E4E7EB"

Changes the background color of the active item (currently selected item) in the sidebar.

activeTextColor
string

Changes the text color of the active item (currently selected item) in the sidebar. The default is ({ sidebar }) => sidebar.textColor.

backgroundColor
string
Default: "#fff"

Changes the background color of the entire sidebar.

borderRadius
string
Default: "4px"

Controls the border radius of each item in the sidebar. Can be provided in any of the standard units (px, em, rem...).

caretColor
string

Controls the color of the back button (<-) in drilldown style, and the V button for expanding groups. The default is ({ sidebar }) => sidebar.textColorSecondary.

fontFamily
string

Changes the font family of all text in the sidebar. The value can be either a breakpoints object or string. The default value is inherited from typography.fontFamily.

fontSize
string
Default: "1rem"

Changes the font size of all text in the sidebar. Can be provided in any of the standard units (px, em, rem...).

rightLineColor
string
Default: "#DADADA"

Changes the color of the vertical line dividing the sidebar section from the main content area.

separatorLabelColor
string

When the separator is used as text, this option controls its color.

separatorLineColor
string

When the separator is used as a horizontal line, this option controls its color. The default is ({ sidebar }) => sidebar.textColor.

showAtBreakpoint
string
Default: "medium"

Controls the starting screen size at which the sidebar will become visible in the portal. Its value must be a string, and it must match one of the breakpoints defined in the theme.

object

Controls the spacing of items in the sidebar. The numbers set here are used to calculate the final positioning value of each item (in px).

offsetLeft
number

Controls the value for left offset of items in the sidebar. The default value is sidebar.spacing.unit * 2.

offsetNesting
number

Controls the value for nesting offset of items in the sidebar. Each nested group will have this offset. The default value is sidebar.spacing.unit * 2.

offsetTop
number

Controls the value for top offset, which is the distance between the top of the sidebar and the first item. The default value is sidebar.spacing.unit * 2.

paddingHorizontal
number

Controls the value for horizontal spacing of items in the sidebar (textual separator padding; menu item padding-right and padding-left). The default value is ({ sidebar }) => sidebar.spacing.unit.

paddingVertical
number

Controls the value for vertical spacing of items in the sidebar (textual separator padding; line separator margin; menu item padding-top and padding-bottom; back button margin-bottom). The default value is ({ sidebar }) => sidebar.spacing.unit.

unit
number
Default: 8

Controls the value for: textual separator margin-left; menu item margin-left; back button margin-right; drilldown menu icon width, height, and margin-right; version switcher padding.

textColor
string
Default: "#1F2933"

Changes the text color of default-style sidebar items (page names, page labels, group names).

textColorSecondary
string
Default: "#3E4C59"

Changes the text color of drilldown-style sidebar items (group sublabels and scope links).

width
string
Default: "320px"

Controls the width of the entire sidebar section.

additional property
string or object
One of:
string
object

Controls the spacing of sections in the portal. The numbers set here are used to calculate the spacing value of each section.

sectionHorizontal
number

Horizontal spacing between sections in the portal. Calculated based on the value of unit using an arrow function expression. The default value is ({ spacing }) => spacing.unit * 8.

sectionVertical
number

Vertical spacing between sections in the portal. Calculated based on the value of unit using an arrow function expression. The default value is ({ spacing }) => spacing.unit * 8.

unit
number
Default: 5

The main spacing unit used for calculating all spacing values in the portal.

property name*
additional property
number
object

Controls the appearance of the right-side table of contents in MD(X) pages. For these settings to take effect, the table of contents must be enabled either globally for the entire portal (in the siteConfig.yaml file) or on individual pages (by setting enableToc: true in the front matter).

width
string
Default: "240px"

Sets the width of the right-side table of contents element.

property name*
additional property
string
object

Controls the formatting of textual elements in the portal.

object

Controls the appearance of inline code in MD(X) pages.

backgroundColor
string
Default: "rgba(38, 50, 56, 0.04)"

Sets the background color for inline code.

color
string
Default: "e53935"

Sets the text color for inline code.

fontFamily
string
Default: "Courier, monospace"

Sets the font family for inline code. The value can be a string or a breakpoints object.

fontSize
string
Default: "14px"

Sets the font size for inline code. The value can be a string or a breakpoints object, provided in any of the standard units (px, em, rem...).

fontWeight
string

Sets the font weight for inline code. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is calculated using ({ typography }) => typography.fontWeightRegular.

wrap
boolean
Default: false

Specifies whether inline code text should wrap automatically when it exceeds the width of its containing element.

object

Controls the appearance of field names in schemas in integrated Reference docs.

fontFamily
string

Sets the font family for field names. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontSize
string

Sets the font size for field names. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for field names. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontFamily
string
Default: "Roboto, sans-serif"

Sets the default font family for all body text in the portal. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontSize
string
Default: "14px"

Sets the default font size for all body text in the portal. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeightBold
string
Default: "600"

Sets the value for bold font weight. The value can be a string or a number.

fontWeightLight
string
Default: "300"

Sets the value for light font weight. The value can be a string or a number. This value also controls the font weight of navbar links in mobile view.

fontWeightRegular
string
Default: "400"

Sets the value for regular font weight. The value can be a string or a number.

object

Controls typography-related settings for heading level 1 (H1) in portal pages and in integrated Reference docs.

capitalize
boolean
Default: true

Specifies whether to capitalize the text in the heading automatically.

color
string

Sets the text color for the heading level. The default value is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from the headings object.

fontSize
string
Default: "1.85714em"

Sets the font size for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeight
string
Default: "600"

Sets the font weight for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from typography.lineHeight.

marginBottom
string
Default: "0.9em"

Sets the bottom margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginHorizontal
string

Sets the horizontal margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginLeft
string

Sets the left margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginRight
string

Sets the right margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginTop
string
Default: "1.35em"

Sets the top margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginVertical
string

Sets the vertical margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Controls typography-related settings for heading level 2 (H2) in portal pages and in integrated Reference docs.

capitalize
boolean
Default: false

Specifies whether to capitalize the text in the heading automatically.

color
string

Sets the text color for the heading level. The default value is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from the headings object.

fontSize
string
Default: "1.57143em"

Sets the font size for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeight
string
Default: "600"

Sets the font weight for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from typography.lineHeight.

marginBottom
string
Default: "0.8em"

Sets the bottom margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginHorizontal
string

Sets the horizontal margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginLeft
string

Sets the left margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginRight
string

Sets the right margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginTop
string
Default: "1.25em"

Sets the top margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginVertical
string

Sets the vertical margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Controls typography-related settings for heading level 3 (H3) in portal pages and in integrated Reference docs.

capitalize
boolean
Default: false

Specifies whether to capitalize the text in the heading automatically.

color
string

Sets the text color for the heading level. The default value is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from the headings object.

fontSize
string
Default: "1.27em"

Sets the font size for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeight
string
Default: "600"

Sets the font weight for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from typography.lineHeight.

marginBottom
string
Default: "0.8em"

Sets the bottom margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginHorizontal
string

Sets the horizontal margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginLeft
string

Sets the left margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginRight
string

Sets the right margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginTop
string
Default: "1.25em"

Sets the top margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginVertical
string

Sets the vertical margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Controls typography-related settings for heading level 4 (H4) in portal pages and in integrated Reference docs.

capitalize
boolean
Default: false

Specifies whether to capitalize the text in the heading automatically.

color
string

Sets the text color for the heading level. The default value is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from the headings object.

fontSize
string

Sets the font size for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeight
string

Sets the font weight for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from typography.lineHeight.

marginBottom
string

Sets the bottom margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginHorizontal
string

Sets the horizontal margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginLeft
string

Sets the left margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginRight
string

Sets the right margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginTop
string

Sets the top margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginVertical
string

Sets the vertical margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Controls typography-related settings for heading level 5 (H5) in portal pages and in integrated Reference docs.

capitalize
boolean
Default: false

Specifies whether to capitalize the text in the heading automatically.

color
string

Sets the text color for the heading level. The default value is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from the headings object.

fontSize
string

Sets the font size for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeight
string

Sets the font weight for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from typography.lineHeight.

marginBottom
string

Sets the bottom margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginHorizontal
string

Sets the horizontal margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginLeft
string

Sets the left margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginRight
string

Sets the right margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginTop
string

Sets the top margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginVertical
string

Sets the vertical margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Controls typography-related settings for heading level 6 (H6) in portal pages and in integrated Reference docs.

capitalize
boolean
Default: false

Specifies whether to capitalize the text in the heading automatically.

color
string

Sets the text color for the heading level. The default value is calculated using ({ colors }) => colors.text.primary.

fontFamily
string

Sets the font family for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from the headings object.

fontSize
string

Sets the font size for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontWeight
string

Sets the font weight for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. The default value is inherited from typography.lineHeight.

marginBottom
string

Sets the bottom margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginHorizontal
string

Sets the horizontal margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginLeft
string

Sets the left margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginRight
string

Sets the right margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginTop
string

Sets the top margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

marginVertical
string

Sets the vertical margin for the heading level. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Unified settings that apply to all heading levels. You can override them by setting different values for specific heading levels.

fontFamily
string
Default: "Roboto, sans-serif"

Sets the font family for all headings. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes. All items in the navigation bar inherit this value by default.

fontWeight
string
Default: "600"

Sets the font weight for all headings. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for all headings. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string
Default: "1.5em"

Sets the line height for all body text. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

object

Controls the appearance of links in portal body text and in integrated Reference docs.

color
string

Sets the text color of links. The default value is calculated using ({ colors }) => colors.primary.main.

hover
string

Sets the color of links when hovered over. The default value is calculated using ({ typography }) => lighten(0.2, typography.links.color).

textDecoration
string
Default: "none"

Sets the text decoration for links (e.g. underline).

visited
string

Sets the color of links when selected/visited. ˙The default value is ({ typography }) => typography.links.color.

object

Controls the section titles (e.g. Response samples, Request samples) in the right-side panel in integrated Reference docs.

fontFamily
string

Sets the font family for section titles. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

fontSize
string

Sets the font size for section titles. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

lineHeight
string

Sets the line height for section titles. The value can be a string or a breakpoints object. When set as a string, the same value is used on all screen sizes.

additional property
string or object
One of:
string

Example theme.ts file

import { lighten, readableColor, desaturate, darken, transparentize } from 'polished';
import { theme as userTheme } from 'Content/theme';

export const defaultTheme = {
  spacing: {
    unit: 5,
    sectionHorizontal: ({ spacing }) => spacing.unit * 8,
    sectionVertical: ({ spacing }) => spacing.unit * 8,
  },
  breakpoints: {
    xs: 0,
    small: '550px',
    medium: '900px',
    large: '1200px',
  },
  colors: {
    tonalOffset: 0.2,
    primary: {
      main: '#4b1fb8',
      light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
      dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
      contrastText: ({ colors }) => readableColor(colors.primary.main),
    },
    success: {
      main: '#00aa13',
      light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main),
      dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main),
      contrastText: ({ colors }) => readableColor(colors.success.main),
    },
    error: {
      main: '#e53935',
      light: ({ colors }) => lighten(colors.tonalOffset, colors.error.main),
      dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
      contrastText: ({ colors }) => readableColor(colors.error.main),
    },
    warning: {
      main: '#d4ad03',
      light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main),
      dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main),
      contrastText: '#ffffff',
    },
    text: {
      primary: '#424242',
      secondary: '#4e566d',
    },
    responses: {
      success: {
        color: ({ colors }) => colors.success.main,
        backgroundColor: ({ colors }) => transparentize(0.9, colors.success.main),
      },
      error: {
        color: ({ colors }) => colors.error.main,
        backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main),
      },
      redirect: {
        color: '#ffa500',
        backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color),
      },
      info: {
        color: '#87ceeb',
        backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color),
      },
    },
    http: {
      get: '#6bbd5b',
      post: '#248fb2',
      put: '#9b708b',
      options: '#d3ca12',
      patch: '#e09d43',
      delete: '#e27a7a',
      basic: '#999',
      link: '#31bbb6',
      head: '#c167e4',
    },
    navbar: {
      main: ({ colors }) => colors.primary.main,
      contrastText: ({ colors }) =>
        ((userTheme as any).colors &&
          (userTheme as any).colors.navbar &&
          (userTheme as any).colors.navbar.main &&
          readableColor(colors.navbar.main)) ||
        colors.primary.contrastText,
    },
    footer: {
      main: ({ colors }) => colors.primary.main,
      contrastText: ({ colors }) =>
        ((userTheme as any).colors &&
          (userTheme as any).colors.footer &&
          (userTheme as any).colors.footer.main &&
          readableColor(colors.footer.main)) ||
        colors.primary.contrastText,
    },
  },

  sidebar: {
    backgroundColor: '#fafafa',
    width: '260px',
  },
  tocPanel: {
    width: '240px',
  },

  typography: {
    fontSize: '14px',
    lineHeight: '1.5em',
    fontWeightRegular: '400',
    fontWeightBold: '600',
    fontWeightLight: '300',
    fontFamily: 'Roboto, sans-serif',
    headings: {
      fontFamily: 'Roboto, sans-serif',
      fontWeight: '600',
    },
    heading1: {
      fontSize: '1.85714em',
      fontWeight: '600',
      fontFamily: ({ typography }) => typography.headings.fontFamily,
      lineHeight: ({ typography }) => typography.lineHeight,
      color: ({ colors }) => colors.primary.main,
      capitalize: true,
    },
    heading2: {
      fontSize: '1.57143em',
      fontWeight: '600',
      color: ({ colors }) => colors.text.primary,
      fontFamily: ({ typography }) => typography.headings.fontFamily,
      lineHeight: ({ typography }) => typography.lineHeight,
      capitalize: false,
    },
    heading3: {
      fontSize: '1.27em',
      fontWeight: '600',
      color: ({ colors }) => colors.text.primary,
      fontFamily: ({ typography }) => typography.headings.fontFamily,
      lineHeight: ({ typography }) => typography.lineHeight,
      capitalize: false,
    },
    rightPanelHeading: {},
    code: {
      fontSize: '14px',
      fontFamily: 'Courier, monospace',
      fontWeight: ({ typography }) => typography.fontWeightRegular,
      color: '#e53935',
      backgroundColor: 'rgba(38, 50, 56, 0.04)',
      wrap: false,
    },
    links: {
      color: ({ colors }) => colors.primary.main,
      visited: ({ typography }) => typography.links.color,
      hover: ({ typography }) => lighten(0.2, typography.links.color),
    },
  },
  rightPanel: {
    backgroundColor: '#263238',
    width: '40%',
    textColor: '#ffffff',
  },
  codeSample: {
    backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
  },
  schema: {
    nestedBackground: '#fafafa',
    linesColor: theme =>
      lighten(
        theme.colors.tonalOffset,
        desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
      ),
    defaultDetailsWidth: '75%',
    typeNameColor: theme => theme.colors.text.secondary,
    typeTitleColor: theme => theme.schema.typeNameColor,
    requireLabelColor: theme => theme.colors.error.main,
    labelsTextSize: '0.9em',
    nestingSpacing: '1em',
    arrow: {
      size: '1.1em',
      color: theme => theme.colors.text.secondary,
    },
  },
  codeBlock: {
    backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
    tokens: {},
  },
};