Developer Portal

Developer Portal Theme

The developer portal supports custom theming by editing the docs/theme.css file in your project. The following CSS variables and classes are supported. By default, we support a light and a dark theme, which can be toggled between by the user.

Variables#

VariableDescription
--background-auth-actionsBackground color of actions taken on an Authentication method (ex. copy API key)
--background-button-primaryBackground for buttons that perform a primary action
--background-button-secondaryBackground for buttons that perform a second action
--background-code-sample-header-primaryBackground of header for API code sample unit
--background-code-sample-header-secondaryHighlight and dropdown color used in header for API code sample unit
--background-example-section-header-primaryBackground of header for example body and responses unit
--background-example-section-header-secondaryHighlight and dropdown color used in header for example body and responses unit
--background-inline-codeBackground used for inline code in markdown descriptions to aid readability
--background-inputBackground of input fields
--background-input-hoveredBackground of input fields when hovered over
--background-nav-item-selectedBackground of navigation label in the sidebar when navigated to
--background-primaryPrimary background across all pages
--background-text-selection-colorHighlight color of text when selected
--border-inline-codeBorder around inline code (in descriptions) to aid readability
--border-inputBorder of input fields
--border-input-hoveredBorder of input fields when the field is hovered
--color-dividerColor of divider between sections of the API docs
--color-nav-dividerColor of divider between sidebar and main page content
--font-family-primaryPrimary font family used across all pages
--text-color-code-sample-headerText color for API code sample unit
--text-color-enum-headerText color for the header of the generated enum table
--text-color-example-section-headerText color for example body and responses unit
--text-color-h1Text color for H1 tags (applies to page title and custom pages)
--text-color-h2Text color for H2 tags (applies to docs section headers and custom pages)
--text-color-h3Text color for H3 tags (only used in custom pages)
--text-color-inline-codeText color used for inline code in markdown descriptions to aid readability
--text-color-navText color used in the navigation sidebar
--text-color-nav-hoveredText color used on a hovered over sidebar label
--text-color-nav-selectedText color used on a selected over sidebar label
--text-color-primaryPrimary text color used across all pages
--text-color-property-constraintsText color used for constraints (ex. optional) on parameters and request body properties
--text-color-property-nameText color used for names of parameters and request body properties
--text-color-placeholder-hoveredText color for input field placeholders
--text-color-requiredText color for the required constraint, to improve visibility for readers

Theming#

The theme color is set using the .dark or .light CSS class on the body like in the example below.

<body class="light"> ... </body>

You can use this class to set custom values for each variable.

.dark { --background-primary: black; } .light { --background-primary: white; }

The logo of the portal is set via the CSS class .theme-logo.

.dark { --var-theme-logo-url: url(https://example.com/logo-dark.svg); } .light { --var-theme-logo-url: url(https://example.com/logo-light.svg); } .theme-logo { content: var(--var-theme-logo-url); }

Additional Modifications#

Danger

Custom styles and CSS variables beyond what is documented above are not officially supported and may break with future releases. Use custom CSS with caution.

The theme.css stylesheet is injected in the <head> of the dev portal. As such, you can modify any style you like. The portal is built using Tailwind CSS.

Previous
Supabase Setup