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 { 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, 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();