Pre-built Themes & Style Recipes

Looking for a cohesive aesthetic without designing color tokens from scratch? RapiDoc includes 9 built-in presets inspired by modern design systems, fully compatible with both dark and light color modes.

---

1. Amber Minimal (Default Fallback)

Warm amber highlights over deep charcoal surfaces. Delivers high contrast and warm visual polish.

Dark Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="amber"
  color-scheme="dark"
  radius="sm"
  scale="default"
></rapi-doc>

Light Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="amber"
  color-scheme="light"
  radius="sm"
  scale="default"
></rapi-doc>

CSS Enhancements

/* Add subtle amber focus ring and border styling */
rapi-doc::part(section-navbar) {
  border-right: 1px solid var(--border);
}
rapi-doc::part(textbox-nav-filter) {
  border-radius: var(--radius);
}

---

2. Developer Blue (Default)

The classic developer portal palette: crisp blue brand accent paired with balanced dark or light surfaces.

Dark Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="blue"
  color-scheme="dark"
  radius="md"
  scale="default"
></rapi-doc>

Light Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="blue"
  color-scheme="light"
  radius="md"
  scale="default"
></rapi-doc>

---

3. Fintech & Security Emerald (emerald / modern)

Polished dark slate surfaces accented with vivid emerald green, ideal for payments, banking, security, and infrastructure APIs.

Dark Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="emerald"
  color-scheme="dark"
  radius="sm"
  scale="default"
></rapi-doc>

Light Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="emerald"
  color-scheme="light"
  radius="sm"
  scale="default"
></rapi-doc>

CSS Enhancements

/* Style primary actions with emerald glow */
rapi-doc::part(btn-fill) {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  border-radius: var(--radius);
}

---

4. Modern Violet (violet)

Electric purple accents over deep violet-tinted surfaces. Perfect for cloud platforms, SaaS, and Web3 products.

Dark Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="violet"
  color-scheme="dark"
  radius="lg"
  scale="default"
></rapi-doc>

Light Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="violet"
  color-scheme="light"
  radius="lg"
  scale="default"
></rapi-doc>

---

5. Monochrome Graphite (graphite)

Ultra-clean monochrome palette inspired by modern terminal interfaces and developer IDEs.

Dark Mode

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="graphite"
  color-scheme="dark"
  radius="none"
  scale="default"
></rapi-doc>

Light Mode (Stripe Aesthetic)

<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  theme="graphite"
  color-scheme="light"
  radius="sm"
  scale="default"
></rapi-doc>

---

6. Ruby Rose (rose)

Vibrant rose pink highlights over neutral slate surfaces. Contemporary, high-contrast, and energetic.

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

---

7. Enterprise Slate (slate)

Understated cool grey slate tones tailored for enterprise intranets and corporate software documentation.

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json" theme="slate" color-scheme="dark" radius="sm"></rapi-doc>

---

8. Custom Corporate Brand Hex Color

Supply your exact brand hex code into theme. RapiDoc automatically manages focus rings and accessible foreground text contrast.

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json" theme="#2563eb" color-scheme="dark" radius="md"></rapi-doc>

---

9. Automatic OS Dark / Light Switching (system)

To match the end user’s operating system preferences automatically, set color-scheme="system":

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json" theme="emerald" color-scheme="system" radius="md"></rapi-doc>