Theme Configuration

Ardo's default theme is designed to look good out of the box — but your documentation should feel like your project, not a generic template. Everything from the logo to the footer is configurable through the themeConfig option in your Vite config.

Site Title & Logo

Give your site its identity. You can use a single logo or provide separate versions for light and dark mode:

export default defineConfig({
  themeConfig: {
    logo: "/logo.svg",
    // or with dark mode variant
    logo: {
      light: "/logo-light.svg",
      dark: "/logo-dark.svg",
    },
    siteTitle: "My Docs",
    // set to false to hide title
    siteTitle: false,
  },
})

Navigation

The top navigation bar is where readers find their way around. Links can be simple or grouped into dropdowns:

export default defineConfig({
  themeConfig: {
    nav: [
      { text: "Guide", link: "/guide/introduction" },
      { text: "API", link: "/api-reference" },
      {
        text: "Dropdown",
        items: [
          { text: "Option A", link: "/option-a" },
          { text: "Option B", link: "/option-b" },
        ],
      },
    ],
  },
})

Sidebar

The sidebar defines how readers navigate your content. Start with a simple flat structure and add hierarchy as your docs grow.

Simple Array

export default defineConfig({
  themeConfig: {
    sidebar: [
      {
        text: "Guide",
        items: [
          { text: "Introduction", link: "/guide/introduction" },
          { text: "Getting Started", link: "/guide/getting-started" },
        ],
      },
    ],
  },
})

Multi-Sidebar

As your documentation grows, different sections often need different navigation. Use an object keyed by path prefix to show context-specific sidebars:

export default defineConfig({
  themeConfig: {
    sidebar: {
      "/guide/": [
        {
          text: "Guide",
          items: [{ text: "Introduction", link: "/guide/introduction" }],
        },
      ],
      "/api/": [
        {
          text: "API Reference",
          items: [{ text: "Config", link: "/api-reference" }],
        },
      ],
    },
  },
})

Collapsible Groups

{
  text: 'Advanced',
  collapsed: true,
  items: [
    { text: 'Plugins', link: '/guide/plugins' },
  ],
}

Social Links

Connect your documentation to your project's community. Icons appear in the header:

export default defineConfig({
  themeConfig: {
    socialLinks: [
      { icon: "github", link: "https://github.com/..." },
      { icon: "twitter", link: "https://twitter.com/..." },
      { icon: "discord", link: "https://discord.gg/..." },
    ],
  },
})

Supported icons: github, twitter, discord, linkedin, youtube, npm

Footer

export default defineConfig({
  themeConfig: {
    footer: {
      message: "Released under the MIT License.",
      copyright: "Copyright © 2024 Your Name",
    },
  },
})

Search

Full-text search is built in and runs entirely in the browser — no external service needed. It's enabled by default, but you can configure the placeholder text:

export default defineConfig({
  themeConfig: {
    search: {
      enabled: true,
      placeholder: "Search docs...",
    },
  },
})

Edit Link

Make it easy for readers to contribute. An "Edit this page" link appears at the bottom of each page, pointing to the source file in your repository:

export default defineConfig({
  themeConfig: {
    editLink: {
      pattern: "https://github.com/user/repo/edit/main/docs/:path",
      text: "Edit this page on GitHub",
    },
  },
})

Last Updated

Show readers when a page was last modified. This builds trust — especially for technical documentation where freshness matters:

export default defineConfig({
  themeConfig: {
    lastUpdated: {
      enabled: true,
      text: "Last updated",
      formatOptions: {
        year: "numeric",
        month: "long",
        day: "numeric",
      },
    },
  },
})

Outline (Table of Contents)

The outline panel on the right side of each page helps readers scan content and jump to sections. Configure which heading levels to include:

export default defineConfig({
  themeConfig: {
    outline: {
      level: [2, 3], // Show h2 and h3
      label: "On this page",
    },
  },
})