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
string
Required
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.

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
boolean
If `true` then the breadcrumbs will be displayed.
sectionSeparator
boolean
If `true` then the section separator will be displayed.

Customization Quickstart Components

Appearance

Customize the visual aspects of your documentation

Color Scheme

Colors

CSS Tokens

Logo

Search

Header

Tabs

Sidebar

Buttons

Banner

Content