<SiteTitle
  title="Kitchen Sink"
  logoSrc="/favicon.svg"
  logoAlt="Kitchen Sink logo"
  href="/"
/>

View Code

Light and dark logos

Provide separate logoLightSrc and logoDarkSrc images to swap the logo with the color scheme — useful when the logo is a non-square SVG with the site name baked in. Set logoReplacesTitle so the text title is hidden visually while staying in the DOM as the accessible name. Leave logoAlt empty in that case, so the name isn't announced twice. Toggle the theme to see the image change.

<SiteTitle
  title="Kitchen Sink"
  logoLightSrc="/logo-light.svg"
  logoDarkSrc="/logo-dark.svg"
  logoReplacesTitle={true}
  href="/"
/>

View Code

Overview

The SiteTitle component renders the site's name and optional logo in the header. It links back to the home page and supports separate light/dark mode logo variants.

Props

Prop	Type	Default	Description
`title`	`string`	—	Site title text
`href`	`string`	`"/"`	Link target (usually the home page)
`logoSrc`	`string`	—	Logo image URL (used for both themes if no variants given)
`logoDarkSrc`	`string`	—	Logo image for dark theme
`logoLightSrc`	`string`	—	Logo image for light theme
`logoAlt`	`string`	—	Alt text for the logo image
`logoReplacesTitle`	`boolean`	—	If true, the logo replaces the visible title. The title text stays in the DOM (visually hidden) as the accessible name — leave `logoAlt` empty to avoid announcing the name twice.

Configuration

Configure the site title and logo in qwik-docs.config.ts:

defineConfig({
  title: 'My Documentation',
  logo: {
    src: '/logo.svg',
    alt: 'My Project Logo',
  },
})

For a logo that bakes in the site name and flips with the theme, give light and dark images and set replacesTitle. Omit alt so the visually-hidden title text remains the single accessible name:

defineConfig({
  title: 'My Documentation',
  logo: {
    light: '/logo-light.svg',
    dark: '/logo-dark.svg',
    replacesTitle: true,
  },
})

Features

Supports separate dark/light mode logos via CSS class toggling
When logoReplacesTitle is true, the title text gets the .sr-only class
Links to the configured href (defaults to /)
The title text is always present in the DOM for accessibility