Tiramisu Docs

Configuration

Theme

Customize logos, navigation links, GitHub integration, dark mode, and CSS in Tiramisu Docs.

Theme & Appearance

Tiramisu Docs uses a customizable theme built on Tailwind CSS and shadcn-svelte. You can adjust colors, branding, and appearance through your config file.

Set your logo as a string (same for light and dark) or an object with separate variants:

typescript 
// Single logo
logo: "/logo.svg",

// Light and dark variants
logo: {
  light: "/logo.svg",
  dark: "/logo-dark.svg",
},

The logo appears in the top-left of the sidebar (or top bar when sections are enabled).

Add links to the top navigation bar:

typescript 
nav: [
  { label: "Docs", href: "/docs" },
  { label: "Blog", href: "/blog" },
],

GitHub Integration

Configure GitHub to enable "Edit on GitHub" links on doc pages:

typescript 
github: {
  repo: "user/repo",
  branch: "main",
  dir: "src/docs",
},

The dir field specifies where your docs live relative to the repository root.

MCP Server

Set a URL for the built-in MCP server:

typescript 
mcp: "https://mcp.example.com",

See the MCP Server page for details on configuring AI-assisted documentation browsing.

Dark Mode

Dark mode is built in and works automatically. Users can toggle between light and dark themes using the theme switcher in the sidebar or top bar. The theme preference is saved to local storage.

CSS Customization

Import the Tiramisu theme in your src/app.css:

css 
@import "@tiramisu-docs/kit/theme.css";

You can override CSS custom properties or add your own Tailwind classes to customize the look and feel further.