Appearance

Customization

Appearance

Customize the visual aspects of your documentation

The appearance configuration allows you to customize the visual aspects of your documentation site, including colors, layout, and component behavior.

By default each Theme use different appearance settings. You can always overwrite that.

Color Scheme

Control the default color scheme for your documentation site.

asset

Configure the default color scheme that will be applied when users first visit your site:

{
    "theme": {
        "appearance": {
            "colorScheme": "'light' | 'dark' | 'os'"
        }
    }
}

Colors

Define the primary colors used throughout your documentation site.

asset

Set the main color palette for your theme:

{
    "theme": {
        "appearance": {
            "colors": {
                "primary": "#3b82f6",
                "dark": "#000",
                "light": "#fff"
            }
        }
    }
}

primary
stringRequired
The primary color of the theme.
light
string
The light color of the theme.
dark
string
The dark color of the theme.

CSS Tokens

Define custom CSS variables for advanced theming.

asset

Create custom CSS tokens that can be used throughout your theme:

{
    "theme": {
        "appearance": {
            "cssTokens": {
                "--dark100": "#000"
            }
        }
    }
}

List of available tokens you can find here

Logo

Configure where and how your logo appears in the interface.

Control logo visibility in different areas of the interface:

{
    "theme": {
        "appearance": {
            "logo": {
                "sidebar": "true | false | 'mobile' | 'desktop'",
                "header": "true | false | 'mobile' | 'desktop'"
            }
        }
    }
}

sidebar
boolean | "mobile" | "desktop"
If `true` then the logo will be displayed on the sidebar.
header
boolean | "mobile" | "desktop"
If `true` then the logo will be displayed on the header.

Search

Configure the search functionality and its placement.

Customize search bar behavior and positioning:

{
    "theme": {
        "appearance": {
            "search": {
                "sidebar": "true | false | 'mobile' | 'desktop'",
                "middle": "true | false | 'mobile' | 'desktop'",
                "right": "true | false | 'mobile' | 'desktop'",
                "fullWidth": "true | false"
            }
        }
    }
}

fullWidth
boolean
If `true` then the search bar will be displayed as a full width.
sidebar
boolean | "mobile" | "desktop"
If `true` then the search bar will be displayed on the sidebar.
middle
boolean | "mobile" | "desktop"
If `true` then the search bar will be displayed in the middle of the header.
right
boolean | "mobile" | "desktop"
If `true` then the search bar will be displayed on the right side of the header.

Configure the header appearance and behavior.

asset

Customize header styling and functionality:

{
    "theme": {
        "appearance": {
            "header": {
                "externalArrow": "true | false",
                "separator": "'right'",
                "type": "'classic' | 'pad'"
            }
        }
    }
}

externalArrow
boolean
If `true` then the header external links will display an external arrow.
separator
"right"
If `right` then separator will be displayed on the right side of the header.
type
"classic" | "pad"
The type of the header.
buttonSize
"sm" | "md" | "lg"
The button size of the header.

Tabs

Configure tab navigation appearance and placement.

asset

Control how tabs are displayed in the interface:

{
    "theme": {
        "appearance": {
            "tabs": {
                "surface": "'center' | 'sidebar'"
            }
        }
    }
}

surface
"center" | "sidebar"
The tabs to display in the header.

Configure sidebar appearance and scroll behavior.

asset

Customize sidebar styling and scroll indicators:

{
    "theme": {
        "appearance": {
            "sidebar": {
                "externalArrow": "true | false",
                "scrollShadow": "true | false",
                "scrollbar": "'secondary'",
                "scrollbarColor": "#000"
            }
        }
    }
}

externalArrow
boolean
If `true` then the sidebar will display a scroll shadow.
scrollShadow
boolean
If `true` then the sidebar will display a scroll shadow.
scrollbar
"secondary"
The color of the sidebar scrollbar.
scrollbarColor
string
The color of the sidebar scrollbar.
scrollTransition
"smooth" | "instant"
The transition behaviour of the sidebar scroll when navigating to a new page.
groupCase
"none" | "uppercase"
Letter-casing of sidebar group headers. Defaults to `"uppercase"` ; set `"none"` to render group labels exactly as authored.
scroll
"sidebar" | "list"
Which element scrolls. `"list"` (default): only the item list scrolls, below the fixed (pinned) region. `"sidebar"` : the WHOLE sidebar scrolls — the scrollbar spans its full height — and the fixed region sticks to the top while items scroll beneath it.

Buttons

Configure button styling and appearance.

asset

Customize button corner radius and styling:

{
    "theme": {
        "appearance": {
            "buttons": {
                "rounded": "true | false | 'lg' | 'md' | 'sm'"
            }
        }
    }
}

rounded
boolean | "sm" | "md" | "lg"

Configure banner positioning and behavior.

Control banner positioning and display:

{
    "theme": {
        "appearance": {
            "banner": {
                "fixed": "true | false"
            }
        }
    }
}

fixed
boolean
If `true` then the banner will have fixed position (always visible).

Content

Configure content writing and display options.

asset

Customize content appearance and navigation elements:

{
    "theme": {
        "appearance": {
            "content": {
                "kind": "'secondary'",
                "breadcrumbs": "true | false",
                "sectionSeparator": "true | false"
            }
        }
    }
}

contentDecorator
"secondary"
Content decorator for the theme.
breadcrumbs
Controls the breadcrumbs. `true` / `false` toggles them; an object ( AppearanceBreadcrumbs ) additionally configures `links` and `rootLevel` (both default `true` ).
- AppearanceBreadcrumbs
  AppearanceBreadcrumbs
  Fine-grained breadcrumbs options (the object form of AppearanceContent.breadcrumbs ).
  links
  boolean
  If `true` (default) breadcrumb items that resolve to a real route render as clickable links; if `false` every crumb is plain text.
  rootLevel
  boolean
  If `true` (default) the top-level segment (the tab/route the page belongs to, e.g. "Guides") is included; if `false` it is omitted.
- boolean
  boolean
sectionSeparator
boolean
If `true` then the section separator will be displayed.

BreadcrumbsComing Soon

Breadcrumbs show the full path from the top-level tab/route down to the current page — each crumb is a clickable link only when it resolves to a real route (the parent tab/route, a page, or a group that declares a page); a plain group (no route) and the current page are plain text.

content.breadcrumbs accepts a boolean, or an object for finer control (both flags default to true):


{
    "theme": {
        "appearance": {
            "content": {
                "breadcrumbs": {
+
                    "links": true,
+
                    "rootLevel": true
                }
            }
        }
    }
}

links — when true, breadcrumb items that resolve to a real route render as clickable links; when false, every crumb is plain text.
rootLevel — when true, the top-level segment (e.g. Guides) is shown; when false, it is omitted.

Style the dropdown menus on header anchors and tabs (the dropdownMenu feature).

{
    "theme": {
        "appearance": {
            "navigationDropdown": {
                "chevron": "'rotate' | 'static'",
                "items": "'padded' | 'flush'"
            }
        }
    }
}

chevron
"rotate" | "static"
Trigger chevron behavior when the menu is open. `"rotate"` (default) flips the chevron; `"static"` leaves it unchanged.
items
"padded" | "flush"
Menu item layout. `"flush"` makes the hovered item background touch all four edges of the popover (no surrounding padding); `"padded"` (default) keeps a small inset with rounded item corners.

chevron — trigger chevron behavior when open: "rotate" (default) flips it, "static" leaves it unchanged.
items — "flush" makes the hovered item background touch all four edges of the popover (no surrounding padding); "padded" (default) keeps a small inset with rounded item corners.

Edit page

Customization Quickstart Components

Appearance

Customize the visual aspects of your documentation

Color Scheme

Colors

CSS Tokens

Logo

Search

Header

Tabs

Sidebar

Buttons

Banner

Content

Appearance

Customize the visual aspects of your documentation

Color Scheme

Colors

CSS Tokens

Logo

Search

Header

Tabs

Sidebar

Buttons

Banner

Content

BreadcrumbsComing Soon

Navigation DropdownComing Soon