Customize API Reference themes

Choose a built-in theme#

Available themes include alternate, default, moon, purple, solarized, bluePlanet, saturn, kepler, mars, deepSpace, and laserwave.

{
  theme: 'moon'
}

Use theme: 'none' when you do not want a theme applied. The default theme is default.

Choose a layout#

Scalar supports two layouts: modern, which is the default, and classic, inspired by Swagger UI.

Override fonts and colors#

By default, Scalar uses Inter and JetBrains Mono from its CDN. Set withDefaultFonts: false and override --scalar-font and --scalar-font-code when you provide your own fonts.

<style>
  :root {
    --scalar-font: 'Roboto', sans-serif;
    --scalar-font-code: 'Roboto Mono', monospace;
  }
</style>

You can also override the light and dark mode variables that control text, backgrounds, accents, borders, and the sidebar.

<style>
  .light-mode {
    --scalar-color-1: #121212;
    --scalar-color-accent: #0a85d1;
    --scalar-background-1: #fff;
  }
</style>

CSS framework integration#

When embedding the reference with a framework that uses CSS cascade layers, declare Scalar's layers before the framework's layers so the framework utilities win.

@layer scalar-base, scalar-theme, scalar-config, theme, base, components, utilities;
@import "tailwindcss";

For frameworks without @layer, unlayered styles naturally have higher priority than Scalar's layered styles.