Theme gallery

Every built-in Deckard theme, previewed as a real slide canvas painted by that theme's own stylesheet, switchable between light and dark.

Each card applies one theme to the same slide in light and dark mode. The previews are [data-slide-canvas] elements with the chrome and progress bar the runtime renders. The stylesheet painting them is packages/themes/src/<name>/theme.css, the same file a deck loads.

Switch a card between light and dark, or enlarge it to take the full row. Every one of them carries both color modes; defaultColorMode decides which one a browser opens on.

Pick one by importing it:

import { meridian } from "@thebuilder/deckard-themes"

Or switch an existing deck with deckard add theme meridian. See the themes guide for ejecting and for writing your own.

meridian

defaultColorMode: "system", both modes. This is the theme a new deck opens in.

The quietest theme here. A near-white blue-gray in light mode and a cool near-black in dark, flat surfaces with a hairline border and softly rounded corners, no shadow in either mode. A white card on a white sheet with no shadow asks a lot of its border. If a deck of yours reads flat rather than calm, that is the thing to put back.

aurora

defaultColorMode: "dark", both modes.

A live field behind the slides that open, break, state, and close a deck. Four background variants paint in a WebGL canvas rather than in CSS: hero and breaker take banded curtains, closing an undulating band, and statement a soft noise wash. Under every canvas the theme paints a gradient of the same three colours, and that gradient is the slide while the runtime loads, on a machine with no WebGL, and after a lost context. Reduced motion, a capture, and the presenter preview each hold the field on one fixed frame, so two screenshots of a slide are the same image.

Dark is home. Light mode carries its own field colours rather than the dark ones lightened, and both sets sit in theme.css beside the rest of the paint. Body copy runs light in Manrope under tightly tracked Space Grotesk display type.

The aurora card in the gallery is showing that painted gradient. The gallery renders slide markup and no runtime, so the card carries the hero variant’s fallback rather than a canvas.

blueprint

defaultColorMode: "dark", both modes.

A drafting sheet. The background variant that carries the theme is grid, which draws a cell pitch and a division pitch over each other from the same corner. Nothing is rounded and nothing is tinted: a section number sits boxed in three strokes of the accent, a card grid is butted together over a field of the line colour so the gutters read as drawn divisions, and an opener’s meta row becomes the title block along the foot of the sheet. Body copy runs a weight under regular in both modes, which is what keeps a slide reading as a drawing rather than as a web page.

ledger

defaultColorMode: "system", both modes.

A bound report. Nothing is rounded and nothing is raised; rules carry the structure a shadow would carry elsewhere. Three families on one slide, each with exactly one job: serif says what the section is, sans argues it, mono numbers it. The accent is oxblood on paper and a warmer rust after dark.

nexus

defaultColorMode: "dark", both modes.

A flight console. Dark is home. Every heading is capitalised with a hair of positive tracking, and h1, h2, and the StatGrid figure carry an accent halo through --slide-halo. The halo is none in light mode, so light mode reads as the printed version of the same document rather than as a second theme.

phosphor

defaultColorMode: "dark", both modes.

A green CRT. One monospace family for every word on the slide, scanlines painted across every background variant, and a phosphor bloom on display headings. It also runs a thinner status bar than the rest, taking --slide-footer-space below the contract default, which hands the space back to the slide. Light mode turns the tube off, for handouts and for printing.

atelier

defaultColorMode: "system", both modes.

A print poster. --slide-rule and --slide-surface-border are both the foreground, so every line on the slide is full-strength ink at the theme’s own 4px measure rather than a tint at one. Headings are Archivo capitals at the heaviest weight the face carries, and the display size runs well past every other theme here. Grid cells and the highlighted table row are flooded with the accent and flip their ink rather than taking a tint. Nothing is rounded and nothing is raised.

cotton

defaultColorMode: "system", both modes.

The other pole from atelier. Body copy is Outfit at weight 300, headings are Bricolage Grotesque with its optical size axis mapped rather than pinned, and the corners are the largest in the gallery. --slide-accent-soft carries the tinted card, the metrics panel and the filled capsule; the accent itself is kept for the breaker, the closing plate and the dots. --slide-surface-shadow is the one lift in the theme, and only data-slide-panel reads it, so a slide raises at most one surface however many blocks it composes.

noir

defaultColorMode: "dark", both modes.

A fashion lookbook. Every rule is one pixel, the opener, the breaker, the statement and the quote all centre their content, and Cormorant Garamond sets the display at weight 300 with the italic kept for the statement and the quotation. There is no monospace family: --slide-font-mono carries the body sans, and tracked capitals up to --slide-track stand where another theme sets mono. Code keeps a monospaced stack of its own so a sample still lines up.

quorum

defaultColorMode: "light", both modes.

A board pack. A short type scale inside a short frame, which is what lets a segment table and a five-figure band sit on one slide without shrinking. Figures and pull quotes are set in a serif and everything else in the sans, so a number being reported reads differently from a number being described. Cards hang off a stroke on their leading edge rather than sitting in a box. background: "accent" inverts the sheet rather than flooding it with the accent, in both colour modes.

About the swatches

Each palette above is read out of the theme’s stylesheet when this page builds: the sheet, the card, the muted surface, the border, the accent, and the text. A theme is a hundred-odd declarations and its own THEME.md explaining them, so this is a small slice. The preview shows you what the theme looks like; the swatches tell you what to type when you want that green.