xyd 0.1.0-beta - Coming Soon

Reference
/
Theme

Theme

Theme configuration that changes the look and feel of the project

Properties

    name
    "poetry" | "cosmo" | "opener" | "picasso" | "gusto" | "solar" | string
    Required
    A theme name.
    logo
    Path to logo image or object with path to "light" and "dark" mode logo images, and where the logo links to.
      Logo
      Logo
      Logo configuration interface
        light
        string

        Path to the logo in light mode. For example: /path/to/logo.svg

        dark
        string

        Path to the logo in dark mode. For example: /path/to/logo.svg

        href
        string
        External href to when clicking on the logo
        page
        string
        The page to link to when clicking on the logo
      string
      string
      React.JSX.Element
      React.JSX.Element
    fonts
    ThemeFont
    Font configuration for the theme.
      Font
      Font
        family
        string
        The font family to use.
        weight
        string
        The font weight to use.
        src
        string
        The font src to use.
        format
        "woff2" | "woff" | "ttf"
        The font format to use.
      Font[]
      Font[]
    favicon
    string
    Path to the favicon image. For example: /path/to/favicon.svg
    icons
    Icons
    The iconify library setup.
      library
      The iconify library
        IconLibrary
        IconLibrary
          name
          string
          Required
          The iconify library name
          version
          string
          The iconify library version
          default
          boolean
          The default iconify icon name
          noprefix
          boolean
          Merge icons from the library into the default iconify library
        string
        string
        IconLibrary[]
        IconLibrary[]
    appearance
    Appearance
    Appearance configuration for the theme.
      colorScheme
      "light" | "dark" | "os"
      The default color scheme to use.
      colorSchemeButton

      If false then the color scheme button will not be displayed.

      colors
      Colors
      Colors configuration for the 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.
      cssTokens
      { [token: string]: string; }
      CSS tokens for the theme.
      presets
      string[]
      Presets for the theme.
      logo
      AppearanceLogo
      Logo appearance for the theme.
        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
      AppearanceSearch
      Search appearance for the theme.
        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
      AppearanceHeader
      Header appearance for the theme.
        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
      AppearanceTabs
      Tabs appearance for the theme.
        surface
        "center" | "sidebar"
        The tabs to display in the header.
      sidebar
      AppearanceSidebar
      Sidebar appearance for the theme.
        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
      AppearanceButtons
      Buttons appearance for the theme.
        rounded
        boolean | "sm" | "md" | "lg"
      tables
      AppearanceTables
      Table appearance for the theme.
        kind
        "secondary"
        The kind of the table.
      banner
      AppearanceBanner
      Banner appearance for the theme.
        fixed
        boolean

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

      content
      AppearanceContent
      Content appearance for the theme.
        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.

      footer
      AppearanceFooter
      Footer appearance for the theme.
        surface
        "page"
        The footer surface.
    writer
    Writer
    Writer configuration for the theme.
      maxTocDepth
      number
      The maximum number of table of conten§ts levels.
      copyPage
      boolean
      Copy page button
    coder
    Coder
    Coder configuration for the theme, including options like syntax highlighting.
      lines
      boolean

      If true then code blocks will have line numbers by default.

      scroll
      boolean

      If true then code blocks will have a scrollbar by default.

      syntaxHighlight
      Theme
      Syntax highlighting configuration.
    head
    array of HeadConfig [string, Record<string, string | boolean>, ]
    Configuration type for head elements that can be added to the HTML head. Format: [tagName, attributes] @example: ['script', { src: 'https://example.com/script.js', defer: true }]
    scripts
    string[]
    Custom scripts to be added to the head of the every page. Paths are relative to the root of the project or absolute.
Built with

Show your support! Star us on GitHub ⭐️