Fixes theming not being applied to graph

src/plus/webviews/graph/protocol.ts

@@ -94,8 +94,10 @@ export interface GraphColumnConfig {
 
 export type GraphColumnName = GraphZoneType;
 
+export type InternalNotificationType = 'didChangeTheme';
+
 export interface UpdateStateCallback {
-	(state: State, type?: IpcNotificationType<any>): void;
+	(state: State, type?: IpcNotificationType<any> | InternalNotificationType, themingChanged?: boolean): void;
 }
 
 // Commands

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

@@ -22,6 +22,7 @@ import type {
 	GraphRepository,
 	GraphSearchResults,
 	GraphSearchResultsError,
+	InternalNotificationType,
 	State,
 	UpdateStateCallback,
 } from '../../../../plus/webviews/graph/protocol';
@@ -186,8 +187,21 @@ export function GraphWrapper({
 	const ensuredIds = useRef<Set<string>>(new Set());
 	const ensuredSkippedIds = useRef<Set<string>>(new Set());
 
-	function transformData(state: State, type?: IpcNotificationType<any>) {
+	function updateState(
+		state: State,
+		type?: IpcNotificationType<any> | InternalNotificationType,
+		themingChanged?: boolean,
+	) {
+		if (themingChanged) {
+			setStyleProps(state.theming);
+		}
+
 		switch (type) {
+			case 'didChangeTheme':
+				if (!themingChanged) {
+					setStyleProps(state.theming);
+				}
+				break;
 			case DidChangeAvatarsNotificationType:
 				setAvatars(state.avatars);
 				break;
@@ -224,7 +238,9 @@ export function GraphWrapper({
 				break;
 			default: {
 				setIsAccessAllowed(state.allowed ?? false);
-				setStyleProps(state.theming);
+				if (!themingChanged) {
+					setStyleProps(state.theming);
+				}
 				setColumns(state.columns);
 				setRows(state.rows ?? []);
 				setWorkingTreeStats(state.workingTreeStats ?? { added: 0, modified: 0, deleted: 0 });
@@ -250,7 +266,7 @@ export function GraphWrapper({
 		}
 	}
 
-	useEffect(() => subscriber?.(transformData), []);
+	useEffect(() => subscriber?.(updateState), []);
 
 	useLayoutEffect(() => {
 		if (mainRef.current === null) return;

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

@@ -9,6 +9,7 @@ import type {
 	GraphColumnConfig,
 	GraphColumnName,
 	GraphRepository,
+	InternalNotificationType,
 	State,
 	UpdateStateCallback,
 } from '../../../../plus/webviews/graph/protocol';
@@ -66,6 +67,8 @@ export class GraphApp extends App {
 
 		this.log(`${this.appName}.onBind`);
 
+		this.ensureTheming(this.state);
+
 		const $root = document.getElementById('root');
 		if ($root != null) {
 			render(
@@ -258,20 +261,26 @@ export class GraphApp extends App {
 
 	protected override onThemeUpdated() {
 		this.state.theming = undefined;
-		this.setState(this.state);
+		this.setState(this.state, 'didChangeTheme');
 	}
 
-	protected override setState(state: State, type?: IpcNotificationType<any>) {
+	protected override setState(state: State, type?: IpcNotificationType<any> | InternalNotificationType) {
 		this.log(`${this.appName}.setState`);
-		if (state.theming == null) {
-			state.theming = this.getGraphTheming();
-		}
+		const themingChanged = this.ensureTheming(state);
 
 		// Avoid calling the base for now, since we aren't using the vscode state
 		this.state = state;
 		// super.setState(state);
 
-		this.callback?.(this.state, type);
+		this.callback?.(this.state, type, themingChanged);
+	}
+
+	private ensureTheming(state: State): boolean {
+		if (state.theming == null) {
+			state.theming = this.getGraphTheming();
+			return true;
+		}
+		return false;
 	}
 
 	private getGraphTheming(): { cssVariables: CssVariables; themeOpacityFactor: number } {

src/webviews/apps/shared/appBase.ts

@@ -3,7 +3,7 @@ import type { IpcCommandType, IpcMessage, IpcMessageParams, IpcNotificationType
 import { onIpc, WebviewReadyCommandType } from '../../protocol';
 import { DOM } from './dom';
 import type { Disposable } from './events';
-import { initializeAndWatchThemeColors } from './theme';
+import { initializeAndWatchThemeColors, onDidChangeTheme } from './theme';
 
 interface VsCodeApi {
 	postMessage(msg: unknown): void;
@@ -38,7 +38,11 @@ export abstract class App {
 		// this.log(`${this.appName}(${this.state ? JSON.stringify(this.state) : ''})`);
 
 		this._api = acquireVsCodeApi();
-		initializeAndWatchThemeColors(this.onThemeUpdated?.bind(this));
+
+		if (this.onThemeUpdated != null) {
+			onDidChangeTheme(this.onThemeUpdated, this);
+		}
+		initializeAndWatchThemeColors();
 
 		requestAnimationFrame(() => {
 			this.log(`${this.appName}.initializing`);

src/webviews/apps/shared/theme.ts

@@ -1,7 +1,12 @@
 /*global window document MutationObserver*/
 import { darken, lighten, opacity } from './colors';
+import type { Event } from './events';
+import { Emitter } from './events';
 
-export function initializeAndWatchThemeColors(callback?: () => void) {
+const _onDidChangeTheme = new Emitter<void>();
+export const onDidChangeTheme: Event<void> = _onDidChangeTheme.event;
+
+export function initializeAndWatchThemeColors() {
 	const onColorThemeChanged = (mutations?: MutationRecord[]) => {
 		const body = document.body;
 		const computedStyle = window.getComputedStyle(body);
@@ -138,7 +143,7 @@ export function initializeAndWatchThemeColors(callback?: () => void) {
 		bodyStyle.setProperty('--color-alert-foreground', 'var(--vscode-input-foreground)');
 
 		if (mutations != null) {
-			callback?.();
+			_onDidChangeTheme.fire();
 		}
 	};