Skip to content
Monghoul

Make a custom theme

Generate a whole theme from three colours, then adjust the parts you care about, and share it as a file.

Needs Pro, or the 14-day trial Checked against v1.11.0 Updated

There are 11 built-in themes and you can use one and stop reading. Every one of them meets WCAG AA on every surface it paints, which is 4.5:1 for text and 3:1 for non-text indicators such as chart series.

Generate from three colours

The theme editor asking for a brand, background and foreground colour, with a dark or light choice and a Generate Theme button
Fig 01 Themes · Brand, background and foreground go in, and the rest is derived

The editor asks for Brand, Background and Foreground, and derives the rest from them, previewed live across the app including the code editor. That is the whole first step: pick three colours and look at the result.

Background and foreground follow the brand colour until you set them by hand. The light or dark choice starts from the system appearance, and switching it re-derives both.

Chart series are guaranteed distinguishable from one another within the generated theme, so a stacked chart stays readable rather than turning into two similar greens.

Then adjust what matters

The theme editor after generating: a name, the app and editor fonts and sizes, and the Core colour group with its primary, secondary, accent, background and foreground swatches, over an application already repainted in the new colours
Fig 02 Themes · Every group is editable, and the whole app previews as you change it Pro

A custom theme covers more than the window chrome:

  • App colours, and the semantic and interaction states
  • The MongoDB type colours, which are the badges on ObjectId, Date, Decimal128 and the rest
  • Typography
  • Monaco editor syntax token rules
  • Result view and index badge colours

The type colours are the ones worth spending time on if you read a lot of documents. They are how you tell a Long from an Int32 at a glance in a tree view.

Share it

Export the theme as a JSON file and import it elsewhere. This is how a team ends up on the same colours without anyone reconstructing them.

Changes apply instantly

No restart. That is also true of switching between built-ins, so trying all 11 costs nothing.

Next