[BUG] Webview CSS: six custom properties are referenced but never defined, plus two light-background issues

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

Webview CSS: six custom properties are referenced but never defined, plus two light-background issues

Extension: anthropic.claude-code 2.1.235 (win32-x64)
File: webview/index.css

1. Six --app-* properties are referenced with no definition and no fallback

Diffing every var(--app-…) reference in webview/index.css against every
--app-…: declaration in the same file gives 76 referenced, 79 declared, and
ten referenced-but-undeclared. Four of those ten carry a fallback value and are
harmless. The remaining six do not, so the declaration is invalid at
computed-value time and the property falls back to unset:

| property | declaration | example selector |
| --- | --- | --- |
| --app-code-background | background-color | .toolResult_uq5aLg, .menuHeaderHint_8RAulQ kbd |
| --app-link-color | color | .toolNameTextSecondary_ZUQaOA |
| --app-link-foreground | color | .nullStateLink_OOQiHg |
| --app-secondary-text | color | .emptyState_pZbgXw |
| --app-text-secondary | color | .message_AV_aEg |
| --app-font-family-mono | font-family | .callbackUrlInput_IHCQeQ |

They look like leftovers from an older naming scheme — --app-secondary-text
and --app-text-secondary are both dead while --app-secondary-foreground
is the one that is actually declared, and --app-link-color /
--app-link-foreground have no declared counterpart at all.

Most visible consequence. .menuHeaderHint_8RAulQ kbd sets
background: var(--app-code-background). Because that reference is invalid,
the declaration resolves to unset, which overrides the background the
webview's own base stylesheet gives <kbd> from
--vscode-keybindingLabel-background. The keyboard pills in the Modes popup
(⌥ + tab to switch) therefore have no fill at all — only a border. Against a
light menu.background they are close to unreadable, and no theme colour can
repair it, since a theme cannot define a custom property the stylesheet never
declared.

2. The sticky message header blends the editor colour into a sidebar surface

.message_07S1Yg.stickyHeader_07S1Yg{
    --sticky-bg: var(--app-primary-background);
    background-image:
      linear-gradient(to bottom, var(--sticky-bg)                calc(100% - 12px), transparent 100%),
      linear-gradient(to bottom, var(--app-secondary-background) calc(100% - 12px), transparent 100%);
}

The second layer is --app-secondary-background, i.e. editor.background,
stacked underneath a layer of --app-primary-background, i.e.
sideBar.background. In the side bar those two colours are usually close, so
nothing shows. When a theme gives them genuinely different values, the lower
layer bleeds through the twelve-pixel fade and leaves a visible seam under the
sticky header. The fullEditor_07S1Yg variant already switches --sticky-bg
to the secondary colour, so the second layer looks like it should have been
conditional too.

3. --app-warning-accent is a literal, and it is low-contrast on light

--app-warning-accent: #e5a54b is hardcoded, has no --vscode-* binding, and
is not among the two variables .vscode-light overrides
(--app-transparent-inner-border and --app-spinner-foreground). It colours
.sparkIcon_cKsPxg, the spark next to the permission-mode label, so that icon
sits at roughly 1.8:1 against the extension's own light background
(--app-claude-ivory: #faf9f5) as well as against any light menu.background.

How this was found

Theming the chat panel light while the rest of VS Code stays dark. That is
admittedly an unusual configuration, but it is what surfaced all three: each
one is invisible whenever the panel's colours happen to sit close to the
editor's.

What Should Happen?

Ability to adjust the palette in different modes — a light chat panel in dark common mode.

<img width="1301" height="802" alt="Image" src="https://github.com/user-attachments/assets/b5a55413-8024-49dc-bf82-9a30e41d3e3b" />

Error Messages/Logs

Steps to Reproduce

How this was found

Theming the chat panel light while the rest of VS Code stays dark. That is
admittedly an unusual configuration, but it is what surfaced all three: each
one is invisible whenever the panel's colours happen to sit close to the
editor's.

Claude Model

None

Is this a regression?

Yes, this worked in a previous version

Last Working Version

_No response_

Claude Code Version

2.0.26

Platform

Other

Operating System

Windows

Terminal/Shell

Other

Additional Information

VS Code plugin version: 2.1.235