Theme editor

Start from any theme, adjust every color, and watch this page change as you go. Nothing is saved until you click Save and use.

Surfaces, sidebar and text

Backgrounds, cards, and text. Contrast is measured against the surface each color usually sits on.

Accents and status

Use color sparingly: accent for controls and links, secondary accent for informational highlights, and the three status colors for their meaning only.

Flight mode badges

One color per flight mode. These appear as small badges in lists and on flight pages.

Chart series

Series 1–8 are used by the flight page in the order shown. Comparison charts use them in order for each flight. Keep neighbors far apart in hue and brightness; the checks on the right update as you edit.

Use line styles (dashes) to tell series apart Stroke width Area fill opacity

Chart chrome

Grid, axis labels, tooltips, and helper lines. Grid and helper lines are usually translucent.

Import / export

Copy the JSON to share a theme with another tester, or paste one here and click Import.

Preview

This whole page is already using your theme. Here is a compact sample of the pieces that matter most.

My FlightsComparisonsGroupsSettings

Saturday launch · 1,204 ft

Estes Alpha III · C6-5 · 12 Aug 2026

SyncedTrialFailed

PrimarySecondary

Simulate:

Checks

Contrast follows WCAG 2 (AA ≥ 4.5, AAA ≥ 7). Series separation is CIEDE2000; we aim for ≥ 18 between neighbors and ≥ 10 under color-vision simulation.