diff --git a/webview-ui/playwright/vscode-theme-base.css b/webview-ui/playwright/vscode-theme-base.css
index 5226acb1cf..9e949edd0a 100644
--- a/webview-ui/playwright/vscode-theme-base.css
+++ b/webview-ui/playwright/vscode-theme-base.css
@@ -17,6 +17,20 @@ body {
 	padding: 16px;
 }
 
+.vscode-text-field-mock {
+	box-sizing: border-box;
+	background: var(--vscode-input-background);
+	border: 1px solid var(--vscode-input-border, transparent);
+	color: var(--vscode-input-foreground);
+	font: inherit;
+	padding: 4px 6px;
+}
+
+.vscode-text-field-mock::placeholder {
+	color: var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground));
+	opacity: 1;
+}
+
 /* @vscode/webview-ui-toolkit/react renders VSCodeButton as a bare
    <button appearance="primary|secondary"> outside VS Code's web-component
    runtime. Style it here so button screenshots match the real appearance. */
diff --git a/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx b/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
index cc6d089a1a..204778be33 100644
--- a/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
+++ b/webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx
@@ -52,9 +52,15 @@ export const VSCodeLink = ({ children, href, ...props }: any) => (
 	</a>
 )
 
-export const VSCodeTextField = ({ value, onInput, "data-testid": dataTestId, children, ...props }: any) => (
-	<div>
-		<input data-testid={dataTestId} value={value} onInput={onInput} {...props} />
+export const VSCodeTextField = ({ value, onInput, "data-testid": dataTestId, children, className, ...props }: any) => (
+	<div className={className}>
+		<input
+			className="vscode-text-field-mock w-full"
+			data-testid={dataTestId}
+			value={value}
+			onInput={onInput}
+			{...props}
+		/>
 		{children}
 	</div>
 )
diff --git a/webview-ui/src/components/chat/CommandPatternSelector.tsx b/webview-ui/src/components/chat/CommandPatternSelector.tsx
index dc9e517dc7..ca19c6edd0 100644
--- a/webview-ui/src/components/chat/CommandPatternSelector.tsx
+++ b/webview-ui/src/components/chat/CommandPatternSelector.tsx
@@ -71,7 +71,7 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 					<span
 						className={cn(
 							"text-sm flex-1 group-hover:opacity-100",
-							isExpanded ? "opacity-100" : "opacity-40",
+							isExpanded ? "text-vscode-foreground" : "text-vscode-descriptionForeground",
 						)}>
 						<CheckCheck className="size-3 inline-block mr-2" />
 						{t("chat:commandExecution.manageCommands")}
@@ -79,7 +79,7 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 					<ChevronUp
 						className={cn(
 							"group-hover:opacity-100 size-4 transition-transform",
-							isExpanded ? "opacity-100" : "opacity-40 -rotate-180",
+							isExpanded ? "text-vscode-foreground" : "text-vscode-descriptionForeground -rotate-180",
 						)}
 					/>
 				</div>
@@ -135,12 +135,14 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 										)}>
 										<button
 											className={cn("p-1 rounded transition-all cursor-pointer", {
-												"bg-green-500/20 text-green-500 hover:bg-green-500/30":
+												"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground hover:bg-vscode-list-focusBackground":
 													status === "allowed",
-												"text-vscode-descriptionForeground hover:text-green-500 hover:bg-green-500/10":
+												"text-vscode-descriptionForeground hover:text-vscode-foreground hover:bg-vscode-list-hoverBackground":
 													status !== "allowed",
 											})}
 											onClick={() => onAllowPatternChange(editState.value)}
+											aria-pressed={status === "allowed"}
+											data-testid="allow-command-pattern"
 											aria-label={t(
 												status === "allowed"
 													? "chat:commandExecution.removeFromAllowed"
@@ -157,11 +159,14 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 										)}>
 										<button
 											className={cn("p-1 rounded transition-all cursor-pointer", {
-												"bg-red-500/20 text-red-500 hover:bg-red-500/30": status === "denied",
-												"text-vscode-descriptionForeground hover:text-red-500 hover:bg-red-500/10":
+												"bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground hover:bg-vscode-list-focusBackground":
+													status === "denied",
+												"text-vscode-descriptionForeground hover:text-vscode-foreground hover:bg-vscode-list-hoverBackground":
 													status !== "denied",
 											})}
 											onClick={() => onDenyPatternChange(editState.value)}
+											aria-pressed={status === "denied"}
+											data-testid="deny-command-pattern"
 											aria-label={t(
 												status === "denied"
 													? "chat:commandExecution.removeFromDenied"
diff --git a/webview-ui/src/components/chat/ContextMenu.tsx b/webview-ui/src/components/chat/ContextMenu.tsx
index 14f8c22c76..04ceb2eab6 100644
--- a/webview-ui/src/components/chat/ContextMenu.tsx
+++ b/webview-ui/src/components/chat/ContextMenu.tsx
@@ -81,7 +81,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 						style={{
 							fontWeight: "bold",
 							fontSize: "0.85em",
-							opacity: 0.8,
+							color: "var(--vscode-descriptionForeground)",
 						}}>
 						{option.label}
 					</span>
@@ -95,7 +95,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 						{option.description && (
 							<span
 								style={{
-									opacity: 0.5,
+									color: "var(--vscode-descriptionForeground)",
 									fontSize: "0.9em",
 									lineHeight: "1.2",
 									whiteSpace: "nowrap",
@@ -115,7 +115,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							{option.argumentHint && (
 								<span
 									style={{
-										opacity: 0.5,
+										color: "var(--vscode-descriptionForeground)",
 										fontSize: "0.9em",
 										lineHeight: "1.2",
 									}}>
@@ -126,7 +126,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 						{option.description && (
 							<span
 								style={{
-									opacity: 0.5,
+									color: "var(--vscode-descriptionForeground)",
 									fontSize: "0.9em",
 									lineHeight: "1.2",
 									whiteSpace: "nowrap",
@@ -154,7 +154,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							<span
 								style={{
 									fontSize: "0.85em",
-									opacity: 0.7,
+									color: "var(--vscode-descriptionForeground)",
 									whiteSpace: "nowrap",
 									overflow: "hidden",
 									textOverflow: "ellipsis",
@@ -197,7 +197,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 									direction: "rtl",
 									textAlign: "right",
 									flex: 1,
-									opacity: 0.75,
+									color: "var(--vscode-descriptionForeground)",
 									fontSize: "0.75em",
 								}}>
 								{folderPath}
diff --git a/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx
new file mode 100644
index 0000000000..ed239f719c
--- /dev/null
+++ b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.fixture.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+
+import McpToolRow from "../../mcp/McpToolRow"
+import { CommandPatternSelector } from "../CommandPatternSelector"
+
+export function ThemeSensitiveStatusFixture() {
+	return (
+		<main
+			data-testid="status-surface"
+			className="w-[480px] space-y-5 rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">
+			<section aria-labelledby="commands-title" className="space-y-2">
+				<h2 id="commands-title" className="m-0 text-base font-semibold">
+					Command permissions
+				</h2>
+				<CommandPatternSelector
+					patterns={[
+						{ pattern: "pnpm test", description: "Run the test suite" },
+						{ pattern: "rm -rf", description: "Remove files recursively" },
+					]}
+					allowedCommands={["pnpm test"]}
+					deniedCommands={["rm -rf"]}
+					onAllowPatternChange={() => undefined}
+					onDenyPatternChange={() => undefined}
+				/>
+			</section>
+
+			<section aria-labelledby="mcp-title" className="space-y-2">
+				<h2 id="mcp-title" className="m-0 text-base font-semibold">
+					MCP tools
+				</h2>
+				<McpToolRow
+					tool={{
+						name: "search_workspace",
+						description: "Search files and symbols in the current workspace",
+						enabledForPrompt: false,
+						inputSchema: { type: "object", properties: {} },
+					}}
+					serverName="workspace-tools"
+				/>
+			</section>
+		</main>
+	)
+}
diff --git a/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx
new file mode 100644
index 0000000000..e2f79d196c
--- /dev/null
+++ b/webview-ui/src/components/chat/__tests__/ThemeSensitiveStatus.visual.tsx
@@ -0,0 +1,41 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import { ThemeSensitiveStatusFixture } from "./ThemeSensitiveStatus.visual.fixture"
+
+for (const theme of visualThemes) {
+	test(`audits status controls in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(
+			<AppProviders>
+				<ThemeSensitiveStatusFixture />
+			</AppProviders>,
+		)
+		const surface = component.getByTestId("status-surface")
+
+		await component.getByRole("button", { name: /auto-approved commands/i }).click()
+		const allowButton = component.getByTestId("allow-command-pattern").first()
+		const denyButton = component.getByTestId("deny-command-pattern").nth(1)
+		await expect(allowButton).toHaveAttribute("aria-pressed", "true")
+		await expect(denyButton).toHaveAttribute("aria-pressed", "true")
+		await expectContrast(allowButton, {
+			background: allowButton,
+			minimum: 3,
+			label: `${theme.name} allowed command indicator`,
+		})
+		await expectContrast(denyButton, {
+			background: denyButton,
+			minimum: 3,
+			label: `${theme.name} denied command indicator`,
+		})
+		await expectContrast(component.getByText("Search files and symbols in the current workspace"), {
+			background: surface,
+			label: `${theme.name} disabled MCP description`,
+		})
+
+		await expect(component).toHaveScreenshot(`theme-sensitive-status-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-dark.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-dark.png
new file mode 100644
index 0000000000..8aa77a1ac0
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-dark.png differ
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast-light.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast-light.png
new file mode 100644
index 0000000000..bcd48238d0
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast-light.png differ
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast.png
new file mode 100644
index 0000000000..4114f1c8df
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-high-contrast.png differ
diff --git a/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-light.png b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-light.png
new file mode 100644
index 0000000000..03a2127a1f
Binary files /dev/null and b/webview-ui/src/components/chat/__tests__/__screenshots__/theme-sensitive-status-light.png differ
diff --git a/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx b/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx
index 170065d737..8328b9ce1e 100644
--- a/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx
+++ b/webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx
@@ -87,17 +87,14 @@ export const CheckpointSaved = ({
 			className="flex items-center justify-between gap-2 pt-2 pb-3"
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}>
-			<div className="flex items-center gap-2 text-blue-400 whitespace-nowrap">
+			<div className="flex items-center gap-2 text-vscode-textLink-foreground whitespace-nowrap">
 				<GitCommitVertical className="w-4" />
 				<span className="font-semibold">{t("chat:checkpoint.regular")}</span>
-				{isCurrent && <span className="text-muted">({t("chat:checkpoint.current")})</span>}
+				{isCurrent && (
+					<span className="text-vscode-descriptionForeground">({t("chat:checkpoint.current")})</span>
+				)}
 			</div>
-			<span
-				className="block w-full h-[2px] mt-[2px] text-xs"
-				style={{
-					backgroundImage:
-						"linear-gradient(90deg, rgba(0, 188, 255, .65), rgba(0, 188, 255, .65) 80%, rgba(0, 188, 255, 0) 99%)",
-				}}></span>
+			<span className="block w-full h-[2px] mt-[2px] bg-vscode-textLink-foreground text-xs" aria-hidden="true" />
 
 			{/* Keep menu visible while hovering, popover is open, or briefly after close to prevent jump */}
 			<div data-testid="checkpoint-menu-container" className={cn("h-4 -mt-2", menuVisible ? "block" : "hidden")}>
diff --git a/webview-ui/src/components/common/CodeBlock.tsx b/webview-ui/src/components/common/CodeBlock.tsx
index 042b764a9a..c9c5d85aa0 100644
--- a/webview-ui/src/components/common/CodeBlock.tsx
+++ b/webview-ui/src/components/common/CodeBlock.tsx
@@ -2,15 +2,23 @@ import { memo, useEffect, useRef, useCallback, useState } from "react"
 import styled from "styled-components"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import { getHighlighter, isLanguageLoaded, normalizeLanguage } from "@src/utils/highlighter"
-import type { ShikiTransformer } from "shiki"
+import type { BundledTheme, ShikiTransformer } from "shiki"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { Fragment, jsx, jsxs } from "react/jsx-runtime"
 import { ChevronDown, ChevronUp, Copy, Check } from "lucide-react"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { StandardTooltip } from "@/components/ui"
 
-export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
-export const WRAPPER_ALPHA = "cc" // 80% opacity
+export const CODE_BLOCK_BG_COLOR =
+	"var(--vscode-textCodeBlock-background, var(--vscode-editor-background, var(--vscode-sideBar-background, rgb(30 30 30))))"
+export const CODE_BLOCK_TOOLBAR_BG_COLOR =
+	"color-mix(in srgb, var(--vscode-editor-background, var(--vscode-sideBar-background, rgb(30 30 30))) 90%, transparent)"
+
+export function getCodeBlockTheme(bodyClass: string): BundledTheme {
+	if (bodyClass.toLowerCase().includes("high-contrast-light")) return "github-light-high-contrast"
+	if (bodyClass.toLowerCase().includes("high-contrast")) return "github-dark-high-contrast"
+	return bodyClass.toLowerCase().includes("light") ? "github-light-high-contrast" : "github-dark-high-contrast"
+}
 
 // Configuration constants
 export const WINDOW_SHADE_SETTINGS = {
@@ -42,14 +50,14 @@ interface CodeBlockProps {
 const CodeBlockButton = styled.button`
 	background: transparent;
 	border: none;
-	color: var(--vscode-foreground);
+	color: var(--vscode-icon-foreground, var(--vscode-foreground));
 	cursor: var(--copy-button-cursor, default);
 	padding: 4px;
 	margin: 0 0px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	opacity: 0.4;
+	opacity: 1;
 	border-radius: 3px;
 	pointer-events: var(--copy-button-events, none);
 	margin-left: 4px;
@@ -73,7 +81,7 @@ const CodeBlockButtonWrapper = styled.div`
 	right: var(--copy-button-right, 8px);
 	height: auto;
 	z-index: 40;
-	background: ${CODE_BLOCK_BG_COLOR}${WRAPPER_ALPHA};
+	background: ${CODE_BLOCK_TOOLBAR_BG_COLOR};
 	overflow: visible;
 	pointer-events: none;
 	opacity: var(--copy-button-opacity, 0);
@@ -181,6 +189,7 @@ const CodeBlock = memo(
 		const currentLanguage = normalizeLanguage(language)
 		const [highlightedCode, setHighlightedCode] = useState<React.ReactNode>(null)
 		const [showCollapseButton, setShowCollapseButton] = useState(true)
+		const [codeTheme, setCodeTheme] = useState(() => getCodeBlockTheme(document.body.className))
 		const codeBlockRef = useRef<HTMLDivElement>(null)
 		const preRef = useRef<HTMLDivElement>(null)
 		const copyButtonWrapperRef = useRef<HTMLDivElement>(null)
@@ -191,6 +200,19 @@ const CodeBlock = memo(
 		const collapseTimeout1Ref = useRef<NodeJS.Timeout | null>(null)
 		const collapseTimeout2Ref = useRef<NodeJS.Timeout | null>(null)
 
+		useEffect(() => {
+			const updateTheme = () => setCodeTheme(getCodeBlockTheme(document.body.className))
+			const observer = new MutationObserver(updateTheme)
+			const options: MutationObserverInit = {
+				attributes: true,
+				attributeFilter: ["class", "data-vscode-theme-id", "data-vscode-theme-kind"],
+			}
+
+			observer.observe(document.documentElement, options)
+			observer.observe(document.body, options)
+			return () => observer.disconnect()
+		}, [])
+
 		// Syntax highlighting with cached Shiki instance and mounted state management
 		useEffect(() => {
 			// Set mounted state at the beginning of this effect
@@ -216,16 +238,17 @@ const CodeBlock = memo(
 
 				const hast = await highlighter.codeToHast(source || "", {
 					lang: currentLanguage || "txt",
-					theme: document.body.className.toLowerCase().includes("light") ? "github-light" : "github-dark",
+					theme: codeTheme,
 					transformers: [
 						{
 							pre(node) {
-								node.properties.style = "padding: 0; margin: 0;"
+								node.properties.style = `padding: 0; margin: 0; background-color: ${CODE_BLOCK_BG_COLOR}; background-image: none;`
 								return node
 							},
 							code(node) {
 								// Add hljs classes for consistent styling
 								node.properties.class = `hljs language-${currentLanguage}`
+								node.properties.style = "background-color: transparent; background-image: none;"
 								return node
 							},
 							line(node) {
@@ -283,7 +306,7 @@ const CodeBlock = memo(
 					collapseTimeout2Ref.current = null
 				}
 			}
-		}, [source, currentLanguage, collapsedHeight])
+		}, [source, currentLanguage, collapsedHeight, codeTheme])
 
 		// Check if content height exceeds collapsed height whenever content changes
 		useEffect(() => {
@@ -291,9 +314,9 @@ const CodeBlock = memo(
 
 			if (codeBlock) {
 				const actualHeight = codeBlock.scrollHeight
-				setShowCollapseButton(actualHeight >= WINDOW_SHADE_SETTINGS.collapsedHeight)
+				setShowCollapseButton(actualHeight >= (collapsedHeight || WINDOW_SHADE_SETTINGS.collapsedHeight))
 			}
-		}, [highlightedCode])
+		}, [highlightedCode, collapsedHeight])
 
 		// Ref to track if user was scrolled up *before* the source update
 		// potentially changes scrollHeight
@@ -322,15 +345,18 @@ const CodeBlock = memo(
 
 		// Store whether we should scroll after highlighting completes
 		const shouldScrollAfterHighlightRef = useRef(false)
+		const previousSourceRef = useRef(source)
 
 		// Check if we should scroll when source changes
 		useEffect(() => {
-			// Only set the flag if we're at the bottom when source changes
-			if (preRef.current && source && !wasScrolledUpRef.current) {
+			const sourceChanged = previousSourceRef.current !== source
+			// Follow streaming updates when the user was already at the bottom, but keep initial content at the top.
+			if (sourceChanged && preRef.current && source && !wasScrolledUpRef.current) {
 				shouldScrollAfterHighlightRef.current = true
 			} else {
 				shouldScrollAfterHighlightRef.current = false
 			}
+			previousSourceRef.current = source
 		}, [source])
 
 		const updateCodeBlockButtonPosition = useCallback((forceHide = false) => {
@@ -622,6 +648,7 @@ const CodeBlock = memo(
 								content={t(`chat:codeblock.tooltips.${windowShade ? "expand" : "collapse"}`)}
 								side="top">
 								<CodeBlockButton
+									aria-label={t(`chat:codeblock.tooltips.${windowShade ? "expand" : "collapse"}`)}
 									onClick={() => {
 										// Get the current code block element
 										const codeBlock = codeBlockRef.current // Capture ref early
@@ -656,7 +683,7 @@ const CodeBlock = memo(
 							</StandardTooltip>
 						)}
 						<StandardTooltip content={t("chat:codeblock.tooltips.copy_code")} side="top">
-							<CodeBlockButton onClick={handleCopy}>
+							<CodeBlockButton aria-label={t("chat:codeblock.tooltips.copy_code")} onClick={handleCopy}>
 								{showCopyFeedback ? <Check size={16} /> : <Copy size={16} />}
 							</CodeBlockButton>
 						</StandardTooltip>
diff --git a/webview-ui/src/components/common/DiffView.tsx b/webview-ui/src/components/common/DiffView.tsx
index dc1c3c40c2..216feb7392 100644
--- a/webview-ui/src/components/common/DiffView.tsx
+++ b/webview-ui/src/components/common/DiffView.tsx
@@ -198,7 +198,7 @@ const DiffView = memo(({ source, filePath }: DiffViewProps) => {
 										? "bg-[var(--vscode-diffEditor-insertedTextBackground)]"
 										: line.type === "deletion"
 											? "bg-[var(--vscode-diffEditor-removedTextBackground)]"
-											: "bg-[var(--vscode-editorGroup-border)]"
+											: "bg-[var(--vscode-diffEditor-unchangedCodeBackground,var(--vscode-editor-background))]"
 
 								const contentBgClass =
 									line.type === "addition"
@@ -210,7 +210,7 @@ const DiffView = memo(({ source, filePath }: DiffViewProps) => {
 								const sign = line.type === "addition" ? "+" : line.type === "deletion" ? "-" : ""
 
 								return (
-									<tr key={globalIndex}>
+									<tr key={globalIndex} data-line-type={line.type}>
 										{/* Old line number */}
 										<td
 											className={`w-[45px] text-right pr-1 pl-1 select-none align-top whitespace-nowrap ${gutterBgClass}`}>
diff --git a/webview-ui/src/components/common/__tests__/CodeBlock.spec.tsx b/webview-ui/src/components/common/__tests__/CodeBlock.spec.tsx
index 2a9a8ff12a..1d6b0fc061 100644
--- a/webview-ui/src/components/common/__tests__/CodeBlock.spec.tsx
+++ b/webview-ui/src/components/common/__tests__/CodeBlock.spec.tsx
@@ -1,8 +1,9 @@
 // npx vitest run src/components/common/__tests__/CodeBlock.spec.tsx
 
-import { render, screen, fireEvent, act } from "@/utils/test-utils"
+import { render, screen, fireEvent, act, waitFor } from "@/utils/test-utils"
 
-import CodeBlock from "../CodeBlock"
+import CodeBlock, { getCodeBlockTheme } from "../CodeBlock"
+import { getHighlighter } from "../../../utils/highlighter"
 
 // Mock the translation context
 vi.mock("../../../i18n/TranslationContext", () => ({
@@ -32,11 +33,11 @@ vi.mock("shiki", () => ({
 vi.mock("../../../utils/highlighter", () => {
 	const mockHighlighter = {
 		codeToHtml: vi.fn().mockImplementation((code, options) => {
-			const theme = options.theme === "github-light" ? "light" : "dark"
+			const theme = options.theme.includes("light") ? "light" : "dark"
 			return `<pre><code class="hljs language-${options.lang}">${code} [${theme}-theme]</code></pre>`
 		}),
 		codeToHast: vi.fn().mockImplementation((code, options) => {
-			const theme = options.theme === "github-light" ? "light" : "dark"
+			const theme = options.theme.includes("light") ? "light" : "dark"
 			// Return a comprehensive HAST node structure that matches Shiki's output
 			// Apply transformers if provided
 			const preNode = {
@@ -90,6 +91,13 @@ vi.mock("../../../utils/clipboard", () => ({
 }))
 
 describe("CodeBlock", () => {
+	it("selects syntax themes for each VS Code contrast mode", () => {
+		expect(getCodeBlockTheme("vscode-dark")).toBe("github-dark-high-contrast")
+		expect(getCodeBlockTheme("vscode-light")).toBe("github-light-high-contrast")
+		expect(getCodeBlockTheme("vscode-high-contrast")).toBe("github-dark-high-contrast")
+		expect(getCodeBlockTheme("vscode-high-contrast-light")).toBe("github-light-high-contrast")
+	})
+
 	const mockIntersectionObserver = vi.fn()
 	const originalGetComputedStyle = window.getComputedStyle
 
@@ -115,6 +123,7 @@ describe("CodeBlock", () => {
 		if (scrollContainer) {
 			document.body.removeChild(scrollContainer)
 		}
+		document.body.removeAttribute("class")
 		window.getComputedStyle = originalGetComputedStyle
 	})
 
@@ -128,25 +137,45 @@ describe("CodeBlock", () => {
 		expect(screen.getByText(/const x = 1/)).toBeInTheDocument()
 	})
 
+	it("starts at the top and follows later source updates when already at the bottom", async () => {
+		const highlighter = await getHighlighter("typescript")
+		let resolveHighlighter: (value: typeof highlighter) => void = () => undefined
+		vi.mocked(getHighlighter).mockImplementationOnce(() => new Promise((resolve) => (resolveHighlighter = resolve)))
+
+		const { container, rerender } = render(<CodeBlock source="const first = 1;" language="typescript" />)
+		const scroller = container.querySelector('[windowshade="true"]') as HTMLDivElement
+		Object.defineProperties(scroller, {
+			scrollHeight: { configurable: true, value: 600 },
+			clientHeight: { configurable: true, value: 100 },
+		})
+
+		await act(async () => resolveHighlighter(highlighter))
+		await waitFor(() => expect(screen.getByText(/const first = 1/)).toBeInTheDocument())
+		expect(scroller.scrollTop).toBe(0)
+
+		scroller.scrollTop = 500
+		fireEvent.scroll(scroller)
+		rerender(<CodeBlock source={"const first = 1;\nconst second = 2;"} language="typescript" />)
+
+		await waitFor(() => expect(screen.getByText(/const second = 2/)).toBeInTheDocument())
+		await waitFor(() => expect(scroller.scrollTop).toBe(600))
+	})
+
 	it("handles theme switching", async () => {
 		const code = "const x = 1;"
+		document.body.className = "light"
 
 		await act(async () => {
-			const { rerender } = render(<CodeBlock source={code} language="typescript" />)
-
-			// Simulate light theme
-			document.body.className = "light"
-			rerender(<CodeBlock source={code} language="typescript" />)
+			render(<CodeBlock source={code} language="typescript" />)
 		})
 
-		expect(screen.getByText(/\[light-theme\]/)).toBeInTheDocument()
+		await waitFor(() => expect(screen.getByText(/\[light-theme\]/)).toBeInTheDocument())
 
 		await act(async () => {
 			document.body.className = "dark"
-			render(<CodeBlock source={code} language="typescript" />)
 		})
 
-		expect(screen.getByText(/\[dark-theme\]/)).toBeInTheDocument()
+		await waitFor(() => expect(screen.getByText(/\[dark-theme\]/)).toBeInTheDocument())
 	})
 
 	it("handles invalid language gracefully", async () => {
diff --git a/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx
new file mode 100644
index 0000000000..e74ca72056
--- /dev/null
+++ b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.fixture.tsx
@@ -0,0 +1,53 @@
+import React from "react"
+
+import { TerminalOutput } from "../../chat/TerminalOutput"
+import CodeBlock from "../CodeBlock"
+import DiffView from "../DiffView"
+
+const diff = `@@ -1,3 +1,3 @@
+ export function greet(name: string) {
+-  return "Hello " + name
++  return \`Hello \${name}\`
+ }`
+
+const source = Array.from(
+	{ length: 36 },
+	(_, index) => `const greeting${index + 1} = \`Hello, Zoo Code ${index + 1}\``,
+).join("\n")
+
+export function RenderedContentContrastFixture() {
+	return (
+		<main
+			data-virtuoso-scroller="true"
+			className="w-[480px] max-w-full space-y-4 overflow-y-auto rounded-lg border border-vscode-panel-border bg-vscode-editor-background p-4 text-vscode-editor-foreground">
+			<section aria-labelledby="code-title" className="space-y-2">
+				<h2 id="code-title" className="m-0 text-base font-semibold">
+					Code response
+				</h2>
+				<div data-testid="code-block">
+					<CodeBlock source={source} language="typescript" collapsedHeight={96} />
+				</div>
+			</section>
+
+			<section aria-labelledby="diff-title" className="space-y-2">
+				<h2 id="diff-title" className="m-0 text-base font-semibold">
+					Proposed edit
+				</h2>
+				<div data-testid="diff-view">
+					<DiffView source={diff} />
+				</div>
+			</section>
+
+			<section aria-labelledby="terminal-title" className="space-y-2">
+				<h2 id="terminal-title" className="m-0 text-base font-semibold">
+					Terminal output
+				</h2>
+				<div data-testid="terminal-output">
+					<TerminalOutput
+						content={"Tests passed\n\u001b[32m24 passing\u001b[0m  \u001b[33m1 skipped\u001b[0m"}
+					/>
+				</div>
+			</section>
+		</main>
+	)
+}
diff --git a/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx
new file mode 100644
index 0000000000..68497bdc7b
--- /dev/null
+++ b/webview-ui/src/components/common/__tests__/RenderedContentContrast.visual.tsx
@@ -0,0 +1,70 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import { RenderedContentContrastFixture } from "./RenderedContentContrast.visual.fixture"
+
+for (const theme of visualThemes) {
+	test(`audits rendered content in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(
+			<AppProviders>
+				<RenderedContentContrastFixture />
+			</AppProviders>,
+		)
+
+		const code = component.getByTestId("code-block").locator("code")
+		await expect(code).toContainText("Hello, Zoo Code", { timeout: 20_000 })
+		const codeScroller = code.locator("xpath=../..")
+		await expect.poll(() => codeScroller.evaluate((element) => element.scrollTop)).toBe(0)
+		const codeBackground = component.getByTestId("code-block").locator("pre")
+		const syntaxTokens = code.locator("span[style]")
+		for (let index = 0; index < (await syntaxTokens.count()); index++) {
+			await expectContrast(syntaxTokens.nth(index), {
+				background: codeBackground,
+				label: `${theme.name} syntax token ${index + 1}`,
+			})
+		}
+		const codeBlockContainer = component.getByTestId("code-block").locator(":scope > div")
+		await codeBlockContainer.scrollIntoViewIfNeeded()
+		await page.evaluate(() => window.dispatchEvent(new Event("resize")))
+		await expect(codeBlockContainer).toHaveAttribute("data-partially-visible", "true")
+		await codeBlockContainer.hover()
+		const copyButton = component.getByRole("button", { name: /copy code/i })
+		const collapseButton = component.getByRole("button", { name: /expand code block/i })
+		await expect(copyButton).toBeVisible()
+		await expect(collapseButton).toBeVisible()
+		await expect(copyButton.locator("xpath=..")).toHaveCSS("opacity", "1")
+		await expectContrast(copyButton, { minimum: 3, label: `${theme.name} copy code control` })
+		await expectContrast(collapseButton, { minimum: 3, label: `${theme.name} expand code control` })
+
+		const inserted = component.getByTestId("diff-view").locator(".diff-content-inserted").first()
+		const removed = component.getByTestId("diff-view").locator(".diff-content-removed").first()
+		await expectContrast(inserted, { background: inserted, label: `${theme.name} inserted diff text` })
+		await expectContrast(removed, { background: removed, label: `${theme.name} removed diff text` })
+		const contextRow = component.getByTestId("diff-view").locator('tr[data-line-type="context"]').first()
+		const contextGutter = contextRow.locator("td").first()
+		const contextContent = contextRow.locator("td").last()
+		await expectContrast(contextGutter, {
+			background: contextGutter,
+			label: `${theme.name} unchanged diff line number`,
+		})
+		await expectContrast(contextContent, {
+			background: contextContent,
+			label: `${theme.name} unchanged diff text`,
+		})
+		for (let index = 0; index < (await contextContent.locator("span[style]").count()); index++) {
+			await expectContrast(contextContent.locator("span[style]").nth(index), {
+				background: contextContent,
+				label: `${theme.name} unchanged diff syntax token ${index + 1}`,
+			})
+		}
+
+		const terminal = component.getByTestId("terminal-output").locator("pre")
+		await expectContrast(terminal, { background: terminal, label: `${theme.name} terminal text` })
+
+		await expect(component).toHaveScreenshot(`rendered-content-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png
new file mode 100644
index 0000000000..5a8304257f
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-dark.png differ
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png
new file mode 100644
index 0000000000..159511dbcc
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast-light.png differ
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png
new file mode 100644
index 0000000000..55cd55d171
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-high-contrast.png differ
diff --git a/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png
new file mode 100644
index 0000000000..6af820b156
Binary files /dev/null and b/webview-ui/src/components/common/__tests__/__screenshots__/rendered-content-light.png differ
diff --git a/webview-ui/src/components/history/__tests__/HistoryView.visual.tsx b/webview-ui/src/components/history/__tests__/HistoryView.visual.tsx
new file mode 100644
index 0000000000..72f663fc55
--- /dev/null
+++ b/webview-ui/src/components/history/__tests__/HistoryView.visual.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import HistoryView from "../HistoryView"
+
+for (const theme of visualThemes) {
+	test(`renders empty history in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await applyVisualTheme(page, theme)
+		const component = await mount(
+			<AppProviders initialState={{ taskHistory: [] }}>
+				<div className="h-[640px] w-[480px] bg-vscode-editor-background">
+					<HistoryView onDone={() => undefined} />
+				</div>
+			</AppProviders>,
+		)
+
+		const screen = component.locator(".bg-vscode-editor-background").first()
+		const heading = component.getByRole("heading", { name: /history/i })
+		await expect(heading).toBeVisible()
+		await expectContrast(heading, { background: screen, label: `${theme.name} history heading` })
+
+		await expect(component).toHaveScreenshot(`history-empty-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-dark.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-dark.png
new file mode 100644
index 0000000000..6ba8885ca7
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-dark.png differ
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast-light.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast-light.png
new file mode 100644
index 0000000000..fbc57e12ca
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast-light.png differ
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast.png
new file mode 100644
index 0000000000..1d164a4d60
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-high-contrast.png differ
diff --git a/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-light.png b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-light.png
new file mode 100644
index 0000000000..291191fd97
Binary files /dev/null and b/webview-ui/src/components/history/__tests__/__screenshots__/history-empty-light.png differ
diff --git a/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx b/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
index eaf3549781..7556630c7b 100644
--- a/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
+++ b/webview-ui/src/components/marketplace/components/MarketplaceInstallModal.tsx
@@ -239,7 +239,12 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 					// Post-installation options
 					<div className="space-y-4 py-2">
 						<div className="text-center space-y-4">
-							<div className="text-green-500 text-lg">✓ {t("marketplace:install.installed")}</div>
+							<div className="text-vscode-foreground text-lg">
+								<span className="text-vscode-charts-green" aria-hidden="true">
+									✓
+								</span>{" "}
+								{t("marketplace:install.installed")}
+							</div>
 							<p className="text-sm text-muted-foreground">
 								{item.type === "mcp"
 									? t("marketplace:install.whatNextMcp")
@@ -264,7 +269,7 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 										disabled={!hasWorkspace}
 										className="rounded-full"
 									/>
-									<span className={!hasWorkspace ? "opacity-50" : ""}>
+									<span className={!hasWorkspace ? "text-vscode-descriptionForeground" : ""}>
 										{t("marketplace:install.project")}
 									</span>
 								</label>
@@ -352,7 +357,7 @@ export const MarketplaceInstallModal: React.FC<MarketplaceInstallModalProps> = (
 						)}
 						{/* Validation Error */}
 						{validationError && (
-							<div className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded p-2">
+							<div className="text-sm text-vscode-errorForeground bg-vscode-editor-background border border-vscode-errorForeground rounded p-2">
 								{validationError}
 							</div>
 						)}
diff --git a/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx b/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
index e7cb1f70e3..3b8df52176 100644
--- a/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
+++ b/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
@@ -159,7 +159,7 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({ item,
 					<div className="relative flex flex-wrap gap-1 my-2">
 						{/* Installation status badge on the left */}
 						{isInstalled && (
-							<span className="text-xs px-2 py-0.5 rounded-sm h-5 flex items-center bg-green-600/20 text-green-400 border border-green-600/30 shrink-0">
+							<span className="text-xs px-2 py-0.5 rounded-sm h-5 flex items-center bg-vscode-editor-background text-vscode-foreground border border-vscode-charts-green shrink-0">
 								{t("marketplace:items.card.installed")}
 							</span>
 						)}
diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx
index 5dea579193..44f3c24f4c 100644
--- a/webview-ui/src/components/mcp/McpToolRow.tsx
+++ b/webview-ui/src/components/mcp/McpToolRow.tsx
@@ -52,14 +52,12 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatCo
 						className={`codicon codicon-symbol-method mr-2 flex-shrink-0 ${
 							isToolEnabled
 								? "text-vscode-symbolIcon-methodForeground"
-								: "text-vscode-descriptionForeground opacity-60"
+								: "text-vscode-descriptionForeground"
 						}`}></span>
 					<StandardTooltip content={tool.name}>
 						<span
 							className={`font-medium truncate ${
-								isToolEnabled
-									? "text-vscode-foreground"
-									: "text-vscode-descriptionForeground opacity-60"
+								isToolEnabled ? "text-vscode-foreground" : "text-vscode-descriptionForeground"
 							}`}>
 							{tool.name}
 						</span>
@@ -98,19 +96,14 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatCo
 				)}
 			</div>
 			{tool.description && (
-				<div
-					className={`mt-1 text-xs text-vscode-descriptionForeground ${
-						isToolEnabled ? "opacity-80" : "opacity-40"
-					}`}>
-					{tool.description}
-				</div>
+				<div className="mt-1 text-xs text-vscode-descriptionForeground">{tool.description}</div>
 			)}
 			{isToolEnabled &&
 				tool.inputSchema &&
 				"properties" in tool.inputSchema &&
 				Object.keys(tool.inputSchema.properties as Record<string, any>).length > 0 && (
 					<div className="mt-2 text-xs border border-vscode-panel-border rounded p-2">
-						<div className="mb-1 text-[11px] uppercase opacity-80 text-vscode-descriptionForeground">
+						<div className="mb-1 text-[11px] uppercase text-vscode-descriptionForeground">
 							{t("mcp:tool.parameters")}
 						</div>
 						{Object.entries(tool.inputSchema.properties as Record<string, any>).map(
@@ -127,7 +120,7 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp, isInChatCo
 											{paramName}
 											{isRequired && <span className="text-vscode-errorForeground">*</span>}
 										</code>
-										<span className="opacity-80 break-words text-vscode-descriptionForeground">
+										<span className="break-words text-vscode-descriptionForeground">
 											{schema.description || t("mcp:tool.noDescription")}
 										</span>
 									</div>
diff --git a/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx b/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx
index f686a23f00..156ecb0653 100644
--- a/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx
+++ b/webview-ui/src/components/mcp/__tests__/McpToolRow.spec.tsx
@@ -248,7 +248,7 @@ describe("McpToolRow", () => {
 		expect(screen.getByText("First parameter")).toBeInTheDocument()
 	})
 
-	it("grays out tool name and description when tool is disabled", () => {
+	it("uses readable secondary text when tool is disabled", () => {
 		const disabledTool = {
 			...mockTool,
 			enabledForPrompt: false,
@@ -259,11 +259,10 @@ describe("McpToolRow", () => {
 		const toolName = screen.getByText("test-tool")
 		const toolDescription = screen.getByText("A disabled tool")
 
-		// Check that the tool name has the grayed out classes
-		expect(toolName).toHaveClass("text-vscode-descriptionForeground", "opacity-60")
-
-		// Check that the description has reduced opacity
-		expect(toolDescription).toHaveClass("opacity-40")
+		expect(toolName).toHaveClass("text-vscode-descriptionForeground")
+		expect(toolDescription).toHaveClass("text-vscode-descriptionForeground")
+		expect(toolName.className).not.toMatch(/opacity-/)
+		expect(toolDescription.className).not.toMatch(/opacity-/)
 	})
 
 	it("shows normal styling for tool name and description when tool is enabled", () => {
@@ -277,12 +276,9 @@ describe("McpToolRow", () => {
 		const toolName = screen.getByText("test-tool")
 		const toolDescription = screen.getByText("An enabled tool")
 
-		// Check that the tool name has normal styling
 		expect(toolName).toHaveClass("text-vscode-foreground")
-		expect(toolName).not.toHaveClass("text-vscode-descriptionForeground", "opacity-60")
-
-		// Check that the description has normal opacity
-		expect(toolDescription).toHaveClass("opacity-80")
-		expect(toolDescription).not.toHaveClass("opacity-40")
+		expect(toolName).not.toHaveClass("text-vscode-descriptionForeground")
+		expect(toolDescription).toHaveClass("text-vscode-descriptionForeground")
+		expect(toolDescription.className).not.toMatch(/opacity-/)
 	})
 })
diff --git a/webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.visual.fixture.tsx b/webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.visual.fixture.tsx
index a84a3a056f..431bdd722f 100644
--- a/webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.visual.fixture.tsx
+++ b/webview-ui/src/components/settings/providers/__tests__/OpenAICompatible.visual.fixture.tsx
@@ -51,7 +51,7 @@ export const OpenAICompatibleAzureFixture = () => (
 			}}>
 			<QueryClientProvider client={queryClient}>
 				<TooltipProvider>
-					<div className="h-[295px] w-[480px] overflow-hidden bg-vscode-editor-background p-4 text-vscode-foreground">
+					<div className="w-[480px] max-w-full bg-vscode-editor-background p-4 text-vscode-foreground">
 						<OpenAICompatible
 							apiConfiguration={apiConfiguration}
 							setApiConfigurationField={() => {}}
diff --git a/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png b/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png
index e61ee8406d..30bf92cace 100644
Binary files a/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png and b/webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-compatible-azure-guidance-dark.png differ
diff --git a/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.fixture.tsx b/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.fixture.tsx
index f5d6629c4d..2b4285d8c9 100644
--- a/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.fixture.tsx
+++ b/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.fixture.tsx
@@ -33,7 +33,7 @@ export function AccessibilityContrastGallery() {
 					<IconButton iconClass="codicon-settings-gear" title="Chat settings" tooltip={false} />
 				</div>
 				<Textarea aria-label="Task message" defaultValue="Audit contrast across the webview" rows={2} />
-				<div className="flex items-center justify-between gap-3">
+				<div data-testid="chat-actions" className="flex items-center justify-between gap-3">
 					<label className="flex items-center gap-2 text-sm">
 						<Checkbox aria-label="Include context" variant="description" defaultChecked />
 						Include workspace context
@@ -79,7 +79,7 @@ export function AccessibilityContrastGallery() {
 				<p data-testid="error-message" className="m-0 text-sm text-vscode-errorForeground">
 					API key is required before this provider can be used.
 				</p>
-				<div className="flex justify-end gap-2">
+				<div data-testid="settings-actions" className="flex flex-wrap justify-end gap-2">
 					<Button variant="outline">Reset</Button>
 					<Button variant="primary">Save settings</Button>
 					<Button disabled>Unavailable</Button>
diff --git a/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx b/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx
index 4d11db7272..2e97b6c5dc 100644
--- a/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx
+++ b/webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx
@@ -115,6 +115,66 @@ for (const theme of visualThemes) {
 			minimum: 3,
 			label: `${theme.name} outline button boundary`,
 		})
+		const layout = await gallery.evaluate((element) => {
+			const contentBox = (target: Element) => {
+				const rect = target.getBoundingClientRect()
+				const styles = getComputedStyle(target)
+				return {
+					left: rect.left + Number.parseFloat(styles.borderLeftWidth) + Number.parseFloat(styles.paddingLeft),
+					right:
+						rect.right -
+						Number.parseFloat(styles.borderRightWidth) -
+						Number.parseFloat(styles.paddingRight),
+				}
+			}
+			const rect = element.getBoundingClientRect()
+			const root = document.querySelector("#root") as HTMLElement
+			return {
+				viewportWidth: window.innerWidth,
+				rootContent: contentBox(root),
+				galleryRect: { left: rect.left, right: rect.right },
+				galleryContent: contentBox(element),
+				buttons: Array.from(element.querySelectorAll("button")).map((button) => {
+					const buttonRect = button.getBoundingClientRect()
+					const styles = getComputedStyle(button)
+					return {
+						left: buttonRect.left,
+						right: buttonRect.right,
+						clientWidth: button.clientWidth,
+						scrollWidth: button.scrollWidth,
+						leftPadding: Number.parseFloat(styles.paddingLeft),
+						rightPadding: Number.parseFloat(styles.paddingRight),
+					}
+				}),
+				actionRows: ["chat-actions", "settings-actions"].map((testId) => {
+					const row = element.querySelector(`[data-testid="${testId}"]`) as HTMLElement
+					const rowRect = row.getBoundingClientRect()
+					const buttons = row.querySelectorAll("button")
+					return {
+						left: rowRect.left,
+						right: rowRect.right,
+						clientWidth: row.clientWidth,
+						scrollWidth: row.scrollWidth,
+						firstButtonLeft: buttons[0].getBoundingClientRect().left,
+						lastButtonRight: buttons[buttons.length - 1].getBoundingClientRect().right,
+					}
+				}),
+			}
+		})
+		expect(layout.galleryRect.left).toBeGreaterThanOrEqual(layout.rootContent.left - 0.5)
+		expect(layout.galleryRect.right).toBeLessThanOrEqual(layout.rootContent.right + 0.5)
+		expect(layout.galleryRect.right).toBeLessThanOrEqual(layout.viewportWidth)
+		for (const button of layout.buttons) {
+			expect(button.scrollWidth).toBeLessThanOrEqual(button.clientWidth)
+			expect(Math.abs(button.leftPadding - button.rightPadding)).toBeLessThanOrEqual(0.5)
+			expect(button.left).toBeGreaterThanOrEqual(layout.galleryContent.left - 0.5)
+			expect(button.right).toBeLessThanOrEqual(layout.galleryContent.right + 0.5)
+		}
+		for (const row of layout.actionRows) {
+			expect(row.scrollWidth).toBeLessThanOrEqual(row.clientWidth)
+			expect(row.firstButtonLeft).toBeGreaterThanOrEqual(row.left - 0.5)
+			expect(row.lastButtonRight).toBeLessThanOrEqual(row.right + 0.5)
+		}
 		await expect(
 			expectContrast(component.getByTestId("unsupported-gradient"), {
 				label: `${theme.name} unsupported gradient`,
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-dark.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-dark.png
index 6dba79c641..0eae1a53e4 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-dark.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-dark.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast-light.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast-light.png
index 2bd9bd5a32..6ac1dee56f 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast-light.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast-light.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast.png
index 540dfba16f..f5e61191a0 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-high-contrast.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-light.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-light.png
index f97cd099f3..fe01e8c7cb 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-light.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-light.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-dark.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-dark.png
index adc2a3b20e..9259159185 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-dark.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-dark.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast-light.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast-light.png
index cd8a1aee82..ba61343afc 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast-light.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast-light.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast.png
index 6d7678a4aa..7c3b874c64 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-high-contrast.png differ
diff --git a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-light.png b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-light.png
index d88fb3f3ee..064871df71 100644
Binary files a/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-light.png and b/webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-resting-light.png differ
diff --git a/webview-ui/src/components/ui/button.tsx b/webview-ui/src/components/ui/button.tsx
index f9cd380060..a32f90b1f2 100644
--- a/webview-ui/src/components/ui/button.tsx
+++ b/webview-ui/src/components/ui/button.tsx
@@ -5,11 +5,12 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-80",
+	"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer active:opacity-80",
 	{
 		variants: {
 			variant: {
-				primary: "bg-primary text-primary-foreground hover:bg-primary/70",
+				primary:
+					"border border-[var(--vscode-button-border,var(--vscode-contrastBorder,transparent))] bg-primary text-primary-foreground hover:bg-primary/70",
 				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/70",
 				ghost: "hover:bg-accent hover:text-accent-foreground",
 				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
diff --git a/webview-ui/src/components/welcome/WelcomeLanding.tsx b/webview-ui/src/components/welcome/WelcomeLanding.tsx
new file mode 100644
index 0000000000..e699f1dc79
--- /dev/null
+++ b/webview-ui/src/components/welcome/WelcomeLanding.tsx
@@ -0,0 +1,45 @@
+import { Trans } from "react-i18next"
+
+import { Button } from "@src/components/ui"
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+
+import { Tab, TabContent } from "../common/Tab"
+import RooHero from "./RooHero"
+
+interface WelcomeLandingProps {
+	onGetStarted: () => void
+	onImportSettings: () => void
+}
+
+export function WelcomeLanding({ onGetStarted, onImportSettings }: WelcomeLandingProps) {
+	const { t } = useAppTranslation()
+
+	return (
+		<Tab>
+			<TabContent className="relative flex flex-col gap-4 p-6 justify-center">
+				<RooHero />
+				<h2 className="mt-0 mb-0 text-xl">{t("welcome:landing.greeting")}</h2>
+
+				<div className="space-y-4 leading-normal">
+					<p className="text-base text-vscode-foreground">
+						<Trans i18nKey="welcome:landing.introduction" />
+					</p>
+				</div>
+
+				<div className="mt-2 flex gap-2 items-center">
+					<Button onClick={onGetStarted} variant="primary">
+						{t("welcome:providerSignup.heading")}
+					</Button>
+				</div>
+
+				<div className="absolute bottom-6 left-6">
+					<button
+						onClick={onImportSettings}
+						className="cursor-pointer bg-transparent border-none p-0 text-vscode-foreground hover:underline">
+						{t("welcome:importSettings")}
+					</button>
+				</div>
+			</TabContent>
+		</Tab>
+	)
+}
diff --git a/webview-ui/src/components/welcome/WelcomeViewProvider.tsx b/webview-ui/src/components/welcome/WelcomeViewProvider.tsx
index 26033739d5..5a77a6c111 100644
--- a/webview-ui/src/components/welcome/WelcomeViewProvider.tsx
+++ b/webview-ui/src/components/welcome/WelcomeViewProvider.tsx
@@ -13,7 +13,7 @@ import { Button } from "@src/components/ui"
 import ApiOptions from "../settings/ApiOptions"
 import { Tab, TabContent } from "../common/Tab"
 
-import RooHero from "./RooHero"
+import { WelcomeLanding } from "./WelcomeLanding"
 
 const DEFAULT_WELCOME_API_CONFIGURATION: ProviderSettings = {
 	apiProvider: "openrouter",
@@ -94,32 +94,10 @@ const WelcomeViewProvider = () => {
 
 	if (!showProviderSetup) {
 		return (
-			<Tab>
-				<TabContent className="relative flex flex-col gap-4 p-6 justify-center">
-					<RooHero />
-					<h2 className="mt-0 mb-0 text-xl">{t("welcome:landing.greeting")}</h2>
-
-					<div className="space-y-4 leading-normal">
-						<p className="text-base text-vscode-foreground">
-							<Trans i18nKey="welcome:landing.introduction" />
-						</p>
-					</div>
-
-					<div className="mt-2 flex gap-2 items-center">
-						<Button onClick={handleGetStarted} variant="primary">
-							{t("welcome:providerSignup.heading")}
-						</Button>
-					</div>
-
-					<div className="absolute bottom-6 left-6">
-						<button
-							onClick={() => vscode.postMessage({ type: "importSettings" })}
-							className="cursor-pointer bg-transparent border-none p-0 text-vscode-foreground hover:underline">
-							{t("welcome:importSettings")}
-						</button>
-					</div>
-				</TabContent>
-			</Tab>
+			<WelcomeLanding
+				onGetStarted={handleGetStarted}
+				onImportSettings={() => vscode.postMessage({ type: "importSettings" })}
+			/>
 		)
 	}
 
diff --git a/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx b/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx
new file mode 100644
index 0000000000..7726a64962
--- /dev/null
+++ b/webview-ui/src/components/welcome/__tests__/WelcomeViewProvider.visual.tsx
@@ -0,0 +1,117 @@
+import React from "react"
+import type { Locator } from "@playwright/test"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { AppProviders } from "../../../../playwright/AppProviders"
+import { expectContrast } from "../../../../playwright/contrast"
+import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
+import { WelcomeLanding } from "../WelcomeLanding"
+
+const textSpacingStyles = `
+	/* WCAG 1.4.12 text-spacing override values. */
+	* {
+		line-height: 1.5 !important;
+		letter-spacing: 0.12em !important;
+		word-spacing: 0.16em !important;
+	}
+
+	p {
+		margin-bottom: 2em !important;
+	}
+`
+
+async function expectScreenContentToFit(screen: Locator) {
+	const layout = await screen.evaluate((element) => {
+		const screenRect = element.getBoundingClientRect()
+		const content = Array.from(element.querySelectorAll("h2, p, button")).map((item) => {
+			const rect = item.getBoundingClientRect()
+			return {
+				left: rect.left,
+				right: rect.right,
+				clientWidth: item.clientWidth,
+				scrollWidth: item.scrollWidth,
+				clientHeight: item.clientHeight,
+				scrollHeight: item.scrollHeight,
+			}
+		})
+
+		return {
+			clientWidth: element.clientWidth,
+			scrollWidth: element.scrollWidth,
+			left: screenRect.left,
+			right: screenRect.right,
+			content,
+		}
+	})
+
+	expect(layout.scrollWidth).toBeLessThanOrEqual(layout.clientWidth)
+	for (const item of layout.content) {
+		expect(item.left).toBeGreaterThanOrEqual(layout.left)
+		expect(item.right).toBeLessThanOrEqual(layout.right)
+		expect(item.scrollWidth).toBeLessThanOrEqual(item.clientWidth)
+		expect(item.scrollHeight).toBeLessThanOrEqual(item.clientHeight)
+	}
+}
+
+async function mountWelcomeScreen(mount: (component: React.ReactElement) => Promise<Locator>) {
+	const component = await mount(
+		<AppProviders initialState={{ apiConfiguration: {} }}>
+			<WelcomeLanding onGetStarted={() => undefined} onImportSettings={() => undefined} />
+		</AppProviders>,
+	)
+	return { component, screen: component.locator(".fixed.inset-0") }
+}
+
+for (const theme of visualThemes) {
+	test(`renders the full welcome screen in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await page.setViewportSize({ width: 480, height: 640 })
+		await applyVisualTheme(page, theme)
+		const { component, screen } = await mountWelcomeScreen(mount)
+
+		const heading = component.getByRole("heading", { level: 2 })
+		const action = component.getByRole("button", { name: /provider/i }).first()
+		await expect(heading).toBeVisible()
+		await expectContrast(heading, { background: screen, label: `${theme.name} welcome heading` })
+		await expectContrast(action, {
+			background: action,
+			label: `${theme.name} welcome action`,
+		})
+		if (theme.name.startsWith("high-contrast")) {
+			await expect(action).toHaveCSS("border-top-width", "1px")
+			await expect(action).toHaveCSS("border-top-style", "solid")
+			await expectContrast(action, {
+				background: screen,
+				foregroundProperty: "border-color",
+				minimum: 3,
+				label: `${theme.name} welcome action boundary`,
+			})
+		}
+
+		await expect(screen).toHaveScreenshot(`welcome-screen-${theme.name}.png`)
+	})
+
+	test(`reflows the welcome screen at 320px in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await page.setViewportSize({ width: 320, height: 640 })
+		await applyVisualTheme(page, theme)
+		const { component, screen } = await mountWelcomeScreen(mount)
+
+		await expect(component.getByRole("heading", { level: 2 })).toBeVisible()
+		await expect(component.getByRole("button", { name: /provider/i }).first()).toBeVisible()
+		await expect(component.getByRole("button", { name: /import/i })).toBeVisible()
+		await expectScreenContentToFit(screen)
+		await expect(screen).toHaveScreenshot(`welcome-screen-reflow-${theme.name}.png`)
+	})
+
+	test(`supports WCAG text spacing in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await page.setViewportSize({ width: 480, height: 640 })
+		await applyVisualTheme(page, theme)
+		const { component, screen } = await mountWelcomeScreen(mount)
+		await page.addStyleTag({ content: textSpacingStyles })
+
+		await expect(component.getByRole("heading", { level: 2 })).toBeVisible()
+		await expect(component.getByRole("button", { name: /provider/i }).first()).toBeVisible()
+		await expect(component.getByRole("button", { name: /import/i })).toBeVisible()
+		await expectScreenContentToFit(screen)
+		await expect(screen).toHaveScreenshot(`welcome-screen-text-spacing-${theme.name}.png`)
+	})
+}
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png
new file mode 100644
index 0000000000..d165267136
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-dark.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png
new file mode 100644
index 0000000000..b54058e7d0
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast-light.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png
new file mode 100644
index 0000000000..d5c70f5dbb
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-high-contrast.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png
new file mode 100644
index 0000000000..10e7053622
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-light.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-dark.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-dark.png
new file mode 100644
index 0000000000..5769c98828
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-dark.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-high-contrast-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-high-contrast-light.png
new file mode 100644
index 0000000000..1813e48c1a
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-high-contrast-light.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-high-contrast.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-high-contrast.png
new file mode 100644
index 0000000000..157463b61a
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-high-contrast.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-light.png
new file mode 100644
index 0000000000..e00f76f160
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-reflow-light.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-dark.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-dark.png
new file mode 100644
index 0000000000..e48ca07590
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-dark.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-high-contrast-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-high-contrast-light.png
new file mode 100644
index 0000000000..d2b16273fc
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-high-contrast-light.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-high-contrast.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-high-contrast.png
new file mode 100644
index 0000000000..50bcb02980
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-high-contrast.png differ
diff --git a/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-light.png b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-light.png
new file mode 100644
index 0000000000..8d2cbebb18
Binary files /dev/null and b/webview-ui/src/components/welcome/__tests__/__screenshots__/welcome-screen-text-spacing-light.png differ
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index c37ca06bcd..bccbdf7031 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -558,7 +558,7 @@ input[cmdk-input]:focus {
 	background-color: color-mix(in srgb, var(--vscode-diffEditor-removedTextBackground) 70%, transparent);
 }
 .diff-content-context {
-	background-color: color-mix(in srgb, var(--vscode-editorGroup-border) 100%, transparent);
+	background-color: var(--vscode-diffEditor-unchangedCodeBackground, var(--vscode-editor-background));
 }
 
 @keyframes ground-slide {