Themes and layouts

A layout decides where nodes go, and a theme decides how they look. Any layout works with any theme. Set both in the frontmatter:

---
markmap:
  layout: two-sided
  theme: cards
---

Layouts

tree

The default. Children grow to the right of their parent.

# Project
## Plan
- Goals
- Budget
## Build
- Design
- Code

two-sided

The root's first branches go right and the rest go left, split so both sides are about the same size. Folding never moves a branch across.

# Project
## Plan
- Goals
- Budget
## Build
- Design
- Code
## Launch
- Docs
## Review
- Metrics

org-chart

Top-down, for hierarchies. levelGap is the gap between levels.

# Project
## Plan
- Goals
- Budget
## Build
- Design
- Code

Themes

classic

Underlined labels, curved edges and fold circles. Takes color and colorDepth.

# Project
## Plan
- Goals
## Build
- Code

cards

Rounded cards with a scale-in animation. Takes color and colorDepth.

# Project
## Plan
- Goals
## Build
- Code

minimal

Plain text, thin gray edges and fold dots.

# Project
## Plan
- Goals
## Build
- Code

Colors

color sets the branch colors, and one color paints every branch the same. colorDepth makes nodes below a level take their ancestor's color, where the root is level 1.

---
markmap:
  color: ['#2980b9', '#c0392b']
  colorDepth: 2
---

# Project

## Plan

- Goals
  - This year

## Build

- Code
  - Tests

Dark mode

Each theme has a dark set of colors. colorScheme picks light, dark, or auto, which follows the reader's system. The default is light, so a map never turns dark on a light page by surprise. On this website, a map follows the site unless its document says otherwise.

Change colors with CSS

Colors are CSS variables, so a page can override them on the map's element. Exported SVG keeps them too.

markmap-view {
  --mm-link: rebeccapurple;
  --mm-bg: #fffdf5;
}