# Theming

> Themes, colour schemes, fonts, and per-deck styling

## 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:

```tsx
<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:

```markdown
# 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:

```bash
narro themes          # browse and apply
```

```markdown
---
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

```tsx
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:

```tsx
<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:

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

```markdown
# 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.