Themestudio

I was genuinely excited when Codex themes launched, but I kept running into the same friction: the default selection felt limited, and comparing options took too much back-and-forth. I wanted to move faster without losing confidence in what I was shipping.

The bigger issue was context. A theme could look fine in a small preview, then feel wrong in a real coding environment once spacing, contrast, and especially fonts came into play. That gap between preview and real usage was the main reason this project exists.

Theme Studio is a dev-for-dev web app built to close that gap. It maps theme tokens into a Codex-compatible JSON payload, so you can generate, tweak, and export themes quickly while keeping the output predictable and reusable.

It also includes extra generated presets for anyone who wants a strong starting point with minimal setup. As Codex introduces more theming controls, this project will continue to adopt those capabilities and expose them here.

On a personal note, rebuilding a Codex-like experience in the browser was genuinely fun and surprisingly challenging. It made me respect even more how much structure sits behind an app like Codex. If this tool saves you even a few clicks, it already did its job. Happy theming!

Choose the path that matches your goal. Most users should use the web builder directly.

Under the hood, both paths converge on the same contract: source colors are mapped into a stable Codex theme payload, semantic fields are normalized, and the final JSON is shaped for predictable import behavior.

Start with the fastest flow first. If you prefer a local terminal pipeline, expand the advanced section below.

All flows converge to the same codex-theme-v1 contract. For field-by-field key details, continue to the next section: Codex JSON Format.

git clone https://github.com/lafllamme/codex-themes

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Ansi 0 Color</key>
  <dict>
    <key>Alpha Component</key>
    <real>1</real>
    <key>Blue Component</key>
    <real>0.015686275437474251</real>
    <key>Color Space</key>
    <string>sRGB</string>
    <key>Green Component</key>
    <real>0.015686275437474251</real>
    <key>Red Component</key>
    <real>0.015686275437474251</real>
  </dict>
  <key>Ansi 1 Color</key>
  <dict>
    <key>Alpha Component</key>
    <real>1</real>
    <key>Blue Component</key>
    <real>0.2010747492313385</real>
    <key>Color Space</key>
    <string>sRGB</string>
    <key>Green Component</key>
    <real>0.29108250141143799</real>
    <key>Red Component</key>
    <real>0.84613037109375</real>
  </dict>
  <key>Background Color</key>
  <dict>
    <key>Alpha Component</key>
    <real>1</real>
    <key>Blue Component</key>
    <real>0.015686275437474251</real>
    <key>Color Space</key>
    <string>sRGB</string>
    <key>Green Component</key>
    <real>0.015686275437474251</real>
    <key>Red Component</key>
    <real>0.015686275437474251</real>
  </dict>
  <key>Foreground Color</key>
  <dict>
    <key>Alpha Component</key>
    <real>1</real>
    <key>Blue Component</key>
    <real>1</real>
    <key>Color Space</key>
    <string>sRGB</string>
    <key>Green Component</key>
    <real>1</real>
    <key>Red Component</key>
    <real>0.99607843160629272</real>
  </dict>
</dict>
</plist>

pnpm install

cd codex-themes
pnpm convert

Payload exchange uses the codex-theme-v1 prefix as parser signature. The contract is stable and designed for predictable import/export.

codex-theme-v1:{
  "codeThemeId": "rose-pine",
  "variant": "dark",
  "theme": {
    "accent": "#ea9a97",
    "surface": "#232136",
    "ink": "#e0def4",
    "contrast": 60,
    "opaqueWindows": false,
    "fonts": { "ui": null, "code": null },
    "semanticColors": {
      "diffAdded": "#9ccfd8",
      "diffRemoved": "#908caa",
      "skill": "#c4a7e7"
    }
  }
}

The current catalog combines official Codex presets with a large imported iTerm set. We use iTerm as a source because its palette ecosystem is widely known across developer workflows, including familiar classics like Monokai, Ayu, and many other proven themes. Every entry is normalized into the same codex-theme-v1 payload contract so browsing, previewing, and exporting stay consistent.

This split is deliberate: Theme Studio stays the fastest creation path, while the codex-themes repository pipeline provides reproducible local generation for automation and versioned workflows.

Core references for the Theme Studio pipeline, source presets, and Codex compatibility context.

Theme Studio is an independent, editorial project: a personal exploration of how theme payloads map to UI tokens in the browser. It exists for learning and demonstration, not as an official product, template, or substitute for anything shipped by OpenAI or any other company.

Nothing here is meant to incorporate, clone, or imitate OpenAI products, services, or branding beyond what is necessary to describe compatibility with the Codex theme JSON format. The only third-party visual asset used in this project is the Codex logo, included solely to anchor the workbench preview in a familiar context; if that use is a problem, it can be removed or replaced.

If you have concerns, questions, or notice something that should be corrected, please reach out or message us. Feedback is welcome.