Fix theme change of behavior editor

src/common/lightDarkSwitch.ts

@@ -1,12 +1,22 @@
-import { injectable } from "inversify";
+import { injectable, multiInject } from "inversify";
 import "./lightDarkSwitch.css";
 import { AbstractUIExtension } from "sprotty";
 
+export const SWITCHABLE = Symbol("Switchable");
+
+export interface Switchable {
+    switchTheme(useDark: boolean): void;
+}
+
 @injectable()
 export class LightDarkSwitch extends AbstractUIExtension {
     static readonly ID = "light-dark-switch";
     static useDarkMode = false;
 
+    constructor(@multiInject(SWITCHABLE) protected switchables: Switchable[]) {
+        super();
+    }
+
     id(): string {
         return LightDarkSwitch.ID;
     }
@@ -41,5 +51,6 @@ export class LightDarkSwitch extends AbstractUIExtension {
         const value = useDark ? "dark" : "light";
         rootElement.setAttribute("data-theme", value);
         sprottyElement.setAttribute("data-theme", value);
+        this.switchables.forEach((s) => s.switchTheme(useDark));
     }
 }

src/features/dfdElements/di.config.ts

@@ -23,6 +23,7 @@ import { DfdNodeAnnotationUI, DfdNodeAnnotationUIMouseListener } from "./nodeAnn
 import { DFDBehaviorRefactorer, RefactorInputNameInDFDBehaviorCommand } from "./behaviorRefactorer";
 
 import "./elementStyles.css";
+import { SWITCHABLE } from "../../common/lightDarkSwitch";
 
 export const dfdElementsModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     const context = { bind, unbind, isBound, rebind };
@@ -32,7 +33,11 @@ export const dfdElementsModule = new ContainerModule((bind, unbind, isBound, reb
     configureCommand(context, ReSnapPortsAfterLabelChangeCommand);
 
     bind(PortBehaviorValidator).toSelf().inSingletonScope();
-    bind(TYPES.IUIExtension).to(OutputPortEditUI).inSingletonScope();
+
+    bind(OutputPortEditUI).toSelf().inSingletonScope();
+    bind(TYPES.IUIExtension).toService(OutputPortEditUI);
+    bind(SWITCHABLE).toService(OutputPortEditUI);
+
     bind(TYPES.MouseListener).to(OutputPortEditUIMouseListener).inSingletonScope();
     configureCommand(context, SetDfdOutputPortBehaviorCommand);
 

src/features/dfdElements/outputPortEditUi.ts

@@ -32,6 +32,7 @@ import "monaco-editor/esm/vs/editor/contrib/hover/browser/hover";
 import "monaco-editor/esm/vs/editor/contrib/inlineCompletions/browser/inlineCompletions.contribution.js";
 
 import "./outputPortEditUi.css";
+import { LightDarkSwitch, Switchable } from "../../common/lightDarkSwitch";
 
 /**
  * Detects when a dfd output port is double clicked and shows the OutputPortEditUI
@@ -354,7 +355,7 @@ class MonacoEditorDfdBehaviorCompletionProvider implements monaco.languages.Comp
  * UI that allows editing the behavior text of a dfd output port (DfdOutputPortImpl).
  */
 @injectable()
-export class OutputPortEditUI extends AbstractUIExtension {
+export class OutputPortEditUI extends AbstractUIExtension implements Switchable {
     static readonly ID = "output-port-edit-ui";
 
     private unavailableInputsLabel: HTMLDivElement = document.createElement("div") as HTMLDivElement;
@@ -417,7 +418,7 @@ export class OutputPortEditUI extends AbstractUIExtension {
             new MonacoEditorDfdBehaviorCompletionProvider(this, this.labelTypeRegistry),
         );
 
-        const monacoTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "vs-dark" : "vs";
+        const monacoTheme = LightDarkSwitch?.useDarkMode ?? true ? "vs-dark" : "vs";
         this.editor = monaco.editor.create(this.editorContainer, {
             minimap: {
                 // takes too much space, not useful for our use case
@@ -656,6 +657,10 @@ export class OutputPortEditUI extends AbstractUIExtension {
     public getCurrentEditingPort(): DfdOutputPortImpl | undefined {
         return this.port;
     }
+
+    switchTheme(useDark: boolean): void {
+        this.editor?.updateOptions({ theme: useDark ? "vs-dark" : "vs" });
+    }
 }
 
 /**