Cascade Behaviour

This section explains how custom CSS interacts with the portal's existing styles and gives component-specific guidance for prose content, the API viewer, the side navigation, the profile menu, tooltips, and fonts.

Cascade Behavior

Understanding how custom CSS interacts with the portal's existing styles avoids frustration.

How custom CSS wins

The portal uses Tailwind CSS. Most Tailwind utilities are placed in @layer utilities, which means they are lower priority than unlayered CSS (the @layer cascade origin rule). Your custom CSS is unlayered and therefore wins over @layer utilities rules, even without !important, as long as specificity is equal or higher.

The scope (body.sp-consumer) adds an element and a class to every selector. This gives a combined specificity of at least (0,2,1) for the simplest .sp-* rule. That beats standalone Tailwind utilities like .bg-white (0,1,0) on specificity, and also beats Tailwind Typography's .prose-portal modifier (0,1,0), which would otherwise win by source order.

CSS variable overrides

A small number of components expose CSS custom properties as their primary theming hook. The portal injects baseline values for these variables; your custom CSS overrides them:

.sp-accent-divider: the colored stripe below the top bar, via --sp-accent-divider-color.
.sp-product-tile-accent: the accent bar at the top of product tiles, via --sp-product-tile-accent-color.
.sp-sidenav-item-bg states, via --sp-sidenav-item-bg, --sp-sidenav-item-active-bg, and --sp-sidenav-item-hover-bg.
.sp-search-modal-tab-badge, via --sp-counter-badge-bg, --sp-counter-badge-border, and --sp-counter-badge-text (override under .dark for the dark-mode value).
.sp-operation-method, via --sp-method-get, --sp-method-post, --sp-method-put, --sp-method-patch, --sp-method-delete, --sp-method-pub, --sp-method-sub, and --sp-method-query (override under .dark for the dark-mode value).

.sp-accent-divider { --sp-accent-divider-color: #c4d700; }
.sp-product-tile-accent { --sp-product-tile-accent-color: #c4d700; }
.sp-operation-method { --sp-method-get: #0077cc; }
.dark .sp-operation-method { --sp-method-get: #55aaff; }

Specific components

Prose content and typography

The hero description and markdown pages render content inside a prose container that carries the prose-portal class. This class sets all Tailwind Typography CSS variables, for example, --tw-prose-body. Because of scoping, your custom CSS wins over .prose-portal on specificity, so you can override prose variables on any ancestor selector:

/* Override prose body color inside the hero */
.sp-hero {
  --tw-prose-body: rgba(255, 255, 255, 0.95);
  --tw-prose-headings: #ffffff;
  --tw-prose-links: rgba(255, 255, 255, 0.8);
  --tw-prose-bold: #ffffff;
  --tw-prose-bullets: rgba(255, 255, 255, 0.7);
}

Available prose variables: --tw-prose-body, --tw-prose-headings, --tw-prose-lead, --tw-prose-links, --tw-prose-bold, --tw-prose-counters, --tw-prose-bullets, --tw-prose-hr, --tw-prose-quotes, --tw-prose-quote-borders, --tw-prose-captions, --tw-prose-code, --tw-prose-pre-code, --tw-prose-pre-bg, --tw-prose-th-borders, and --tw-prose-td-borders.

You can also target element types directly inside .sp-markdown-content:

.sp-markdown-content h1, .sp-markdown-content h2 { color: #004831; }
.sp-markdown-content a { color: #367a91; }
.sp-markdown-content code { background-color: #f7f7f7; color: #004831; }
.sp-markdown-content th { background-color: #e8f0ee; }

API viewer

The Stoplight Elements renderer (used for OpenAPI 3 specs) uses its own internal CSS variable system for backgrounds. Override --color-canvas on .sp-api-viewer-content to retheme the entire spec view:

.sp-api-viewer-content {
  --color-canvas: #fafafa;
  --color-canvas-pure: #fafafa;
  --color-canvas-100: #fafafa;
  --color-canvas-200: #f0f0f0;
  --color-canvas-tint: rgba(250, 250, 250, 0.5);
  --color-canvas-dialog: #fafafa;
}
.dark .sp-api-viewer-content {
  --color-canvas: #0f172a;
  --color-canvas-pure: #0f172a;
  --color-canvas-100: #0f172a;
  --color-canvas-200: #1a2540;
}

The Swagger UI renderer (used for Swagger 2.0 specs) renders its own elements. Use descendant selectors to reach inside it:

.sp-api-viewer-content .swagger-ui { background-color: #fafafa; }
.sp-api-viewer-content .scheme-container { background-color: #fafafa; box-shadow: none; }

Side nav text color

.sp-sidenav-item is the outer wrapper. The text is rendered inside a nested div that has an explicit Tailwind text color class. Because explicit declarations beat inherited values regardless of layer, setting color on .sp-sidenav-item alone does not change the visible text color. Target the inner div directly:

/* This does not work: color is inherited, not explicit */
.sp-sidenav-item { color: #2d406c; }

/* This does work: targets the explicit class directly */
.sp-sidenav-item-bg div { color: #2d406c; }
.sp-sidenav-item--active .sp-sidenav-item-bg div { color: #367a91; }

Profile menu rows

TopBarMenuLink (used for the mode toggle and manage account rows) renders an inner div with a hardcoded dark:bg-neutral-95 background. In dark mode this renders near-black. To match it to your menu panel background, target the inner div:

.dark .sp-profile-menu a div,
.dark .sp-profile-menu form div {
  background-color: #1a2e25;
}

Tooltip

The tooltip panel and its arrow tip share CSS variables. Setting variables on .sp-tooltip themes both:

.sp-tooltip {
  --tooltipBackground: #2d406c;
  --tooltipBorder: #367a91;
  --tooltipColor: #ffffff;
}

Fonts

@font-face is blocked. The font-family property itself is allowed, so you can reference any font that is already loaded on the page. The portal loads the font chosen in Settings > Appearance > Font from Google Fonts. Adobe Fonts (such as Myriad Pro) can be loaded via a separate font embed URL configuration option in portal settings, after which font-family: myriad-pro, sans-serif resolves correctly.

In this section: