From VS Code Theme to Codex Theme: How to Port Your Aesthetic

Why the two formats are not the same

VS Code themes are JSON with a long list of workbench and token colors. Codex themes describe the same ideas with a much smaller key set, because Codex has fewer distinct surfaces to style.

That means a port is a translation, not a copy. You keep the palette and the intent, and you rebuild the mapping.

What maps cleanly

• Background and foreground. These transfer almost directly and set the tone for everything else.
• Editor selection and current-line highlight. Same role in both, so the color you tuned still works.
• The main syntax hues: keyword, string, comment, number, function. Codex groups some of these, so collapse the ones you barely distinguished.

What you have to redo

• Sidebar and panel tones. Codex uses fewer chrome surfaces, so a five-step grey ramp becomes two or three.
• Borders and dividers. VS Code lets you style them separately; Codex usually derives them from the background.
• Semantic highlighting. If your VS Code theme depends on a language server, that layer cannot be exported at all.

The four-step port

• Export the VS Code theme to .tmTheme if it is not already in that format. Most theme packages ship both.
• Import it into Codex Skin Studio and let the mapper fill the shared keys.
• Fix the collapsed keys. This is where the port stops looking like your old theme and starts looking like a new one.
• Check contrast on the surfaces you use most, not on the ones the preview highlights.

When a port is not worth it

If your VS Code theme was built around an extension you rely on, the port will feel hollow. The palette survives, the experience does not. Start from a Codex-native theme instead and borrow only the color choices you actually miss.

FAQ