xyd 0.1.0-beta - Coming Soon

Customization
/
Appearance

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:

 

Colors

Define the primary colors used throughout your documentation site.

asset

Set the main color palette for your theme:
    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:

List of available tokens you can find here

Configure where and how your logo appears in the interface.

Logo

Control logo visibility in different areas of the interface:
    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.

asset

Customize search bar behavior and positioning:
    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.

Header

Configure the header appearance and behavior.

asset

Customize header styling and functionality:
    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:
    surface
    "center" | "sidebar"
    The tabs to display in the header.

Sidebar

Configure sidebar appearance and scroll behavior.

asset

Customize sidebar styling and scroll indicators:
    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:
    rounded
    boolean | "sm" | "md" | "lg"

Configure banner positioning and behavior.

asset

Control banner positioning and display:
    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:
    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.
Built with

Show your support! Star us on GitHub ⭐️