Theming

Tailwind first

Every Narro component takes className, and it is merged with the component’s own classes rather than replacing them. For most decks this is the whole theming story:

<Slide className="bg-gradient-to-br from-slate-900 to-blue-950">
  <Heading level={1} className="text-blue-300">Title</Heading>
</Slide>

In markdown, the same thing via the attribute syntax:

# Title {.text-blue-300}

…or class: in slide frontmatter to style the whole slide, or on the deck frontmatter to set a default for every slide.

Themes

@getnarro/marketplace ships themes as design tokens plus optional layout overrides:

narro themes          # browse and apply

---
theme: corporate-dark
---

Built-in themes: corporate-dark, creative-gradient, minimalist-light. Colour schemes: ocean-blue, sunset-warm.

A theme can also supply layouts. Layout names resolve most-specific-first — the deck’s own layouts/ directory, then the theme, then the built-ins — so overriding one layout never means forking the others.

Fonts

import { applyFontPreset } from "@getnarro/core";

applyFontPreset("inter");

Presets: system, inter, roboto, openSans, lato, montserrat, poppins, raleway, sourceSerif, playfairDisplay, merriweather, jetBrainsMono.

Or set them directly on the presentation:

<Presentation
  theme={{
    fontHeading: '"Inter", sans-serif',
    fontBody: '"Inter", sans-serif',
    fontMono: '"JetBrains Mono", monospace',
  }}
>

Presets load from Google Fonts. If the room’s network is unreliable, system never fails — and a deck rendered in a fallback font is worse than one that never asked for a webfont.

Design tokens

Themes expose Tailwind v4 @theme tokens, so custom colours are available as utilities:

@theme {
  --color-brand-500: #6366f1;
}

# Title {.text-brand-500}

Practical advice

Two font sizes and two colours will carry an entire deck. Contrast that reads on your laptop often disappears on a washed-out projector, so err darker on light backgrounds and lighter on dark ones. And whatever you pick, apply it on the deck frontmatter rather than per slide — it is the difference between changing one line later and changing forty.