MulmoTerminal Theme Builder
Create custom color schemes for MulmoTerminal terminals and save them to your config.
Installation
- Make sure Claude is on your device and in your terminal.
Skills load from
~/.claude/skills/when Claude Code starts up β so you need it on your machine first. If you don't have it yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into Claude Code or into your terminal.
This copies the whole skill folder into
~/.claude/skills/mulmoterminal-theme-receptron/β the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.Faster alternative (instruction-only skills)
Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates β they won't be downloaded and the skill will fail when it tries to load them.
Quick install (SKILL.md only)Sign up to copy - Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from
~/.claude/skills/). New skills are picked up on startup. - Just ask Claude.
Skills auto-activate when your request matches the skill's description β no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the βWhat this skill doesβ section above.
Prefer to read the source first? Open on GitHub.
When Claude uses it
Build a colour scheme of your own for MulmoTerminal β one that joins Midnight, Nord, Daylight and Solarized in Settings' theme picker and can then be pinned per project. Writes `themes` in `~/.mulmoterminal/config.json`, the whole-app palette (panels, borders, accent, text), which has no UI for creating one β Settings only lets you pick from what exists. Use when the user wants their own theme, a dark/light variant that isn't shipped, a scheme drawn from a painting, a photo or a brand's colours, or says the built-in themes are too dark, too blue, too low-contrast. For colouring ONE project's cell (its badge and header), or assigning an existing theme to a directory, use mulmoterminal-dirs instead.
What this skill does
Make a colour scheme of your own
themes in ~/.mulmoterminal/config.json defines schemes that appear in Settings' picker next to
the four built-ins, and that a project can then name in its .mulmoterminal.json theme key.
Settings can choose a theme; nothing in the app can create one. This skill is that path.
This is the whole app's palette β panel backgrounds, borders, accent, text. A single project's
badge and header colours are a different thing (mulmoterminal-dirs).
How to run this
1. Find out what they're going after
Ask for the direction first, with concrete options rather than "what colours?":
- From something that exists β a painting, a photo, a brand, an editor theme they like. This is the easiest to do well: take 5β8 colours off the source and assign them to roles.
- A variant of a built-in β "Nord but warmer", "Daylight with more contrast". Use
extendsand write only the keys that differ. - Light or dark, if it isn't already obvious. It decides every value below.
2. Decide extends β and know what it costs
{ "id": "arles", "label": "Van Gogh (Arles)", "extends": "daylight", "colors": { "--accent": "#c8971e" } }
- With
extends,colorsis a diff over that built-in (midnight/nord/daylight/solarized). Anything you leave out is inherited. Start here β it is far easier to get right, and a three-key diff is a real theme. - Without
extends, the theme must set every one of the 20 keys below. This is enforced when the config is saved, not when the theme is painted: an incomplete theme with no base is rejected outright rather than half-applied, because the missing half would inherit whatever the previous theme left on the element.
3. Write the colours
Assign the source's colours to roles, then say what each one is doing before you write it. Rules that matter more than taste:
--texton--bg-baseand--bg-panelmust stay readable. Check the WCAG contrast ratio: gamma-decode each channel (c/255, thenc<=0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4), weight0.2126 R + 0.7152 G + 0.0722 B, ratio(lighter+0.05)/(darker+0.05). Aim for 4.5:1 or better for--text, and don't let--text-mutedfall below 3:1 β a beautiful palette that can't be read is the usual way this goes wrong.--on-accentgoes on--accent-bg, not on the page. Check it against that, and nothing else.- A painting's colours are rarely usable raw. Backgrounds want the muted, desaturated end of the source; the accent wants its most saturated note. Taking six vivid colours and putting them in six roles produces something unusable at 12px.
4. Write, then look
themes is a partial POST /api/config merge β write only themes, so the user's other
settings survive. Send the whole array, existing entries included: it replaces, it does not
append, and a lone new entry silently deletes the rest.
Then: reload the tab, open Settings, and pick the theme. It does not appear until the page re-reads the config. If the file was hand-edited while the server was running, the server needs a restart too.
Ask what to change and adjust. The picker is the real preview β apply and look, rather than describing.
5. Offer to pin it, if that's what they meant
A theme is global. If the user wanted "this project in my new scheme", the second half is
"theme": "<id>" in that project's .mulmoterminal.json β hand off to mulmoterminal-dirs.
Schema
{
"themes": [
{ "id": "arles", "label": "Van Gogh (Arles)", "extends": "daylight", "colors": { "--accent": "#c8971e" } }
]
}
| Field | Rule |
|---|---|
id | Required. Lowercase letter first, then lowercase/digits/dashes, β€ 32 chars (^[a-z][a-z0-9-]{0,31}$). It becomes a data-theme attribute value and is what a project's theme key names. |
label | Required. What the picker shows, β€ 40 chars after trimming. |
extends | Optional: "midnight" / "nord" / "daylight" / "solarized". Omit only if you set all 20 colours. |
colors | Hex only β #rgb / #rgba / #rrggbb / #rrggbbaa. Unknown keys are dropped. |
id must not be a built-in id. midnight, nord, daylight and solarized are refused
rather than merged into β someone reading the guide's description of Midnight has to get Midnight.
The hex shape is doing security work, not tidiness: these values land in CSS custom properties, so
a value that escaped the hex shape would be injected into a style declaration. Never write anything
but a hex literal here β no var(...), no color-mix(...), no named colours.
The 20 keys
| Key | Role |
|---|---|
--bg-base | The page behind everything |
--bg-deep | The deepest surface (terminal background) |
--bg-panel | Panels, modals, the sidebar |
--bg-subtle | A surface a step up from the panel |
--bg-elevated | Cards, popovers, dropdowns |
--bg-input | Text inputs and selects |
--bg-hover | Hover on a row or button |
--bg-selected / --bg-selected-hover | A selected row, and hovering it |
--border | Every divider and outline |
--accent | The accent colour as text/icon |
--accent-bg / --accent-bg-hover | Accent as a filled background, and its hover |
--on-accent | Text on --accent-bg |
--text | Body text |
--text-secondary / --text-muted / --text-dim | Progressively quieter text |
--term-fg | Default terminal foreground |
--term-selection | Selection in the terminal |
When it doesn't take
Work down this list before changing colours:
- The theme isn't in the picker β the tab hasn't been reloaded, or the entry was dropped in validation. Settings names a selected-but-undefined theme explicitly; that message is the tell.
- Nothing changed after picking it β an
extends-less theme missing keys never reached the config at all. Re-read~/.mulmoterminal/config.jsonand see whether the entry is actually there. - The whole array vanished β a partial write. Always send
themescomplete. - One colour ignored β a key outside the 20, or a value that isn't a hex literal.
Related skills
Artifact Theme Toolkit
anthropics
Apply professional color and font themes to slides, docs, and web pages.
Reference UI to Design System
daymade
Extract design systems from UI screenshots and generate implementation-ready design prompts.
UI/UX Pro Max
anthropics
Build production-grade web components and interfaces with distinctive, polished design.
MoAI Design System
modu-ai
Build accessible design systems with tokens, components, and intent-first principles.