Themes, presets and scenes

Three levels, each built on the one below.

Level	Answers	Export
Theme	What colours?	`themes`
Preset	What does it look like?	`presets`
Scene	What am I making?	`scenes`

Themes

Nine palettes: atlas, midnight, mono, hologram, neon, blueprint, aurora, noir, political.

import { themes } from "canvas-globe";

themes.midnight.land;   // "#39496b"

Theme keys

Pass a partial object to override any subset; missing keys fall back to atlas.

Key	Type	Used for
`ocean`	`[string, string]`	Gradient stops
`land`	`string`	Landmass fill
`border`	`string`	Country outlines
`graticule`	`string`	Grid lines
`atmosphere`	`string`	Halo outside the sphere
`rim`	`string`	Sphere edge
`marker`	`string`	Default marker colour
`markerGlow`	`string`	Marker halo
`live`	`string`	Pulse rings and pings
`bubble`	`string`	Bubble marker background
`label`	`string`	Text
`stars`	`string`	Starfield
`dot`	`string`	Land dots for `landStyle: "dots"`
`glow`	`string`	Halo for `landStyle: "glow"`
`orbit`	`string`	Orbit rings
`arc`	`string`	Arc base colour
`arcHead`	`string`	Arc comet head
`night`	`string`	Terminator overlay
`cluster`	`string`	Cluster bubble fill
`clusterLabel`	`string`	Cluster count text
`focus`	`string`	Keyboard focus ring
`countryHover`	`string`	Hovered country wash
`shade`	`boolean`	Enables lit-from-upper-left shading

CSS custom properties

theme: "css" reads --geo-* off the canvas, in dash-case:

#globe {
  --geo-land: #334155;
  --geo-ocean-from: #0f172a;
  --geo-ocean-to: #020617;
  --geo-marker-glow: rgba(249, 115, 22, 0.4);
}

theme: "auto" follows prefers-color-scheme.

Presets

A preset bundles a theme with a render style.

Preset	Theme	Land style	Extras
`atlas`	atlas	fill	stars, shading
`midnight`	midnight	fill	stars, shading
`mono`	mono	fill	Not set
`political`	political	fill	`countryColors: "auto"`
`hologram`	hologram	dots	stars
`neon`	neon	glow	stars
`blueprint`	blueprint	outline	3 orbits
`aurora`	aurora	dots	2 orbits, stars
`noir`	noir	outline	Not set
`constellation`	hologram	dots (sparse)	3 orbits, stars

createGlobe(canvas, { preset: "blueprint" });
globe.setPreset("noir");

setPreset resets every key the new preset does not set, so nothing leaks between looks. The keys it owns are theme, landStyle, dotSpacing, dotSize, graticule, stars, shade, orbits and countryColors.

Scenes

A scene is a whole composition: preset plus the layers and overlays a given job needs.

Scene	Built for
`signups`	Live activity on a pricing or landing page
`launch`	A regional announcement, ready for country media
`logos`	"Trusted in N countries" with customer logos
`team`	Where the team is, on a careers page
`coverage`	Campaign or revenue by country, with a legend
`review`	Scroll-linked year in review
`routes`	Traffic between regions

createGlobe(canvas, { scene: "signups" });
globe.setScene("coverage");
globe.setScene("launch", { focus: { country: "IN", isolate: true } });

Scenes also reset cleanly. The keys they own additionally include mode, cluster, tooltip, labels, legend, counter, focus, showViewer and the motion settings.

Precedence

defaults  →  scene  →  scene's preset  →  your preset  →  your options

// Scene sets hologram; your theme wins.
createGlobe(canvas, { scene: "signups", theme: "noir" });

Themes​

Theme keys​

CSS custom properties​

Presets​

Scenes​

Precedence​