VS Code上のCodexペインで、自分の発言バブルの色だけを変えたかったメモです。
| Before | After |
|---|---|
 |
 |
最初は settings.json の workbench.colorCustomizations で試しましたが、Codexペインだけでなく、Explorer/Search/Extensionsなど左側ペインの色も一緒に変わってしまいました。
最終的には、OpenAI拡張のwebview側のCSSを直接パッチする方法で対応しました。
注意!!!
ただし、これは現時点の拡張のDOM/class構造に依存するハックです。
拡張のアップデートで class 名や構造が変わると効かなくなる可能性があります。
この方法は公式の設定ではなく、拡張配下のビルド済みCSSを直接書き換える方法です。
拡張更新時に上書きされる可能性が(ほぼ100%)あり、都度再設定が必要になるので、その点は自己責任で運用する形になります。
結論
最初はもっと厳密な selector で「自分の発言バブルだけ」を狙っていましたが、自分の環境では、最終的にこれだけで自分の発言バブルの色を変えられました。
[data-content-search-unit-key$=":user"] .bg-token-foreground\/5.max-w-\[77\%\].\
break-words.rounded-2xl {
background: #003f7a !important;
}
[data-content-search-unit-key$=":user"] .bg-token-foreground\/5.max-w-\[77\%\].\
break-words.rounded-2xl .text-size-chat {
color: inherit !important;
}
ChatGPTのblueアクセントっぽい色味です。
なぜ settings.json ではなく CSS パッチにしたのか
workbench.colorCustomizations で変えられる色はありますが、Codexペインは通常のVS Code UIではなく、拡張のwebviewとして描画されています。
そのため、sideBar.background や list.hoverBackground などに連動する部分はある一方で、自分の発言バブルだけをピンポイントで変えるのはやりにくいです。
実際、settings.json で色を変えると、Codex だけでなく左側の各種ビューも同時に変わりました。
手順
1. OpenAI拡張のwebview assetsを開く
macOSの場合、自分の環境ではここにありました。
cd "$(ls -dt ~/.vscode/extensions/openai.chatgpt-*/webview/assets/ | head -n 1)"
⚠️自動で最新バージョンをターゲットにします
2. CSSをバックアップ
css="$(ls -t app-main-*.css | head -n 1)"
cp "$css" "$css.bak.$(date +%Y%m%d%H%M%S)"
⚠️ハッシュ部分を自動で考慮しています
3. CSSの末尾に追記
cat >> "$css" <<'CSS'
/* === Codex custom patch: user bubble === */
/* User message bubble */
.bg-token-foreground\/5.max-w-\[77\%\].break-words.rounded-2xl {
background: #003f7a !important;
color: #ffffff !important;
}
/* Text inside the user message bubble */
.bg-token-foreground\/5.max-w-\[77\%\].break-words.rounded-2xl .text-size-chat {
color: #ffffff !important;
}
/* === /Codex custom patch === */
CSS
⚠️ハッシュ部分を自動で考慮しています
4. VS Codeを再読み込み
コマンドパレット(Command + Shift + p)から以下を実行します。
Developer: Reload Window
これで反映されました。
元に戻す方法
そのバージョン(普通は最新版)のディレクトリで
bak="$(ls -t index-*.css.bak | head -n 1)"
orig="${bak%.bak}"
mv "$bak" "$orig"
⚠️ハッシュ部分を自動で検出しています
その後、再度 Developer: Reload Window を実行すれば戻せます。