Themes

All ten built-in themes rendered with the same fixture. Use any name as the theme option in renderMarkdown.

default

Clean white — the baseline theme.

const pages = await renderMarkdown(markdown)
// or explicitly:
const pages = await renderMarkdown(markdown, { theme: 'default' })

github

GitHub Primer — crisp white with GitHub's blue links and green checkboxes.

const pages = await renderMarkdown(markdown, { theme: 'github' })

solarized

Ethan Schoonover's Solarized Light — warm cream background, carefully balanced muted tones.

const pages = await renderMarkdown(markdown, { theme: 'solarized' })

sepia

Warm aged-paper amber tones with dark-brown ink.

const pages = await renderMarkdown(markdown, { theme: 'sepia' })

rose

Soft blush and petal-pink with a subtle top-to-bottom gradient.

const pages = await renderMarkdown(markdown, { theme: 'rose' })

dark

Catppuccin Mocha — rich purple-navy with pastel accents.

const pages = await renderMarkdown(markdown, { theme: 'dark' })

nord

Nord — arctic cool blues, cold and serene.

const pages = await renderMarkdown(markdown, { theme: 'nord' })

dracula

Dracula — near-black background with vivid purple / cyan / green accents and a subtle dark-purple gradient.

const pages = await renderMarkdown(markdown, { theme: 'dracula' })

ocean

Deep ocean — midnight navy with aqua accents and a radial centre-glow.

const pages = await renderMarkdown(markdown, { theme: 'ocean' })

forest

Dark forest — deep canopy greens with sage text and bright leaf-green accents.

const pages = await renderMarkdown(markdown, { theme: 'forest' })

---

Custom Colors

Override individual color tokens by passing a ThemeOverrides object. Unspecified tokens fall back to defaultTheme.

const pages = await renderMarkdown(markdown, {
  theme: {
    colors: {
      background: '#1a1a2e',
      text: '#e0e0ff',
      link: '#a78bfa',
      codeBackground: '#16163a',
      quoteBackground: '#12122e',
      quoteBorder: '#a78bfa',
      // …other tokens
    },
  },
})

Gradient Background

Set colors.backgroundGradient to use a linear or radial gradient fill.

import { mergeTheme, defaultTheme } from 'marknative'

const theme = mergeTheme(defaultTheme, {
  colors: {
    background: '#0f0c29',
    backgroundGradient: {
      type: 'linear',
      angle: 135,
      stops: [
        { offset: 0,   color: '#24243e' },
        { offset: 0.5, color: '#302b63' },
        { offset: 1,   color: '#0f0c29' },
      ],
    },
    text: '#e8e0ff',
    link: '#c084fc',
    // …other tokens
  },
})

const pages = await renderMarkdown(markdown, { theme })