refactor(bundle): drive all UI colors from the 2026 Dark theme variables

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

3 files changed, 14 insertions, 12 deletions

diff --git a/bundle/AGENTS/DEVELOPMENT.md b/bundle/AGENTS/DEVELOPMENT.md
index 36f4085..940a0dd 100644
--- a/bundle/AGENTS/DEVELOPMENT.md
+++ b/bundle/AGENTS/DEVELOPMENT.md
@@ -20,7 +20,7 @@ Licenses and notices are included as frontend assets, including inside the singl
 
 Nightly extends the existing native compiler jobs: reuse each job's EMBEDDED compiler, compile and test the desktop app on Linux, and upload only the Windows/macOS packages. macOS checks the extracted .tar.xz; Windows checks the single .exe in a fresh working directory. Publishing requires the original four packages plus both desktop packages and retains the existing current-SHA guard and asset replacement behavior. Validate workflow changes with actionlint and a fake gh API, never the real nightly release.
 
-The editor imports the plugin's grammar, language configuration and pure CommonJS modules directly. Vite's CommonJS adapter includes those sources. Do not duplicate their rules or add a second tokenizer. VS Code 2026 Dark and its include chain (Dark Modern, Dark+, Dark (Visual Studio)) are pinned under `vendor/vscode/`; retain upstream attribution.
+The editor imports the plugin's grammar, language configuration and pure CommonJS modules directly. Vite's CommonJS adapter includes those sources. Do not duplicate their rules or add a second tokenizer. VS Code 2026 Dark and its include chain (Dark Modern, Dark+, Dark (Visual Studio)) are pinned under `vendor/vscode/`; retain upstream attribution. All UI colors come from the theme as `--vscode-*` CSS variables set in `editor.js`; never hard-code colors in `style.css`.
 
 Windows and macOS nightly jobs cache Rust dependencies from `src-tauri/target` after selecting the Rust toolchain. The cache includes compiled dependencies and is saved even if a later check fails; project crates are rebuilt so the packaged compiler comes from the current checkout. Rust toolchain and Cargo configuration changes affect the cache key. Release optimization and archive compression settings are unchanged. Compare cold and warm CI runs to measure the benefit; a cache miss must still build normally.
 
diff --git a/bundle/src/editor.js b/bundle/src/editor.js
index e351c9d..adfc90c 100644
--- a/bundle/src/editor.js
+++ b/bundle/src/editor.js
@@ -32,6 +32,8 @@ export const theme = {
 	tokenColors: [{ settings: { foreground: dark.colors['editor.foreground'], background: dark.colors['editor.background'] } }, ...dark.tokenColors]
 };
 
+for (const [key, value] of Object.entries(dark.colors)) document.documentElement.style.setProperty(`--vscode-${key.replaceAll('.', '-')}`, value);
+
 class TokenState {
 	constructor(stack) { this.stack = stack; }
 	clone() { return new TokenState(this.stack); }
diff --git a/bundle/src/style.css b/bundle/src/style.css
index 0719fd4..7f73544 100644
--- a/bundle/src/style.css
+++ b/bundle/src/style.css
@@ -1,20 +1,20 @@
-:root { color-scheme: dark; font: 13px system-ui, sans-serif; color: #bbbebf; background: #121314; }
+:root { color-scheme: dark; font: 13px system-ui, sans-serif; color: var(--vscode-editor-foreground); background: var(--vscode-editor-background); }
 * { box-sizing: border-box; }
 body { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
-header { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid #2a2b2c; }
-button { font: inherit; color: inherit; background: #191a1b; border: 1px solid #2a2b2c; padding: 5px 16px; border-radius: 2px; cursor: pointer; }
-button:hover { background: #242526; }
+header { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--vscode-panel-border); }
+button { font: inherit; color: var(--vscode-button-secondaryForeground); background: var(--vscode-button-secondaryBackground); border: 1px solid var(--vscode-button-secondaryBorder); padding: 5px 16px; border-radius: 2px; cursor: pointer; }
+button:hover { background: var(--vscode-button-secondaryHoverBackground); }
 button:disabled { opacity: .5; cursor: default; }
-button:focus-visible, textarea:focus-visible, pre:focus-visible { outline: 1px solid #3994bcb3; outline-offset: -1px; }
+button:focus-visible, textarea:focus-visible, pre:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
 #filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px; }
 main { min-height: 0; flex: 1; display: grid; grid-template-rows: minmax(160px, 2fr) minmax(100px, 1fr); }
 #editor { min-height: 0; overflow: hidden; }
-#panels { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #2a2b2c; }
+#panels { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--vscode-panel-border); }
 section { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
-section + section { border-left: 1px solid #2a2b2c; }
-label { padding: 5px 10px; background: #191a1b; }
-textarea, pre { margin: 0; padding: 8px 10px; border: 0; color: inherit; background: #121314; font: 14px Consolas, Menlo, monospace; tab-size: 4; }
+section + section { border-left: 1px solid var(--vscode-panel-border); }
+label { padding: 5px 10px; color: var(--vscode-foreground); background: var(--vscode-editorGroupHeader-tabsBackground); }
+textarea, pre { margin: 0; padding: 8px 10px; border: 0; color: inherit; background: var(--vscode-editor-background); font: 14px Consolas, Menlo, monospace; tab-size: 4; }
 textarea { flex: 1; min-height: 0; width: 100%; resize: none; border-radius: 0; }
 pre { flex: 1; min-height: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
-footer { min-height: 24px; padding: 3px 10px; border-top: 1px solid #2a2b2c; }
-.invalid-bracket { color: #f44747 !important; }
+footer { min-height: 24px; padding: 3px 10px; color: var(--vscode-statusBar-foreground); background: var(--vscode-statusBar-background); border-top: 1px solid var(--vscode-statusBar-border); }
+.invalid-bracket { color: var(--vscode-errorForeground) !important; }