@kadal/theme-swiss

Build it. Rehearse it. Own the room. Kadal Deck has your back for the whole talk, from the first idea to the last applause. A theme is how your talk looks on the day, on the projector and on every phone in the room.

Take the tour · Docs

Swiss, a theme for Kadal Deck. The International Typographic Style for design talks. Huge Inter Tight headings set tight and flush left on a twelve-column grid, heavy black rules, and one signal colour used sparingly. Facts, statements and quotes sit flush left, not centred; a section is the signal colour edge to edge; a running header carries the deck's title, the current section and the page.

All 17 themes · Themes and backgrounds · Writing a theme · Source

Use it

@kadal/deck ships this theme, so theme: swiss works with nothing else installed. Install the package only to give the deck a copy of its own, at a version you pick:

npm install @kadal/theme-swiss

---
theme: swiss
themeConfig:            # all optional
  header: true
  signal: "#d70017"
  signalDark: "#ff3b2f"
---

The deck plugin brings the stylesheet and the module in; nothing to import. The prebuilt shell (the hosted builder, published decks) bundles this theme already. Schemes: light and dark. Fonts: Inter Tight (headings), Inter (text), JetBrains Mono (code), loaded through the theme's config.fonts. Code colours: Shiki's min-light / vesper. Every deck's theme menu (T) offers it already; list it (themes: [swiss, minimal]) to put it near the top, load its stylesheet with the deck, and give code its own colours when it is picked.

themeConfig

Every key arrives on the deck root as a CSS variable (accentDark → --theme-accent-dark); the theme reads them with fallbacks, so set only what you change.

| key | type | default | what it does | | --- | --- | --- | --- | | header | boolean | true | The running header on content slides. false turns it off; header: false in a slide's frontmatter hides it on that slide. | | signal | colour | #d70017 | The one colour (light scheme), and the section slides' ground. | | signalDark | colour | #ff3b2f | The signal on the dark page. Without it, a set signal is lifted towards white. |

Layouts

Every built-in layout is styled (default, center, cover, intro, section, end, fact, quote, statement, full, two-cols, two-cols-header, image, image-left, image-right, iframe, iframe-left, iframe-right), and the theme adds:

| layout | what | | --- | --- | | poster | One word or number as large as the slide allows (size: 15em, signal: true for the signal colour); ::meta:: is small print in the top right. | | index | The slide's list as a grid of numbered cells (columns:, default 3). A bold opening is the cell's title. | | grid | A header across, then each named slot a column under a heavy rule; the columns follow the number of slots (2 to 5), or columns:. |

Components

| component | what | | --- | --- | | <Rule label right signal /> | A heavy rule with a label on the left and one on the right; signal colours it. |

Preview

preview/deck.mdx walks through every layout and component (theme: ../). In this repository:

bun run --filter @kadal/theme-swiss dev       # the preview deck, live
node tools/theme-shots.mjs swiss               # screenshots in light and dark, contrast and overflow checks

Accessibility and print

Body and muted text meet WCAG AA (4.5:1) on the page and on cards in every scheme the theme draws (checked by tools/theme-shots.mjs). Anything that moves stands still under prefers-reduced-motion and on a still copy; printed pages and exports drop shadows and glows.

Licence

AGPL-3.0-or-later, like the engine (see LICENSE); a commercial licence is available — see LICENSING.