Customizing

Three levels, in the order you should reach for them: CSS, configuration, swizzling.

Your own CSS

export default createConfig({
  title: 'voraus.example',
  projectName: 'voraus-example',
  customCss: './src/css/custom.css',
})

An array works too. These load after the theme, so they win without !important.

Prefer overriding a custom property to overriding a rule:

:root {
  --ifm-navbar-height: 3.5rem;
  --ifm-code-font-size: 90%;
}

.my-callout {
  border-image: var(--voraus-gradient-tur) 1;
  background: var(--voraus-color-vi-tur-bright);
}

The brand colors are listed under Colors.

Navbar items

export default createConfig({
  title: 'voraus.example',
  projectName: 'voraus-example',
  navbarItems: [{ to: '/api', label: 'API', position: 'right' }],
  iconLinks: [
    {
      icon: 'github',
      href: 'https://github.com/vorausrobotik/voraus-example',
      label: 'GitHub repository',
    },
  ],
})

Use navbarItems, not themeConfig.navbar.items: arrays replace in the merge, so the latter discards the shared defaults.

iconLinks is the same list for links that should read as a mark rather than a word. They are appended after navbarItems and default to the right. See Icon links.

Replacing a component

npm run swizzle @voraus/docusaurus-theme Logo -- --typescript

Prefer wrapping (--wrap) over ejecting wherever it is offered. An ejected copy is a fork: it has to be reconciled by hand on every Docusaurus upgrade and stops receiving fixes.

Four components exist to override:

Component	What it does
Logo	Renders the voraus wordmark inline instead of an image path
Navbar/Logo	Appends the version badge after the logo
Navbar/ColorModeToggle	Tags the switch so it can be hidden inside vdoc
NavbarItem/ComponentTypes	Registers the item type behind iconLinks

Everything else comes from Docusaurus unchanged. The component that draws an icon link is reached through that map rather than by name, so replacing it means ejecting NavbarItem/ComponentTypes and pointing the entry at your own.