Themes

View → Theme switches the palette. The menu tick follows the choice, and the status line names the theme you moved to.

What ships

Dark	Near-black canvas, hues at full strength.
Midnight	Darker still, with the panels at the canvas tone.
Gray	The default. Mid grey with dark ink, square corners, and rules in the text colour.
Light	Near-white, with the hues stepped down to hold up on it.

Every theme comes from themes/runebender.theme.json in runebender-core. The editors read the same file, so a change lands in all of them at once and none of them can drift.

Colour is authored in OKLCH rather than hex. Lightness and chroma mean the same thing at every hue there, so a set of colours reads as one family instead of a pile. A theme names a token, never a colour:

"surfaces": { "canvas": "neutral.15", "outline": "neutral.23" },
"roles":    { "accent": "green.dim", "danger": "red.dim" }

A token is a family and a step. neutral.15 is the grey ramp at 15% lightness. green.dim is the green hue at its dim step.

The blocks of a theme

surfaces	The grounds: app, panel, control, button, buttonHover, field, outline, divider, canvas.
text	primary, secondary, muted, subdued, overlay, glyph.
roles	The meanings: accent, danger, selection, the point types, curvature, kerning. Around thirty.
geometry	Corner radii and rule weights.
markStep, markStyle	How a glyph mark is coloured and drawn.

Every block is optional except the colours. A theme names only what it changes, and the rest falls back to the file’s defaults.

A theme sets its own corners and rule weights, because those carry as much of a look as colour does. The same palette at radius 0 with a 2px rule reads as a drawing tool. At radius 6 with a hairline it reads as a document application.

geometry

radius	The default corner, on small chrome.
radiusControl	Pressable tiles: toolbar tiles, sidebar tabs, toggles.
stroke	The ordinary rule, on panels and chrome.
strokeEmphasis	Rings that mark a thing selected or grabbable.

The tokens are named for what they are used on, not for their size. A theme that disagrees about the sizes still knows what each one is for.

Gray names only the two radii, at 0, and lets both rule weights fall back. Naming part of the geometry is the normal case: it wanted square corners, not heavier rules.

A glyph stores what its mark means, not the colour you see. The colour comes from the theme, so the same font reads correctly in all of them.

How a mark is drawn is also the theme’s choice, and it has to be. Tinting the cell’s rule works where the ground is far from mid lightness. On a mid grey it cannot. A colour saturated enough to read as a hue sits at mid lightness too, and mid on mid is invisible.

markStyle

border	Tint the cell’s rule and label. Dark, Midnight and Light.
fill	Fill the cell with the hue and key it with a rule. Gray, with markOutline and markInk naming the keyline and the label on top.

markStep picks which step of each hue the theme uses. Dark takes base, Gray takes base under a keyline, Light takes deep.

Five decisions explain most of what the file does, and why a theme that ignores them stops looking like one thing.

Author in OKLCH, not hex. Lightness and chroma mean the same thing at every hue there. That is what makes a set of colours read as one family. The palette this replaced ran from L 0.56 to L 0.94 and had three greens nobody had compared.

Give each hue its own pair. A flat ramp holds every hue to the chroma only blue and green want. The result looks washed out. Yellow is light and red is not, so yellow sits at L 0.82 and red at 0.61. Steps are offsets from a hue’s own pair, never absolutes.

One text colour. There is no second, lighter grey for secondary text. Hierarchy comes from rules and fills, not from greying words out. The Gray theme goes further. Its rules are drawn in the text colour, so the borders draw the layout instead of tints doing it.

Shape carries as much as colour. Corners and rule weights are part of a theme, not constants in the frontend. A palette can be right and the thing still look wrong because everything is rounded.

Name a token for its use, not its size. radiusControl tells a frontend what to do with a button. radiusMedium makes it guess. The same goes for strokeEmphasis, which exists because a selection ring is a decision, not arithmetic on another token.

Themes are compiled into the editor. There is no folder to drop a theme into, and no setting that points at one. A theme of your own means editing the token file and building from source.

1. Clone runebender-core and runebender-gpui side by side.
2. Add a block under themes in themes/runebender.theme.json. Copy the theme closest to what you want and change what differs.
3. Add the theme to the editor’s theme list and give it a menu action.
4. Build and switch to it from View → Theme.

The tests in runebender-core check a new theme for the mistakes that are hard to see. A mark that does not clear its background. An emphasis ring lighter than the ordinary rule. A theme in the menu with no action behind it. Run them before trusting a theme you wrote.

No theme editor, no live reload of a theme, no per-font or per-window theme, and no way to load one at runtime. The palette is one file compiled in, which is what keeps the editors from drifting apart.