Theming options for API docs
Note
Redoc doesn't load any fonts by default, so you have to take care of it yourself.
To customize the style of your API documentation, specify the theming options in the features.openapi.theme
object. This applies regardless of your preferred docs deployment method.
If you're using our Workflows (cloud hosted service) or our CLI for on-premise deployments, we recommend specifying the theming options in the Redocly configuration file.
Expand the theme
schema below to show all available theming options. Options supported in Redoc Community Edition (the free and open source version of the product) are marked to distinguish them from options supported only in the premium version of the product.
features.openapi.theme schema
object Breakpoints for switching three/two and mobile view layouts. Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Controls the appearance of code snippets used in OpenAPI definition fields that support Markdown formatting, and in external Markdown files referenced in the API definition. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Controls layout properties for Reference docs. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Allows overriding default styling of specific elements with custom CSS. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Some of the sidebar theming options are supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Controls the spacing of items and sections in the generated API documentation. The numbers set here are used to calculate the final positioning values. Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
object Supported in Redoc CE. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Example theme
Add your custom theme settings to the features.openapi > theme
object in the Redocly configuration file.
When using Redocly CLI, you can pass one or more theming options to the CLI tool with the --options
parameter. To make it more practical, you can also save your custom theme as a JSON file and pass it to the CLI tool with the same parameter, like in the following example:
reference-docs build example-openapi.yaml --options=theme.json
Example theme.json file
{
"theme": {
"breakpoints": {
"small": "10rem",
"medium": "40rem",
"large": "85rem"
},
"colors": {
"primary": {
"main": "rgba(246, 20, 63, 1)",
"light": "rgba(246, 20, 63, 0.42)"
},
"success": {
"main": "rgba(28, 184, 65, 1)",
"light": "#81ec9a",
"dark": "#083312",
"contrastText": "#000"
},
"text": {
"primary": "rgba(0, 0, 0, 1)",
"secondary": "#4d4d4d"
},
"http": {
"get": "rgba(0, 200, 219, 1)",
"post": "rgba(28, 184, 65, 1)",
"put": "rgba(255, 187, 0, 1)",
"delete": "rgba(254, 39, 35, 1)"
}
},
"typography": {
"fontSize": "16px",
"fontFamily": "Fira Sans, Roboto, sans-serif",
"optimizeSpeed": true,
"smoothing": "antialiased",
"headings": {
"fontWeight": "bold",
"lineHeight": "1em"
},
"code": {
"fontWeight": "600",
"color": "rgba(92, 62, 189, 1)",
"wrap": true
},
"links": {
"color": "rgba(246, 20, 63, 1)",
"visited": "rgba(246, 20, 63, 1)",
"hover": "#fa768f"
}
},
"sidebar": {
"width": "300px",
"textColor": "#000000"
},
"rightPanel": {
"backgroundColor": "rgba(55, 53, 71, 1)",
"textColor": "#ffffff"
}
}
}