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

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

2 files changed, 13 insertions, 11 deletions

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; }