Codex Theme

Customize the colors of your Codex chat panel independently of your VS Code theme.

Preview release. This is an unofficial extension and is not affiliated with OpenAI. It installs a reversible local appearance updater in the Codex webview.

Features

• Fourteen built-in palettes, including Midnight, Dracula, Rose Pine, Warm Light, Tokyo Night, Nord, Catppuccin Mocha, Catppuccin Latte, Gruvbox Dark, Solarized Dark, Solarized Light, One Dark, Monokai Pro, and Ocean Breeze. These are locally defined palettes inspired by the named themes.
• Live theme and pixel cat updates without reloading after a one-time setup.
• Custom colors for backgrounds, surfaces, text, borders, and accents.
• A pixel cat that walks back and forth along the bottom of the chat panel.
• A command to restore the original appearance.
• A startup notification when your saved patch is missing, for example after a Codex update.

Installation

Install from a VSIX using Extensions → … → Install from VSIX… and select the latest mehran-codex-theme package. Once published, you can also find Codex Theme by mehranmohammadif in the VS Code Marketplace.

The official Codex extension (openai.chatgpt) must be installed in the same local VS Code instance.

Choose a theme

1. Open the Command Palette with Ctrl+Shift+P (Cmd+Shift+P on macOS).
2. Run Codex Theme: Select Theme.
3. Choose one of the fourteen palettes, or Custom.
4. On the first use, reopen Codex or click Reload Once to load the live updater. Subsequent changes appear within about 400 ms while the panel is visible.

The one-time setup is necessary because an already-open Codex webview cannot load a newly installed script until it is reopened. An update to Codex that removes the updater may require this step again.

Customize your colors

Run Codex Theme: Customize Colors to enter eight colors in #RRGGBB format. Press Escape to cancel before any palette is saved or applied.

You can also edit codexTheme.customColors in your user settings, then run Codex Theme: Select Theme → Custom. Omitted colors use the Midnight defaults.

{
  "codexTheme.customColors": {
    "background": "#111827",
    "surface": "#1f2937",
    "elevated": "#293548",
    "text": "#f3f4f6",
    "muted": "#a3b0c2",
    "border": "#3b475a",
    "accent": "#60a5fa",
    "accentText": "#111827"
  }
}

Pixel cat

A small pixel cat is included by default when you apply a theme. It walks back and forth at the bottom of the panel, with animated legs and a tail. It does not intercept clicks or keyboard input.

Run Codex Theme: Toggle Pixel Cat to turn it on or off. After the one-time setup, the change appears live. It can also be enabled without applying a color theme. Your choice is saved in the extension's own state and reused when selecting another theme, without writing to User Settings. With the system's reduced-motion preference enabled, the cat remains still.

Restore the original appearance

Run Codex Theme: Restore Original. The live appearance is cleared and the HTML updater tag is removed. Restoring a legacy CSS patch from versions before 0.2.0 still requires reopening the panel to unload the old stylesheet.

Restore the original appearance before uninstalling this extension. Uninstalling alone does not remove the appearance updater.

How it works

VS Code does not provide a public API for an extension to directly restyle another extension's webview. Codex Theme adds a marked external script tag to the installed Codex webview/index.html and writes two local files: codex-theme-live.js and codex-theme-live.css.

The updater reads only the local appearance CSS every 400 ms while the panel is visible, updating a dedicated style element only when its content changes. It pauses while hidden and preserves the last style if reading fails. It does not access chat messages, change the page HTML during theme switching, or send data to an external service.

The cat uses an embedded SVG sprite sheet and CSS animations. The existing Content Security Policy and Codex JavaScript bundles are not changed. Legacy stylesheet patches are removed when migrating to the live updater.

Restoring removes the marked HTML tag and updater script, and clears the live CSS. A blank CSS file remains so already-open panels can clear their style without failing their next local read. Other HTML and stylesheet content is preserved.

Compatibility and limitations

• Intended for desktop VS Code with Codex installed locally. VS Code for the web and remote-hosted Codex installations are not supported.
• The installed Codex builds 26.930.51102-win32-x64 and 26.930.61225-win32-x64 were inspected for the webview and CSP layout. Live rendering in the actual Codex panel still requires manual validation.
• Only colors are customized. Elements with fixed colors, syntax highlighting, charts, and Codex's internal light/dark behavior may not match every palette.
• Codex updates may remove the updater. Select your theme again when prompted; this extension does not automatically modify files on startup.
• Read-only installations and unsupported webview layouts produce an error.
• Modifying extension files may trigger an integrity warning in VS Code.

Development

The extension uses JavaScript and the VS Code API, with no runtime dependencies.

npm run check
npm test
npm run package

Open this folder in VS Code and press F5 to launch the Extension Development Host. Applying a theme there also patches the installed Codex files. Run Restore Original after testing.

References

• VS Code Webview API
• Codex settings

License

MIT