Send theme colors for selected and hovered rows

src/webviews/apps/plus/graph/graph.tsx

@@ -308,6 +308,8 @@ export class GraphApp extends App {
 			i++;
 		}
 
+		const isHighContrastTheme = document.body.classList.contains('vscode-high-contrast');
+
 		return {
 			cssVariables: {
 				'--app__bg0': bgColor,
@@ -315,12 +317,17 @@ export class GraphApp extends App {
 				'--panel__bg1': computedStyle.getPropertyValue('--graph-panel-bg2'),
 				'--section-border': computedStyle.getPropertyValue('--graph-panel-bg2'),
 				'--text-selected': computedStyle.getPropertyValue('--color-foreground'),
+				'--text-selected-row': computedStyle.getPropertyValue('--graph-text-selected-row'),
 				'--text-normal': computedStyle.getPropertyValue('--color-foreground--85'),
 				'--text-secondary': computedStyle.getPropertyValue('--color-foreground--65'),
 				'--text-disabled': computedStyle.getPropertyValue('--color-foreground--50'),
 				'--text-accent': computedStyle.getPropertyValue('--color-link-foreground'),
 				'--text-inverse': computedStyle.getPropertyValue('--vscode-input-background'),
 				'--text-bright': computedStyle.getPropertyValue('--vscode-input-background'),
+				'--hover-row': computedStyle.getPropertyValue('--graph-hover-row'),
+				'--hover-row-border': isHighContrastTheme ? `1px dashed ${computedStyle.getPropertyValue('--graph-contrast-border-color')}` : 'none',
+				'--selected-row': computedStyle.getPropertyValue('--graph-selected-row'),
+				'--selected-row-border': isHighContrastTheme ? `1px solid ${computedStyle.getPropertyValue('--graph-contrast-border-color')}` : 'none',
 				...mixedGraphColors,
 			},
 			themeOpacityFactor: parseInt(computedStyle.getPropertyValue('--graph-theme-opacity-factor')) || 1,

src/webviews/apps/shared/theme.ts

@@ -113,6 +113,14 @@ export function initializeAndWatchThemeColors() {
 			isLightTheme ? darken(backgroundColor, 10) : lighten(backgroundColor, 10),
 		);
 		bodyStyle.setProperty('--graph-theme-opacity-factor', isLightTheme ? '0.5' : '1');
+		color = computedStyle.getPropertyValue('--vscode-list-focusOutline').trim();
+		bodyStyle.setProperty('--graph-contrast-border-color', color);
+		color = computedStyle.getPropertyValue('--vscode-list-activeSelectionBackground').trim();
+		bodyStyle.setProperty('--graph-selected-row', color);
+		color = computedStyle.getPropertyValue('--vscode-list-hoverBackground').trim();
+		bodyStyle.setProperty('--graph-hover-row', color);
+		color = computedStyle.getPropertyValue('--vscode-list-activeSelectionForeground').trim();
+		bodyStyle.setProperty('--graph-text-selected-row', color);
 
 		// alert colors
 		color = computedStyle.getPropertyValue('--vscode-inputValidation-infoBackground').trim();