--- title: Theme gallery description: Every built-in Deckard theme, previewed as a real slide canvas painted by that theme's own stylesheet, switchable between light and dark. sidebar: label: Theme gallery icon: swatch-book order: 3 --- 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//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: ```ts deck/deck.ts import { meridian } from "@thebuilder/deckard-themes" ``` Or switch an existing deck with `deckard add theme meridian`. See the [themes guide](/guides/themes) 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.