Theming

Customize the appearance of your API documentation using Scalar UI themes and configuration options. Control colors, layout, and visual elements to match your brand.

What is Scalar Theming?

Scalar UI provides built-in themes and customization options to style your API documentation. You can choose from pre-built themes, customize the layout, and add your own CSS.

Configuration

Define Scalar UI theming in your config/swagger.ts file:

import { defineConfig } from "adonis-open-swagger";

export default defineConfig({
  scalar: {
    theme: "purple",
    layout: "modern",
    showSidebar: true,
    customCss: ".scalar-card { border-radius: 8px; }",
  },
});

Scalar Properties

The scalar object supports the following properties:

theme (optional)

Choose a color theme for your documentation. Use auto for automatic light/dark detection based on user preferences.

Available themes:

• auto - Automatic light/dark detection
• alternate - Alternative color scheme
• default - Default Scalar theme
• moon - Dark theme with blue accents
• purple - Purple accent theme
• solarized - Solarized color palette
• bluePlanet - Blue planet theme
• saturn - Saturn-inspired theme
• kepler - Kepler theme
• mars - Mars-inspired red theme
• deepSpace - Deep space dark theme
• laserwave - Synthwave-inspired theme
• elysiajs - ElysiaJS theme
• none - No theme styling

{
  scalar: {
    theme: "purple";
  }
}

layout (optional)

Choose the layout style for your documentation interface.

Available layouts:

• modern - Modern, streamlined layout
• classic - Traditional documentation layout

{
  scalar: {
    layout: "modern";
  }
}

showSidebar (optional)

Control whether the sidebar navigation is visible by default.

{
  scalar: {
    showSidebar: true;
  }
}

customCss (optional)

Add custom CSS to further customize the appearance of your documentation.

{
  scalar: {
    customCss: `
      .scalar-card {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
    `;
  }
}

configuration (optional)

Additional Scalar configuration options. This accepts any valid Scalar configuration as a key-value object.

{
  scalar: {
    configuration: {
      hideModels: false,
      searchHotKey: "k",
    };
  }
}