From 47a96d8a199c0942aaf2cdb15ab933d2d49e8aff Mon Sep 17 00:00:00 2001
From: Ramin Tadayon <ramin.tadayon@gitkraken.com>
Date: Tue, 4 Oct 2022 12:35:39 +0900
Subject: [PATCH] Send theme colors for selected and hovered rows

---
 src/webviews/apps/plus/graph/graph.tsx | 7 +++++++
 src/webviews/apps/shared/theme.ts      | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/webviews/apps/plus/graph/graph.tsx b/src/webviews/apps/plus/graph/graph.tsx
index 27c5b16..aeaac05 100644
--- a/src/webviews/apps/plus/graph/graph.tsx
+++ b/src/webviews/apps/plus/graph/graph.tsx
@@ -308,6 +308,8 @@ export class GraphApp extends App<State> {
 			i++;
 		}
 
+		const isHighContrastTheme = document.body.classList.contains('vscode-high-contrast');
+
 		return {
 			cssVariables: {
 				'--app__bg0': bgColor,
@@ -315,12 +317,17 @@ export class GraphApp extends App<State> {
 				'--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,
diff --git a/src/webviews/apps/shared/theme.ts b/src/webviews/apps/shared/theme.ts
index 9b738d6..e58ddf5 100644
--- a/src/webviews/apps/shared/theme.ts
+++ b/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();