No account · Nothing uploaded · Just colors

Build the editor theme you actually want to look at.

themephile is a free, open-source theme editor for code. Tune all 48 syntax roles against live previews of VS Code, Neovim, Vim, Emacs, and a terminal, then copy a finished config for your editor, your terminal, or tmux. No account, nothing uploaded — it all runs in your browser.

Open the theme editortmux studio
use-theme.tsx — themephile
use-theme.tsx
theme.ts ●
src › use-theme.tsx › useTheme
import { useMemo, useState } from "react";
import { oklch, type Palette } from "@/lib/color";
const DEFAULT_HUE = 268;
const SCHEMES = ["spectrum", "analogous", "triadic"] as const;
export interface ThemeOptions {
hue: number;
chroma?: number;
appearance: "dark" | "light";
}
/**
* Derive a full palette from a single hue.
* Returns memoized swatches — never recomputes on hover.
*/
export function useTheme({ hue = DEFAULT_HUE, appearance }: ThemeOptions) {
const [scheme, setScheme] = useState<(typeof SCHEMES)[number]>("spectrum");
const isDark = appearance === "dark";
const palette = useMemo<Palette>(() => {
return oklch.spread(hue, 8, scheme).map((h, i) => ({
hex: oklch.toHex({ l: isDark ? 0.79 : 0.52, c: 0.13, h }),
label: `slot-${i}`, // e.g. "slot-3"
}));
}, [hue, scheme, isDark]);
return (
<section className="grid" data-appearance={appearance}>
{palette.map(({ hex, label }) => (
<button key={label} style={{ background: hex }} onClick={() => setScheme("triadic")}>
<span className="mono">{hex}</span>
</button>
))}
</section>
);
}
⧉⑂ main*⊗ 2⚠ 5Ln 9, Col 12 · Spaces: 2 · UTF-8 · LF · TypeScript
Nocturne

What is themephile?

themephile is a free, open-source theme editor for code, released under the MIT license. It’s for developers who’d rather build their own colorscheme than install someone else’s — and it runs entirely in your browser, with no account, no backend, and nothing uploaded.

Start from one of 8 presets, then tune all 48 color roles — editor chrome, 16 syntax roles, 4 diagnostics, and the ANSI 16 — against live previews of VS Code, Neovim, Vim, Emacs, and a terminal, each drawn as the real program. Every token in the preview is clickable: you change a color by clicking the thing you want to change.

Export writes a finished config with install steps — a VS Code extension, a Neovim Lua colorscheme, a Vim colorscheme with cterm fallbacks, an Emacs deftheme, terminal configs for Alacritty, kitty, Ghostty, WezTerm, and Windows Terminal, or raw JSON. The tmux studio writes a complete .tmux.conf.

Which tool do you need?

Theme editor

Preview as VS Code, Neovim, Vim, Emacs, or a terminal — each drawn as the real program. Six languages, 48 editable roles, ten export targets.

Open editor →

tmux studio

Drag your status bar into shape — segments, powerline separators, pane borders, prefix key — and watch a live terminal redraw as you go. Out comes a complete .tmux.conf.

Open tmux studio →
themephile·
1:editor2:server3:logs
themephileapollo14:32

What does themephile export?

  • VS Code
  • Neovim
  • Vim
  • Emacs
  • Alacritty
  • kitty
  • Ghostty
  • WezTerm
  • Windows Terminal
  • JSON

Not a color list — a real config. Workbench chrome and semantic tokens for VS Code, treesitter and LSP groups for Neovim, cterm fallbacks for Vim, font-lock and org faces for Emacs, with install steps for each.

What you get

01

Five previews, one theme

VS Code, Neovim, Vim, Emacs, and a terminal — each drawn as itself, down to Neovim's sign column, Vim's ~ filler, and Emacs' boxed modeline. Judge the theme where you'll actually read it.

02

Click the code, not a list

Every token in the preview is a hit target — and so is every piece of chrome. Click a keyword, change the keyword color. Selecting a role lights up everywhere it appears.

03

Colors that behave

Palettes are generated in OKLCh, so “a bit lighter” means the same thing on yellow as on blue. Shuffle gives you a coherent theme, not confetti.

04

Contrast you can defend

Live WCAG ratios for every role against the canvas, and one button that lifts the failing ones without touching their hue.

05

Nothing leaves the tab

No account, no upload, no analytics. Your theme lives in the URL fragment and in local storage — share a link and the whole palette rides along.

06

Real configs, not color lists

Workbench chrome and semantic tokens for VS Code, treesitter and LSP groups for Neovim, cterm fallbacks for Vim, font-lock and org faces for Emacs — each with install steps.

How it's built

Checked against the real programs

The generated configs aren't just eyeballed in a preview. The Emacs theme has to load under emacs --batch, the Vim colorscheme has to source under vim -es -u NONE, and every exported .tmux.conf has to boot a real tmux server without errors.

What it doesn't do

There is no sign-up, no upload, no analytics, and no server to send a theme to — the palette generator, the highlighter, and all 10 exporters are code that runs in your tab. The whole thing is open source under the MIT license, so you can check that for yourself.

Your editor, in your colors, in about five minutes.

Start with a presetConfigure tmux