Galvanised, Gaffer and Grit: A VS Code Theme Sampled from the British Workshop

A good editor theme is less about showing off a palette than getting out of the way. That is why the British workshop is such a useful starting point: it is full of colours that were chosen for visibility, durability and cheapness, not for a mood board. Galvanised steel, creosoted timber, terracotta, masking tape and safety orange all have to work in grim light and at a glance. In 2026, that is still a decent brief for a VS Code theme.

This is not a hunt for the prettiest hex codes. It is a practical route from real objects to a theme you can actually use, with light and dark variants that survive a full day of coding.

Sample the bench, not the inspiration board

Start with objects you can photograph in daylight. A phone camera is fine, but turn off auto HDR and avoid shooting in direct sun. Put a grey card or a piece of neutral card in the frame so you have a reference for white balance. Take more samples than you need: the flat face of a galvanised bracket, the shadowed side of a terracotta pot, the dusty blue of sugar paper, a strip of gaffer tape, the orange shell of a safety knife.

Sample midtones rather than highlights. A blown-out highlight on galvanised steel tells you almost nothing about how that colour will behave as a background or a border. Note where each swatch came from. A colour called workshop orange is useless six weeks later; safety-knife orange with a note about the plastic casing is something you can revisit.

Once you have a set of hex values, convert them to OKLCH. You do not need a full colour-science setup. A browser devtools snippet, a small Node script or an online converter will do. OKLCH gives you lightness, chroma and hue in a form you can reason about. That matters because a theme is mostly a set of relationships: background to foreground, comment to code, accent to warning. Hex values hide those relationships.

Give every swatch a job

A workshop palette becomes a theme when you stop thinking in objects and start thinking in roles. The obvious roles are background, surface, body text, muted text, keyword, string, function, variable, punctuation, error and warning. You will probably need a few more for the terminal and source control decorations, but start small.

Keep the hue families tight. Safety orange can carry keywords, but it should not also carry warnings, errors and the activity bar badge. Sugar paper blue can work for strings if you keep the chroma low; it is a paper colour, not a neon sign. Galvanised steel is a good function colour because it is neutral with a slight cool cast. Terracotta can handle variables, but test it against your background before you commit. Creosote gives you a dark brown-black that is softer than pure black, and masking tape gives you a cream for light-mode surfaces that is warmer than white.

For a dark variant, try a background around oklch(18% 0.015 70), body text near oklch(88% 0.02 80) and comments around oklch(58% 0.02 80). A safety-orange keyword might sit near oklch(68% 0.17 45); a sugar-paper string near oklch(72% 0.08 230). For the light variant, a sugar-paper background near oklch(94% 0.03 85) with a creosote text colour near oklch(25% 0.02 70) is a reasonable start. These are starting points, not commandments. The point is to adjust lightness and chroma deliberately rather than nudging hex values until they look nice in a screenshot.

Map tokens without turning the editor into a paint chart

VS Code themes live in a JSON file with colors, tokenColors and, if you use it, semanticTokenColors. The colors section handles the workbench: editor background, foreground, selections, line numbers, panels and terminal ANSI colours. The token sections handle syntax. It is tempting to colour every scope differently. Resist that. A theme with eleven accent hues is a theme that makes you hunt for the actual code.

Aim for five to seven hue families across the whole theme. Let punctuation and operators sit close to the foreground colour. Let comments recede. Let strings and keywords carry the strongest chroma, because they are the tokens you scan for most often. Functions and variables can be quieter. Errors and warnings should be distinct, but they do not need to be the loudest thing on screen; they need to be findable when they appear.

Semantic highlighting is worth enabling. It lets VS Code colour based on meaning rather than just TextMate scopes, which is especially useful in TypeScript, Rust and modern CSS. Test the theme with semantic tokens on and off. If it only works in one mode, it is not finished.

Test contrast in both variants

Contrast testing is where workshop palettes either earn their keep or fall apart. Use WCAG 2.2 contrast ratios as a baseline: 4.5:1 for normal body text and 3:1 for large text and graphical objects. For syntax tokens, aim for 4.5:1 against the editor background where you can. Comments are the usual offender. A dusty grey comment can look tasteful and still be illegible on a laptop screen at 60% brightness.

Test with real files, not a swatch grid. Open a CSS file with nested selectors, a JavaScript file with template literals, a Python file with docstrings and a Markdown file with links and code fences. Check the terminal colours, the diff view, the find widget and the source control decorations. Then run a colour-blindness simulation. Safety orange and terracotta can collapse into each other for some viewers; so can sugar paper blue and galvanised grey if the lightness values are too close.

Finally, use the theme for a long session. Pure white text on a pure black background is fine for a demo and tiring for a day. Lower the chroma of large background areas, keep the brightest colours for small tokens, and make sure the light variant is not just the dark variant inverted. Both variants should feel like they came from the same workshop.

Ship it with a checklist

Package the theme with a package.json, a readable name and a short description that says what it is for. Include a README with a screenshot, but do not trust the screenshot as your only test. Use VS Code's theme generator to get a starting file if you like, then edit the JSON by hand. Keep the file in source control. Run vsce package and install the VSIX locally before you publish anything.

The workshop palette is not a gimmick. It is a constraint that forces you to think about visibility, hierarchy and endurance. Galvanised steel, gaffer tape and safety orange have been solving those problems for decades. Your editor theme can borrow the lesson without pretending to be a hardware catalogue.