Codex UI Customizer (Unofficial)
Customize the OpenAI Codex UI in VS Code.
Codex UI Customizer is a small, unofficial VS Code extension that applies visual customizations to the Codex chat interface. It supports both local VS Code sessions and Remote-SSH environments where the Codex extension runs on a remote extension host.
The first available customization is styling for user message bubbles. The extension is intentionally structured so additional UI customization options can be added in future releases.
[!IMPORTANT]
Unofficial extension
Codex UI Customizer is not affiliated with, endorsed by, or maintained by OpenAI.
This extension modifies internal CSS assets of the installed openai.chatgpt VS Code extension. It does not use an official Codex theming API, and future Codex updates may require compatibility fixes.
Features
- Customize the background color of your own Codex messages
- Customize user-message border color
- Customize border width
- Customize corner radius
- Works with Remote-SSH
- Automatically detects the installed
openai.chatgpt extension
- Does not hard-code Codex version numbers
- Does not hard-code
.vscode-server paths
- Finds CSS through the WebView HTML's stylesheet references, including hash-only filenames
- Validates every referenced stylesheet before applying changes; stops on unsupported layouts
- Prevents duplicate style injection
- Creates a backup before modifying Codex CSS
- Restores the original CSS with the
Remove command
- Automatically reapplies customizations after Codex extension updates when possible
- Provides commands for Apply, Remove, and target diagnostics
- Does not disable WebView CSP
- Does not inject scripts into the Codex WebView
Current Customization
User Message Bubble
By default, Codex UI Customizer applies:
[data-user-message-bubble="true"] {
background: #173e76 !important;
border: 1px solid #3d4654 !important;
border-radius: 10px !important;
}
Only user message bubbles are targeted.
Codex responses are left unchanged.
Configuration
The extension can be configured from VS Code Settings or directly in settings.json.
Default configuration:
{
"codexUiCustomizer.autoApply": true,
"codexUiCustomizer.userMessage.background": "#173e76",
"codexUiCustomizer.userMessage.borderColor": "#3d4654",
"codexUiCustomizer.userMessage.borderWidth": "1px",
"codexUiCustomizer.userMessage.borderRadius": "10px"
}
Available Settings
| Setting |
Default |
Description |
codexUiCustomizer.autoApply |
true |
Automatically applies UI customizations when the extension activates |
codexUiCustomizer.userMessage.background |
#173e76 |
Background color of user message bubbles |
codexUiCustomizer.userMessage.borderColor |
#3d4654 |
Border color of user message bubbles |
codexUiCustomizer.userMessage.borderWidth |
1px |
Border width of user message bubbles |
codexUiCustomizer.userMessage.borderRadius |
10px |
Corner radius of user message bubbles |
Colors accept 3, 4, 6, or 8 digit hexadecimal values. Border width and corner
radius accept 0 or non-negative values using px, rem, or em. Invalid
values are ignored and replaced with the corresponding default.
The codexUiCustomizer.* namespace is intentionally generic so future releases can add additional categories such as:
codexUiCustomizer.userMessage.*
codexUiCustomizer.codeBlock.*
codexUiCustomizer.chat.*
codexUiCustomizer.sidebar.*
Commands
Open the Command Palette with:
Ctrl + Shift + P
Available commands:
Codex UI Customizer: Apply
Applies the current customization settings to the detected Codex CSS assets.
Codex UI Customizer: Apply
Codex UI Customizer: Remove
Removes the injected customization and restores the original CSS backup when available.
Codex UI Customizer: Remove
Codex UI Customizer: Show Target
Displays diagnostic information in the Output panel, including:
- current extension host
- detected Codex installation path
- detected Codex version
- Codex WebView assets path
- reference HTML and detection method
- CSS files being patched and their original
href references, in HTML order
If detection fails, the command opens the Output panel with the failure reason.
Codex UI Customizer: Show Target
This command is especially useful when troubleshooting Remote-SSH environments.
Remote-SSH
Codex UI Customizer supports VS Code Remote-SSH.
The important rule is:
Install Codex UI Customizer on the same extension host where Codex is running.
For example, if:
Developer: Show Running Extensions
shows the OpenAI Codex extension under:
SSH: dev
then Codex UI Customizer must also be installed under:
SSH: dev
The extension uses the VS Code API:
vscode.extensions.getExtension("openai.chatgpt")
to locate the actual Codex installation.
This means it does not depend on paths such as:
~/.vscode-server/extensions/openai.chatgpt-26.xxxxx/
or on any specific Codex version.
A typical Remote-SSH installation may internally look like:
~/.vscode-server/extensions/
└── openai.chatgpt-*/
└── webview/
└── assets/
├── app-initial-xxxxxxxx.css
└── app-initial-yyyyyyyy.css
but this path is discovered dynamically rather than hard-coded.
How It Works
Codex UI Customizer currently patches internal WebView CSS files belonging to the installed OpenAI Codex extension.
The extension:
Locates openai.chatgpt through the VS Code Extension API.
Resolves its actual extensionPath.
Looks under:
webview/assets/
Reads webview/index.html and resolves explicit stylesheet links, for example:
<link rel="stylesheet" href="./assets/app-initial-aad627bd9dff.css">
<link rel="stylesheet" href="./assets/c33752c5468c.css">
Filenames do not determine eligibility. Comments, module preloads, and CSS
names in JavaScript dependency tables are not used as targets. References are
kept in HTML order and duplicate files are patched only once.
Validates all references before writing, then creates a backup of each target CSS file before modification.
Adds a clearly marked customization block.
Avoids adding the same customization more than once.
Referenced files must exist and resolve to regular CSS files within webview/,
including after resolving symlinks. External or absolute URLs, escaping paths,
explicit HTML <base> tags, conditional or alternate stylesheets, and HTML
without explicit stylesheet links stop detection. There is no fallback that
patches every CSS file. This implementation does not traverse JavaScript
imports or locate dynamically loaded stylesheets.
Injected styles are wrapped with markers similar to:
/* codex-ui-customizer:start */
[data-user-message-bubble="true"] {
...
}
/* codex-ui-customizer:end */
These markers allow the extension to safely locate and remove its own changes.
Backups and Restoration
Before modifying a Codex CSS file, Codex UI Customizer creates a backup alongside the original file.
The backup is used by:
Codex UI Customizer: Remove
to restore the pre-customization CSS when possible.
If a backup is unavailable, the extension falls back to removing only its own marked customization block.
This avoids intentionally replacing unrelated Codex CSS rules.
Uninstalling
[!WARNING]
Run Codex UI Customizer: Remove before uninstalling this extension.
Recommended uninstall sequence:
Ctrl + Shift + P
→ Codex UI Customizer: Remove
→ Uninstall Codex UI Customizer
VS Code does not provide a reliable extension uninstall hook that can safely modify another installed extension's files during the uninstall operation.
Because of this, uninstalling Codex UI Customizer without first running Remove may leave the injected CSS in the installed Codex extension.
If You Already Uninstalled Without Running Remove
You can recover by either:
reinstalling Codex UI Customizer and running:
Codex UI Customizer: Remove
or:
- reinstalling/updating the OpenAI Codex extension so that its WebView assets are replaced.
After Applying a Customization
An already-open Codex WebView may continue using previously loaded CSS.
If a change does not appear immediately:
close and reopen the Codex view, or
run:
Developer: Reload Window
A full VS Code restart is normally not required.
Codex Updates
The OpenAI Codex extension may update its internal WebView files at any time.
Codex UI Customizer listens for extension changes and attempts to reapply the current customization automatically.
You can also run:
Codex UI Customizer: Apply
manually after updating Codex.
Because this extension relies on internal implementation details, a Codex update may occasionally change:
- CSS filenames
- DOM attributes
- WebView structure
- style behavior
If that happens, Codex UI Customizer may temporarily stop working until compatibility is updated.
Compatibility
The current implementation expects the OpenAI Codex VS Code extension to expose:
Extension ID
openai.chatgpt
WebView stylesheet references
<!-- webview/index.html -->
<link rel="stylesheet" href="./assets/example.css">
Both legacy app-initial-*.css names and hash-only CSS names are supported.
Read-only detection was checked against installed versions 26.1007.21434 and
26.1111.21308. This confirms file discovery, not rendering in a live WebView.
User message attribute
data-user-message-bubble="true"
These are internal implementation details and are not guaranteed public APIs.
Privacy and Security
Codex UI Customizer is intentionally small in scope.
It:
- does not read Codex conversation contents
- does not send telemetry
- does not call external services
- does not access authentication tokens
- does not access OpenAI account credentials
- does not access API keys
- does not inspect prompts or responses
- does not modify Codex JavaScript
- does not disable Content Security Policy
- does not inject JavaScript into the Codex WebView
The extension reads the Codex WebView entry HTML to discover its stylesheet
references and updates only the referenced CSS assets to apply the configured
visual customization.
In VS Code Restricted Mode, workspace-defined Codex UI Customizer settings are
disabled. Settings are also validated before being written to CSS so a workspace
cannot use customization values to inject additional CSS rules.
Why Does It Modify Another Extension?
At the time of writing, the OpenAI Codex VS Code extension does not expose a public theming API for the user-message bubble.
For example, VS Code's standard:
"workbench.colorCustomizations": {
"chat.requestBackground": "#173e76"
}
does not currently control the Codex user-message bubble.
Because Codex renders its own WebView UI, Codex UI Customizer applies the style directly to Codex's internal CSS assets.
This behavior is documented here intentionally so users can clearly understand what the extension changes.
Limitations
Codex UI Customizer is based on Codex implementation details rather than a stable public UI API.
As a result:
- Codex updates may break individual customizations
- changes to the HTML entry point or stylesheet loading mechanism may require compatibility updates
- DOM selectors may change
- an already-open WebView may require reload after styling
- Codex extension updates may overwrite previous CSS modifications before this extension reapplies them
The extension aims to detect and handle these cases where practical.
Installation From VSIX
To build the VSIX:
npm run package
This produces a file similar to:
codex-ui-customizer-0.2.2.vsix
Install or update it with:
code --install-extension codex-ui-customizer-0.2.2.vsix --force
For Remote-SSH, install the VSIX on the remote extension host where Codex is running.
Development
The extension intentionally has a minimal implementation.
The core behavior is:
VS Code Extension API
↓
detect openai.chatgpt
↓
resolve extensionPath
↓
read webview/index.html stylesheet links
↓
validate referenced local CSS files
↓
backup
↓
apply CSS customization
No WebView injection framework or additional runtime service is required.
Future Customizations
The project is named Codex UI Customizer rather than after the current user-message feature so additional UI options can be added over time.
Possible future customization areas include:
- code block appearance
- chat content width
- message spacing
- sidebar layout
- composer appearance
- typography
- response spacing
- tool-call presentation
Future options should remain opt-in and configurable through the codexUiCustomizer.* settings namespace.
Support
Report bugs through the GitHub issue tracker.
When reporting a problem, please include:
VS Code version
OpenAI Codex extension version
Codex UI Customizer version
whether the environment is local or Remote-SSH
output from:
Codex UI Customizer: Show Target
Do not include:
- conversation contents
- authentication tokens
- API keys
- credentials
- other sensitive information
Disclaimer
Codex UI Customizer is an independent, unofficial project.
OpenAI, Codex, and related names may be trademarks of their respective owners.
This project is not affiliated with or endorsed by OpenAI.
License
MIT
