VS Code extension: webview CSS uses --vscode-* theme tokens without fallbacks → invisible table borders, colorless charts, missing code-block backgrounds

Summary: Several chat-panel rendering bugs (no code-block background, invisible markdown table gridlines, colorless charts) share one root cause: webview/index.css references VS Code theme tokens via var(--vscode-*) / intermediate --app-* vars without fallback values. When the host doesn't inject a given token into the webview, the property resolves to nothing and the element renders blank. A single fix — add fallbacks — repairs all of them across all hosts.

This consolidates the symptoms tracked in #45841 (and likely-duplicate #18738, #35318, #8879).

Environment

Claude Code VS Code extension, v2.1.193 (also confirmed back through the 2.1.16x–2.1.17x line — the relevant CSS is materially unchanged). Most visible in Cursor (a VS Code fork that injects a smaller token set into webviews), but not Cursor-exclusive: #45841's original reporter sees missing code-block backgrounds on VS Code / Linux.

Root cause (from webview/index.css)

Table borders:

.root_… table  { border-collapse:collapse; border:1px solid var(--app-input-border) }
.root_… th, td { border:1px solid var(--app-input-border); padding:2px }
--app-input-border: var(--vscode-inlineChatInput-border);   /* no fallback */

Chart palette:

--app-chart-1: var(--vscode-charts-orange);
--app-chart-2: var(--vscode-charts-blue);
--app-chart-3: var(--vscode-charts-green);
--app-chart-4: var(--vscode-charts-yellow);
--app-chart-5: var(--vscode-charts-purple);
--app-chart-6: var(--vscode-charts-red);
--app-chart-8: var(--vscode-charts-foreground);
--app-recording-foreground: var(--vscode-charts-blue);   /* none have fallbacks */

(--app-chart-7 → --vscode-terminal-ansiCyan is fine — terminal ansi tokens are injected by Cursor.)

The fix pattern already exists in the same file

The extension's own status colors already degrade correctly:

--app-status-busy:    var(--vscode-charts-green,#22c55e);
--app-status-pending: var(--vscode-charts-blue,#3b82f6);

The chart and border vars just need the same treatment.

Proposed fix

/* borders: fallback chain so it degrades on hosts/themes missing the inline-chat token */
--app-input-border: var(--vscode-inlineChatInput-border, var(--vscode-input-border, var(--vscode-widget-border, rgba(127,127,127,.4))));

/* charts: same pattern as the status colors above (Tailwind-500 palette) */
--app-chart-1: var(--vscode-charts-orange, #f97316);
--app-chart-2: var(--vscode-charts-blue,   #3b82f6);
--app-chart-3: var(--vscode-charts-green,  #22c55e);
--app-chart-4: var(--vscode-charts-yellow, #eab308);
--app-chart-5: var(--vscode-charts-purple, #a855f7);
--app-chart-6: var(--vscode-charts-red,    #ef4444);
--app-chart-8: var(--vscode-charts-foreground, #cccccc);
--app-recording-foreground: var(--vscode-charts-blue, #3b82f6);

Why this layer

The fix is owned by the extension, is ~10 lines, follows a pattern already shipped in the file, and repairs every affected host (VS Code + forks) in one change — versus asking each fork to mirror VS Code's full token-injection set.

Current workaround

Hand-patching webview/index.css, but every extension auto-update overwrites it.