Theme

theme:
  primary: '#f76b39'
  mode: auto
  fonts:
    sans: { family: Inter }
    mono: { family: JetBrains Mono }

primary (default #f76b39) colors links, buttons, the active tab and sidebar item, and the API reference.

You pick one color, and the portal keeps it readable. At build time it derives the text variants from it so that accent text keeps WCAG AA contrast (4.5:1) on both the light and the dark background. Text on accent-filled buttons is black or white, whichever reads better. So a light brand color like yellow still gives readable links.

mode is the theme a visitor sees until they pick one with the theme switcher:

• auto (default) follows the operating system.
• light or dark forces one.

Hide the switcher with header.themeSwitcher: false.

theme:
  fonts:
    sans: { family: Inter }                                  # loaded from Google Fonts, weights 400-700
    mono: { family: JetBrains Mono, url: /fonts/mono.css }   # your own stylesheet

A family alone loads from Google Fonts. Add url to load it from another CDN or from a CSS file in public/. sans is the text font; mono is used for code.

theme:
  css: ./styles/portal.css   # or a list of files

The files load on every page after the portal’s own styles, so plain selectors win without !important. Paths are relative to rapidoc.config.yaml, and rapidoc dev reloads when they change.

The supported way in is the portal’s CSS variables, for example:

:root {
  --portal-radius: 0.75rem;   /* corners of cards, callouts and code blocks */
}

Other selectors work too, but the portal’s markup can change between releases.

The API reference pages follow the portal theme: the same accent color, and light or dark with the rest of the page. To change more of RapiDoc’s look, see RapiDoc attributes.