Theme

The default theme ships inside the svedocs package. It uses Tailwind CSS v4 and framework CSS variables, so there is no separate theme package to install.

Styles#

Import the theme stylesheet from the SvelteKit root layout:

Sveltesrc/routes/+layout.svelte
1<script>
2  import 'svedocs/theme/styles.css';
3</script>
4
5<slot />

The stylesheet defines --sd-* tokens and uses data-theme for light and dark mode.

Palette#

TypeScriptsvedocs.config.ts
1import { defineConfig } from 'svedocs/config';
2
3export default defineConfig({
4  theme: {
5    defaultMode: 'system',
6    palette: {
7      accent: 'emerald',
8      neutral: 'zinc'
9    },
10    fonts: {
11      sans: '"IBM Plex Sans", "Avenir Next", sans-serif',
12      mono: '"JetBrains Mono", "SFMono-Regular", monospace',
13      display: '"IBM Plex Sans", "Avenir Next", sans-serif'
14    },
15    radius: '2px',
16    codeTheme: {
17      light: 'light-plus',
18      dark: 'dark-plus'
19    },
20    brand: {
21      label: 'svedocs',
22      href: '/',
23      mark: 'pixel'
24    },
25    nav: [
26      { label: 'Docs', href: '/docs' },
27      { label: 'Configuration', href: '/docs/configuration' },
28      { label: 'API', href: '/docs/reference/api' }
29    ],
30    social: [
31      { label: 'GitHub', href: 'https://github.com/svedocs/svedocs', external: true }
32    ],
33    footer: {
34      text: 'MIT licensed.',
35      links: [{ label: 'Cloudflare', href: '/docs/integrations/cloudflare' }]
36    },
37    home: {
38      kicker: 'Edge-first Svelte docs',
39      primaryAction: { label: 'Read docs', href: '/docs' },
40      secondaryAction: { label: 'Configure', href: '/docs/configuration' },
41      visual: { type: 'pixel' }
42    }
43  }
44});

palette.accent accepts a built-in token such as emerald, sky, indigo, or a CSS color value. The default theme keeps the palette restrained and documentation-focused.

home.visual can stay as the built-in pixel module or point at a project image with { type: 'image', src: '/hero.png', alt: 'Preview' }.

Interaction#

Built-in theme behavior includes:

• Search dialog with keyboard focus management.
• Ask AI panel with JSON and event-stream responses.
• Command palette for docs, search, and Ask AI entry points.
• Recursive sidebar with collapsed groups and locale-scoped trees.
• Mobile menu state with transition.
• ToC highlighting based on the active heading.
• Code block toolbar with copy support.
• prefers-reduced-motion compatible transitions.

Single pages#

Content under content/pages renders through the built-in single-page template by default. Use layout: home for the homepage, layout: page for the built-in page template, or a registered custom layout name for project-specific pages.

Markdown
1---
2title: Changelog
3description: Product updates rendered with the single-page template.
4---
5
6# Changelog

Custom layouts#

Register named layouts in the Vite plugin:

TypeScriptvite.config.ts
1svedocs({
2  layouts: {
3    feature: '$lib/FeatureLayout.svelte'
4  }
5});

Then select a layout in frontmatter:

Markdown
1---
2title: Feature Page
3layout: feature
4---

Layouts receive the same page data as default pages, so custom single pages can still use the manifest, search records, SEO metadata, and framework shell.