From 5cc1a5aa92dddec3f43eb8b825ff9213163154f6 Mon Sep 17 00:00:00 2001
From: peterhnm <peter.hnm@gmx.de>
Date: Tue, 1 Aug 2023 10:20:14 +0200
Subject: [PATCH] fix: background depending on theme style

---
 apps/miranum-bpmn-modeler-webview/src/main.ts  | 18 +++++++++++++++++-
 .../src/styles/theme.css                       |  7 -------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/miranum-bpmn-modeler-webview/src/main.ts b/apps/miranum-bpmn-modeler-webview/src/main.ts
index 5afea3be..84686723 100644
--- a/apps/miranum-bpmn-modeler-webview/src/main.ts
+++ b/apps/miranum-bpmn-modeler-webview/src/main.ts
@@ -13,7 +13,7 @@ import TokenSimulationModule from "bpmn-js-token-simulation";
 import ElementTemplateChooserModule from "@bpmn-io/element-template-chooser";
 import miragonProviderModule from "./app/PropertieProvider/provider";
 // css
-import "./styles.css";
+import "./styles/styles.css";
 import "camunda-bpmn-js/dist/assets/camunda-platform-modeler.css";
 import "camunda-bpmn-js/dist/assets/camunda-cloud-modeler.css";
 import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
@@ -33,6 +33,8 @@ const updateXML = asyncDebounce(openXML, 100);
 //
 // Logic
 //
+// Set the overall style (light or dark)
+setThemeStyle();
 
 // Listen to messages from the backend/extension
 setupListeners();
@@ -360,6 +362,20 @@ function getTheme(): { defaultFillColor: string; defaultStrokeColor: string } {
     };
 }
 
+/**
+ * Depending on the theme style of VS Code, the background of the modeler must be set.
+ */
+function setThemeStyle(): void {
+    switch (document.body.className) {
+        case "vscode-dark": {
+            const style = document.createElement("style");
+            style.innerHTML = ":root .layer-djs-grid { filter: invert(1); }";
+            document.head.appendChild(style);
+            break;
+        }
+    }
+}
+
 /**
  * A promise that will resolve if initialized() is called.
  */
diff --git a/apps/miranum-bpmn-modeler-webview/src/styles/theme.css b/apps/miranum-bpmn-modeler-webview/src/styles/theme.css
index 2caafab3..2fe37a92 100644
--- a/apps/miranum-bpmn-modeler-webview/src/styles/theme.css
+++ b/apps/miranum-bpmn-modeler-webview/src/styles/theme.css
@@ -4,13 +4,6 @@
     --token-simulation-grey-darken-30: var(--vscode-editor-foreground);
 }
 
-/**
- * Background
- */
-:root .layer-djs-grid {
-    filter: invert(1);
-}
-
 /**
  * Diagram JS
  */