Ferrum
Sign in Create account
Menu

Make a theme

Every colour a Ferrum window paints, in one place, measured against the same floors the editor measures. Change one and the window below repaints.

This is the raw control surface. The guided version — pick a background, pick one loud colour, and have the other fifty solved for you — is not built yet. The solver behind it is: an editor from 0.1.0-beta.16 fills in every colour a theme does not name, so the fifty-four here are the long way round rather than the only way.

Getting one into your editor works. Copy the code and paste it in Settings, or save the .toml into the themes folder. Both ask before anything changes, and a theme you keep becomes an ordinary file you can edit or delete.

Start from

Colours are exact; type rendering is your browser's. Click any region to find out what it is called.

54 of 54 clear the floors the editor measures

Which is what the built-ins clear, and the bar their own test holds them to.

4 slots are short of the same floor on the surface.3 pressed fill, which nothing in the editor measures and the renderer draws glyphs on. Solved for by a derived theme; not a finding here.

Surfaces

The grounds everything else is measured against. Text is held to 4.5:1 on the first three and 3:1 on the selection; the pressed tier is measured by nothing.

surface.0 canvas — the editor background
  • a ground, not ink
surface.1 panel — sidebar, activity bar, terminal
  • a ground, not ink
surface.2 raised — hover rows, active tab, input wells
  • a ground, not ink
surface.3 pressed
  • a ground, not ink
selection the text selection fill
  • a ground, not ink

Text

Held to 4.5:1 on every fixed surface, comments included — which is the answer to the complaint people make out loud about light themes.

text text · 4.5:1
  • selection 8.68
text.muted text · 4.5:1
  • selection 4.49
text.subtle text · 4.5:1
  • selection 3.11

Accent

The accent marks interface state and is deliberately absent from the syntax table. The strong pair is a fill and its label: one hue cannot be light enough to read on the canvas and dark enough to sit under white.

accent text · 4.5:1
  • selection 3.10
on-accent text on accent · 4.5:1
  • accent 5.76
accent.strong hairline · exempt
  • pressed 2.76
  • measured, never checked
on-accent.strong text on accent.strong · 4.5:1
  • accent.strong 5.08
cursor stateful line · 3:1
  • raised 4.94

Lines

A hairline is decoration and is exempt on purpose; a stateful line carries meaning and owes 3:1. The theme does not get to decide which is which.

border hairline · exempt
  • pressed 1.04
  • measured, never checked
border.strong stateful line · 3:1
  • raised 3.53

Diagnostics and diff

Derived from ANSI red, green and yellow in a generated theme, because a ported theme almost always carries a terminal palette.

warn text · 4.5:1
  • selection 4.60
error text · 4.5:1
  • selection 3.68
added text · 4.5:1
  • selection 4.66
removed text · 4.5:1
  • selection 3.68
modified text · 4.5:1
  • selection 4.60

Syntax

Eighteen highlights over as few or as many colours as you like: both shipped themes use nine, because a keyword and a label reading the same is a choice rather than a shortfall.

syntax.attribute text · 4.5:1
  • selection 4.60
syntax.comment text · 4.5:1
  • selection 3.11
syntax.constant text · 4.5:1
  • selection 5.95
syntax.constructor text · 4.5:1
  • selection 5.07
syntax.doc text · 4.5:1
  • selection 8.68
syntax.escape text · 4.5:1
  • selection 4.60
syntax.function text · 4.5:1
  • selection 3.98
syntax.keyword text · 4.5:1
  • selection 4.45
syntax.label text · 4.5:1
  • selection 4.45
syntax.namespace text · 4.5:1
  • selection 5.07
syntax.number text · 4.5:1
  • selection 5.95
syntax.operator text · 4.5:1
  • selection 4.49
syntax.parameter text · 4.5:1
  • selection 8.68
syntax.property text · 4.5:1
  • selection 8.68
syntax.punctuation text · 4.5:1
  • selection 4.49
syntax.string text · 4.5:1
  • selection 4.66
syntax.type text · 4.5:1
  • selection 5.07
syntax.variable text · 4.5:1
  • selection 8.68

Terminal

Sixteen slots in the standard order. Bright means further from the background, so on a light theme bright is darker. Slot 0 is a ground and is never checked as text.

black terminal · slot 0
  • pressed 1.10
  • measured, never checked
red terminal · slot 1
  • selection 3.68
green terminal · slot 2
  • selection 4.66
yellow terminal · slot 3
  • selection 4.55
blue terminal · slot 4
  • selection 3.98
magenta terminal · slot 5
  • selection 4.40
cyan terminal · slot 6
  • selection 5.07
white terminal · slot 7
  • selection 4.49
bright-black terminal · slot 8
  • selection 3.11
bright-red terminal · slot 9
  • selection 4.73
bright-green terminal · slot 10
  • selection 6.06
bright-yellow terminal · slot 11
  • selection 5.95
bright-blue terminal · slot 12
  • selection 5.27
bright-magenta terminal · slot 13
  • selection 5.75
bright-cyan terminal · slot 14
  • selection 6.55
bright-white terminal · slot 15
  • selection 8.68

The file

The native format, complete: all fifty-four slots, lowercase six-digit hex, in the order a serialised theme writes them. Dropped into the editor's themes folder it is picked by its file name in Settings, [styles] included.

The name is the seed's, standing in. A theme is named exactly once, at the moment it is saved, and the name never travels beside the colours — which is what keeps every path into the editor free of a string somebody else chose.

name = "Ferrum Dark"
appearance = "dark"

[roles]
"surface.0" = "#151211"
"surface.1" = "#1b1918"
"surface.2" = "#242120"
"surface.3" = "#2e2b2a"
selection = "#5b3a30"
text = "#f4edeb"
"text.muted" = "#b3acaa"
"text.subtle" = "#948e8c"
accent = "#d67454"
on-accent = "#151211"
"accent.strong" = "#b05333"
"on-accent.strong" = "#ffffff"
cursor = "#d67454"
border = "#312e2b"
"border.strong" = "#7b7573"
warn = "#e0a458"
error = "#f2777a"
added = "#6bc46d"
removed = "#f2777a"
modified = "#e0a458"
"syntax.attribute" = "#e0a458"
"syntax.comment" = "#948e8c"
"syntax.constant" = "#eec07a"
"syntax.constructor" = "#5bc8cf"
"syntax.doc" = "#f4edeb"
"syntax.escape" = "#e0a458"
"syntax.function" = "#7aa2f7"
"syntax.keyword" = "#ec93a8"
"syntax.label" = "#ec93a8"
"syntax.namespace" = "#5bc8cf"
"syntax.number" = "#eec07a"
"syntax.operator" = "#b3acaa"
"syntax.parameter" = "#f4edeb"
"syntax.property" = "#f4edeb"
"syntax.punctuation" = "#b3acaa"
"syntax.string" = "#6bc46d"
"syntax.type" = "#5bc8cf"
"syntax.variable" = "#f4edeb"

[terminal]
ansi = [
  "#343230", "#f2777a", "#6bc46d", "#d8a657",
  "#7aa2f7", "#e58fd3", "#5bc8cf", "#b3acaa",
  "#948e8c", "#ff9490", "#89dc8b", "#eec07a",
  "#9bbcff", "#f0b0e4", "#7fe0e6", "#f4edeb",
]

Give it to somebody else

Everything above is yours and needs no account. Two things are worth handing over: the archive, which is what the marketplace serves and what an editor unpacks, and the listing, which is how a stranger finds it in the first place.

Download the archive

A flat zip holding ferrum-theme.toml and ferrum-dark.json, packed here in the browser. Same bytes either way: this is exactly what publishing uploads.

The colours inside are VS Code JSON, because that is the only theme format the editor reads today — and it finds one only inside a VS Code extension directory, since it has no themes folder of its own yet. The .toml above is the native format and still has no loader at all.

Publish it

A name, one line about it, and a slug. It becomes public, and a version once published cannot be replaced — only followed by a higher one.

This is the first thing here that needs an account, and it is on the next page rather than this one.

Publish this theme