Skip to content
Kadal Deck docs

Themes and backgrounds

Themes

Section titled “Themes”

The engine ships three themes — minimal (the default), rla and stack — each in light and dark.

deck.config.ts
export const config = {
  theme: "minimal",
  themes: ["minimal", "rla", "stack"], // what the theme menu offers
  colorScheme: "auto", // auto · light · dark
};
// src/main.tsx — import the CSS of every theme you list
import "@kadal/deck/styles.css";
import "@kadal/deck/themes/minimal.css";
import "@kadal/deck/themes/rla.css";
import "@kadal/deck/themes/stack.css";

T (or the palette button) opens the theme menu on every view — play, presenter and audience — with the deck’s themes and light or dark. Each screen keeps its own choice per deck in the browser, so a viewer who reads better on dark can have dark. D toggles dark and light directly. A slide with a dark background under a light theme takes colorScheme: dark in its frontmatter.

Your own CSS in src/styles.css sits on top: the themes are built from CSS custom properties, so changing a colour is usually one variable.

Slide backgrounds

Section titled “Slide backgrounds”
background: "#0b1724"                                       # a colour
background: "linear-gradient(160deg, #04121f, #073049)"     # a gradient
background: /images/cover.jpg                               # an image (from public/)
background: { image: /images/cover.jpg, size: contain, position: top, opacity: 0.6 }
background: { video: /media/loop.mp4, videoLoop: true }
background: { iframe: "https://example.com", iframeInteractive: true }
background: aurora                                          # a component, by name
background: { component: starfield, count: 400 }            # a component, with props

Or inside a slide: <Background name="topo" />.

Background components

Section titled “Background components”
  • Lively: mesh, aurora, waves, lines, beams, sparkles, starfield, grid, dots, noise, spotlight.
  • Quieter: topo (contours with index lines), glows, graticule, hex, constellation, vignette, rays, stripes, sweep.
  • The map room: globe (a wire globe turning slowly, day and night sides), lattice (a grid zooming into one cell three levels deep), thiessen (drifting seeds under their Voronoi polygons), cells (reports landing on a lattice, rippling, going dark), compass (a rose with its degree ring turning), neatline (a map sheet’s frame with coordinate ticks, north arrow and scale bar), scan (a graticule swept by a satellite pass), track (a GPS trail with a pulsing head), raster (a choropleth of cells classed by a drifting field, with its legend) and plane (a dotted ground plane in oblique projection, with surveyor’s control points).

All of them pause off-slide and hold a still frame under reduced motion. Colours are CSS strings, so rgba() sets their weight.

With a component, color is the component’s stroke and fill (or tint) washes the layer behind it — a soft diagonal gradient of that one colour, strongest top-left, never a flat block:

background: { component: topo, color: "rgba(5,150,105,0.55)", fill: "rgba(5,150,105,0.12)" }

tint: alone does the same on a slide without a component, where plain color: stays flat. A background is laid out at the stage size, however small it is drawn, and a busy pattern behind a dense slide fights the text — behind text-heavy slides, a faint globe or the tint wash alone reads best.

Fonts

Section titled “Fonts”

fonts: ["Inter:wght@400;600"] loads Google Fonts families for the deck.