Colors
Orbit's stylesheet defines a palette of custom properties: ten hues, each in seven shades. The themes use it, and you can too, or ignore it and use your own colors.
The hues are red, orange, yellow, green, cyan, blue, indigo, purple, pink and gray. Each one comes as --o-{hue} plus six shades mixed from it in OKLab. For cyan:
| Property | Mix |
|---|---|
--o-cyan-white | 95% white |
--o-cyan-lighter | 75% white |
--o-cyan-light | 30% white |
--o-cyan | the hue itself |
--o-cyan-dark | 20% black |
--o-cyan-darker | 40% black |
--o-cyan-black | 78% black |
Below, every shade on an arc: one ring per shade, from -black in the middle to -white outside, and one arc per hue. A few lines of JavaScript write the seventy arcs.
Your own color
--o-color is the eleventh hue, and it is yours. Set it on a system, a ring or a satellite, and --o-color-white to --o-color-black are mixed from it right there. Each ring below sets its own --o-color and the arcs use the same three shades: -lighter, -light and -dark.
Arcs and progress take the shades of their ring. On an <o-arc> itself, --o-color is the color of its text. To change one shade only, set it on the element that uses it.