ui-theme-and-vscode-webview

name	ui-theme-and-vscode-webview
description	Theme and environment behavior for QIP UI. Use when working on styles, color logic, rendering, or mode-specific behavior.

Theme and VS Code Webview

Use this skill when any UI behavior depends on theme or runtime environment.

Supported modes

The UI must work in all four modes:

• Light (default)
• Dark ([data-theme="dark"])
• High contrast ([data-theme="high-contrast"])
• VS Code webview (:root.vscode-webview)

Source of theme values

• Browser mode uses fallback --vscode-* values from theme-variables.css.
• VS Code webview mode receives actual IDE theme variables injected by extension host.
• Do not assume browser fallback values are authoritative in webview mode.

Runtime detection

Use useVSCodeTheme() in components:

const { isDark, isVSCodeWebview, palette } = useVSCodeTheme();

• Use isDark for conditional visuals (for example chart/Monaco/icon variants).
• Use isVSCodeWebview for behavior differences specific to extension runtime.

Theming rule

• Any new visual behavior must be validated for browser and webview runtimes, across all supported theme modes.