Overhauled Theming Architecture

Themes, Brand Colors & Typography

RapiDoc features a streamlined, token-driven styling architecture inspired by modern design systems. Configure rich color presets, custom brand hex colors, contrast modes, typography, and corner radius using clean declarative attributes.

9Built-in Presets

#HEXAny Brand Color

3Color Modes (Dark / Light / System)

5Radius Scales

Streamlined Interface

The Four Primary Styling Attributes

Instead of dozens of disparate color properties, RapiDoc consolidates visual styling into four high-leverage attributes:theme, color-scheme, radius, and scale.

Quickstart Blueprint

Instant Declarative Theming

Configure complete visual styling directly in your HTML tag with zero CSS boilerplate or build steps required.

View Live Theme Switcher Demo

Attribute	Type / Allowed	Default	Description & Behavior
theme	preset \| #hex amber, blue, graphite, modern, emerald, violet, rose, slate, default, or #hex	`amber`	Sets the primary brand color palette. Accepts any built-in shadcn/ui-inspired preset or a custom brand color hex code (e.g. #2563eb).
color-scheme	string dark \| light \| system	`dark`	Controls dark or light surface mode. When set to "system", RapiDoc automatically switches based on the user OS prefers-color-scheme setting.
radius	string none \| sm \| md \| lg \| full	`sm`	Corner radius scale applied to cards, buttons, badges, parameter inputs, and dialogs (--radius and --card-radius).
scale	string sm \| default \| lg	`default`	Proportionally scales UI base dimensions, body fonts, monospace code blocks, and sidebar width across the documentation.
nav-item-spacing	string compact \| default \| relaxed	`default`	Controls vertical density and padding of sidebar navigation links independently of typography scale.
load-fonts	boolean true \| false	`true`	Automatically loads default Open Sans from Google Fonts CDN. Set to "false" in air-gapped, offline, or enterprise intranet environments.
render-style	string focused \| read \| view	`focused`	Document presentation layout mode: single-operation focused console, continuous reading doc, or multi-column interactive view.
schema-style	string tree \| table	`tree`	Visual formatting of request and response payload schemas (interactive collapsible tree or structured property table).

Color Palettes

Built-in Presets & Custom Hex Brand Colors

Choose from curated presets matched to modern design systems, or pass any corporate brand hex color directly into theme.

Amber

DEFAULT

Warm amber accents over dark charcoal surfaces. High visibility and modern developer aesthetic.

theme="amber"

Blue

Classic vivid blue brand accent with balanced neutral dark backgrounds. Highly readable for technical portals.

theme="blue"

Emerald

Vibrant emerald green accents over deep navy slate surfaces. Ideal for payments, banking, and crypto APIs.

theme="emerald"

Violet

Electric purple highlights paired with subtle deep violet surface tints for modern SaaS and developer ecosystems.

theme="violet"

Graphite

Monochrome

Ultra-clean monochrome palette inspired by high-contrast developer tools and modern terminal UI designs.

theme="graphite"

Rose

Vibrant rose pink highlights over neutral slate surfaces. High contrast and contemporary visual polish.

theme="rose"

Slate

Sophisticated cool grey slate accents for understated enterprise corporate documentation portals.

theme="slate"

Custom Brand Color

Hex Color Dynamic Contrast Engine

Pass your corporate brand color (such as #2563eb or #ff5722) directly to theme. RapiDoc automatically calculates perceived YIQ luminance, assigns the focus ring and primary token, and guarantees accessible contrast on button text by dynamically selecting pure black or crisp white.

custom-brand.html

<!-- Use your corporate brand hex color directly -->
<rapi-doc
  spec-url="https://api.acme.corp/openapi.json"
  theme="#2563eb"
  color-scheme="dark"
  radius="lg"
  scale="default"
></rapi-doc>

<!--
  RapiDoc automatically analyzes #2563eb luminance:
  - Generates --primary: #2563eb
  - Generates --ring: #2563eb
  - Generates high-contrast --primary-foreground: #ffffff
-->

Layout & Geometry

Corner Radius & Sizing Scale

Calibrate corner roundness and base density to match your product's UI design language.

Corner Radius (`radius`)

Controls roundness across cards, buttons, badges, parameter inputs, and dialogs:

radius="none"0px sharp geometric corners
radius="sm"4px (0.25rem) — Default sleek modern
radius="md"6px (0.375rem) balanced roundness
radius="lg"8px (0.5rem) pronounced roundness
radius="full"Pill buttons/inputs (9999px), 8px cards

UI Scale (`scale`)

Harmoniously scales base sizing, font dimensions, and sidebar width:

scale="sm"Compact (13px base, 17rem nav)
Ideal for embedded widgets and compact consoles
scale="default"Standard (14px base, 18.75rem nav)
Standard desktop layout for public developer hubs
scale="lg"Generous (16px base, 21rem nav)
Enhanced readability, high-DPI displays, and presentations

Typography Tokens

Custom Typography & Google Fonts Pairing

RapiDoc natively supports shadcn/ui design tokens. Set --font-sans (or --font-regular) and --font-mono on <rapi-doc> to seamlessly apply any custom font family.

Typography Recipe

Pairing Inter & JetBrains Mono

Load your Google Fonts stylesheet in the document head and bind the tokens directly in CSS. Set load-fonts="false" to prevent RapiDoc from fetching the default Open Sans font.

typography.html

<!-- Load custom Google Fonts in document head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<style>
  /* Override typography tokens directly on <rapi-doc> */
  rapi-doc {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  }
</style>

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="violet"
  color-scheme="dark"
  radius="md"
  load-fonts="false"
></rapi-doc>

Programmatic Control

Dynamic Runtime Theming via JavaScript

Because RapiDoc is a standard custom HTML element, its styling attributes reflect instantly when modified through vanilla DOM methods.

theme-controller.js

// Select the RapiDoc custom element in the DOM
const doc = document.querySelector('rapi-doc');

// Switch theme preset or brand color
function setBrandTheme(presetOrHex) {
  doc.setAttribute('theme', presetOrHex); // e.g. 'emerald', 'violet', or '#ff5722'
}

// Toggle between dark and light modes
function toggleColorScheme() {
  const current = doc.getAttribute('color-scheme') || 'dark';
  doc.setAttribute('color-scheme', current === 'dark' ? 'light' : 'dark');
}

// Adjust corner roundness dynamically
function setRadius(size) {
  doc.setAttribute('radius', size); // 'none', 'sm', 'md', 'lg', 'full'
}

// Switch UI scaling dynamically
function setScale(size) {
  doc.setAttribute('scale', size); // 'sm', 'default', 'lg'
}