Themes shape the planets as well as their colors: shading, rims, a shadow or a glow, a halo around the sun, the orbits and the lettering. Every map here is live: fly into a planet or flick an orbit.
-
-
-
-
-
Cosmos
cosmosJewel-toned planets around a golden star, in a field of stars.
Try it in the playground → -
-
-
-
-
-
Material
materialMaterial 3's tonal containers, or any color with materialTheme().
Try it in the playground → -
-
-
-
Your color
materialTheme('#0b57d0')Material 3 builds a whole theme from a single color, light or dark. Pick one.
Make it yours
Start from any of them and change what you like: in your stylesheet, in a theme object, or from a single color.
Every value a theme sets is a custom property. Set them on the map, or anywhere above it, and they win over the theme.
.roadmap {
--orbit-color-root: #ffd166;
--orbit-color-1: #ef476f;
--orbit-color-2: #06d6a0;
--orbit-color-3: #118ab2;
--orbit-ring-dash: none;
--orbit-node-shadow-tint: 100%;
}Start from a theme and change any of its values by name, for one map.
createOrbitMap(element, markdown, {
theme: {
preset: 'night',
tokens: { surface: '#0b1020', 'ring-dash': 'none' },
},
palette: ['#ffd166', '#ef476f', '#06d6a0', '#118ab2'],
});Material 3 builds a whole theme, light or dark, from any color.
import { createOrbitMap, materialTheme } from '@restless-dreams/orbit';
createOrbitMap(element, markdown, { theme: materialTheme('#0B57D0') });Register a theme once and use its name anywhere: in options, in frontmatter, and on <orbit-map>.
import { materialTheme, registerTheme } from '@restless-dreams/orbit';
registerTheme('brand', materialTheme('#E11D48', { dark: true }));