Themes

Eleven presets ship in the box. Pick one and it applies across the whole site instantly, so every component and the chrome around it show the theme exactly as it renders in a real project. Toggle dark mode to see both sides.

Showing Darkmatter (default)

Buttons

Form

Badges & keys

New Default Stable Beta Deprecated

Press ⌘ K to search

Chart palette

Callout

Tip

Callouts sit on the theme's surface and text colors.

Tabs

A live, themed tab panel.

Steps

Install

Add the package.

Configure

Wire the pipeline.

Card

Quick Start

A linkable card with a hover state.

Palette

Primary

Secondary

Accent

Muted

Destructive

Border

Typography

The quick brown fox

Body copy in the muted tone, with an inline link and inline code.

Use this theme in your project

The picker applies themes at runtime for this demo. In your own site you choose one at build time with a single stylesheet import:

@import 'svelte-docsmith/theme.css';

See Theming for overriding individual tokens and how dark mode is wired.