Themes & Colors

The five themes

• HappyMaps, the default. Nine bright slots on black.
• Blueprint, seven muted drafting colors on dark navy.
• Duotone, eight two-color pairs on black, checkerboard by default.
• Dunder Mifflin, ten warm office tones on near-black.
• Bright, ten saturated screen colors on deep blue.

Each theme is a swatch row in the Theme list. Click one and it applies straight away.

HappyMaps is also the baseline. Every other theme layers on top of it, so a theme only carries the colors it wants to change and the rest cascade from HappyMaps.

Editing a theme

Turn on Advanced mode and Appearance gains an Edit theme section. It's collapsed by default. Open it with the chevron.

What you can change there:

• Palette slots. One row per slot, with a color picker per tone. How many tones you get follows the fill pattern: one for solid, two for the duo patterns, three for the trio ones.
• Panel border, the line around each tile.
• Panel text, the text drawn on tiles: coordinate labels, slice labels, and subtle object information.
• Overlay color, the cross, plus and circle shapes drawn on top of screens. One color covers all four.

Edits belong to the theme you're on and clear when you switch themes. An edited theme shows "edited" next to its name in the list, and Reset edits puts it back. They live in your current session.

Saving your own themes and setting one as the team default is (planned). See Studio.

Fill patterns

The fill pattern decides how many tones a screen uses and how they're arranged across its tiles. Seven of them:

• Solid, one tone
• Checkerboard, row stripes, column stripes, two tones
• The same three again, three tones

Set it project-wide under Appearance. That's the default for every screen that hasn't been given its own. Force to all objects clears the per-screen ones and puts everything back on the project setting.

Per screen, open Colors & overlays on the screen's card. Pattern, palette slot, and individual tone colors are all there. A screen carrying any override gets a dot next to that heading.

Overlays

Four shapes can be drawn over a screen: crosspoint, plus, circle, and outer circles. Toggle them project-wide under Appearance, or per screen under Colors & overlays.

The two buttons beside each project-wide toggle apply it to every screen at once, on or off.

How colors resolve

Every color has a fallback chain. HappyMaps checks these in order, first one wins:

1. The screen's own override
2. The palette slot assigned to that screen
3. The theme's top-level value
4. The HappyMaps baseline theme

Palette slots have a primary color and optionally a secondary and tertiary. When the last two are missing, HappyMaps derives them from primary by shifting toward middle grey, so duo and trio patterns still work on a one-color slot.

That's why a theme carrying one or two colors still produces a full-looking map. Everything else cascades.

What a theme is made of

Reference, for when you want to know what a token in the editor actually sets. A theme is a set of named color tokens plus a palette. This is Sunset, written out in full: five palette slots, a dark canvas, and a checkerboard fill.

{
  "id": "sunset",
  "name": "Sunset",
  "schemaVersion": 1,
  "fillStyle": "duo-checkerboard",
  "palette": [
    {"primary": "#ff7a1a", "secondary": "#e85f00", "name": "Ember"},
    {"primary": "#ffd071", "name": "Peach"},
    {"primary": "#ff4d88", "name": "Flamingo"},
    {"primary": "#b44dff", "name": "Dusk"},
    {"primary": "#4d6dff", "name": "Twilight"}
  ],
  "panelBorder": "#2a1f16",
  "panelText": "#2a1f16",
  "infoBoxBorder": "#2a1f16",
  "infoBoxText": "#2a1f16",
  "canvasText": "#f4ede1",
  "canvasBackground": "#12080a",
  "infoBoxBackground": "#f4ede1",
  "overlays": {
    "cross": "#f4ede1",
    "plus": "#f4ede1",
    "circle": "#f4ede1",
    "tripleCircle": "#f4ede1"
  }
}

A machine-readable copy lives at /themes/example.json.

Top-level tokens

All colors are #RRGGBB hex. Every theme also carries an id, a name, and a schemaVersion, currently 1.

Palette slot

Each entry in palette is an object with:

• primary, the main color
• secondary, used by the duo and trio patterns. Derived from primary if missing.
• tertiary, used by the trio patterns. Derived from primary if missing.
• name, the label shown in the slot picker.