fix: background depending on theme style

Miragon · Aug 1, 2023 · 5cc1a5a · 5cc1a5a
1 parent fe714b4
commit 5cc1a5a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -4,13 +4,6 @@
     --token-simulation-grey-darken-30: var(--vscode-editor-foreground);
 }
 
-/**
- * Background
- */
-:root .layer-djs-grid {
-    filter: invert(1);
-}
-
 /**
  * Diagram JS
  */