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" | "terrarium" | stringRequired
    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

      • alt
        string

        Alternative text for the logo image. The logo is the only content of the link to the home page, so this doubles as that link's accessible name. Defaults to seo.metatags["og:site_name"] , then to "Home" .

      • 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
          stringRequired
          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
        stringRequired
        The primary color of the theme.
      • light
        string
        The light color of the theme.
      • dark
        string
        The dark color of the theme.
    • cssTokens
      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.
      • 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
      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

        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.

    • footer
      AppearanceFooter
      Footer appearance for the theme.
      • surface
        "page"
        The footer surface.
    • navigationDropdown
      AppearanceNavigationDropdown

      Navigation dropdown appearance (header anchors & tabs dropdownMenu ).

      • 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.

  • 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, content] @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 ⭐️