feat(modeller): modeler theming

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";
@@ -27,11 +27,14 @@ let contentController: ContentController;
 const stateController = new StateController<ModelerData>();
 
 let isUpdateFromExtension = false;
+const theme = true;
 const updateXML = asyncDebounce(openXML, 100);
 
 //
 // Logic
 //
+// Set the overall style (light or dark)
+setThemeStyle();
 
 // Listen to messages from the backend/extension
 setupListeners();
@@ -306,6 +309,7 @@ function postMessage(type: MessageType, data?: ModelerData, message?: string): v
 function createBpmnModeler(executionPlatformVersion: ExecutionPlatformVersion): Modeler {
     let bpmnModeler;
     const commonModules = [TokenSimulationModule, ElementTemplateChooserModule];
+    const defaultColor = theme ? getTheme() : undefined;
 
     switch (executionPlatformVersion) {
         case ExecutionPlatformVersion.None:
@@ -318,6 +322,7 @@ function createBpmnModeler(executionPlatformVersion: ExecutionPlatformVersion):
                 propertiesPanel: {
                     parent: "#js-properties-panel",
                 },
+                bpmnRenderer: defaultColor,
                 additionalModules: [
                     ...commonModules,
                     ExtendElementTemplates,
@@ -345,6 +350,32 @@ function createBpmnModeler(executionPlatformVersion: ExecutionPlatformVersion):
     return bpmnModeler;
 }
 
+/**
+ * Retrieve the CSS variables from the DOM.
+ */
+function getTheme(): { defaultFillColor: string; defaultStrokeColor: string } {
+    const html = document.documentElement;
+    const css = getComputedStyle(html);
+    return {
+        defaultFillColor: css.getPropertyValue("--vscode-editor-background"),
+        defaultStrokeColor: css.getPropertyValue("--vscode-button-background"),
+    };
+}
+
+/**
+ * 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.
  */

apps/miranum-bpmn-modeler-webview/src/styles.css → apps/miranum-bpmn-modeler-webview/src/styles/styles.css

@@ -1,7 +1,24 @@
-* {
+*,
+*:before,
+*:after {
     box-sizing: border-box;
 }
 
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+}
+
 body,
 html {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -10,6 +27,12 @@ html {
     max-height: 100%;
     padding: 0;
     margin: 0;
+    background: var(--vscode-editor-background);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
 }
 
 #js-properties-panel {
@@ -90,40 +113,3 @@ a:link {
     padding-bottom: 70px;
     min-height: 100%;
 }
-
-/* reset css */
-html {
-    box-sizing: border-box;
-    font-size: 13px;
-    background-color: #fff;
-}
-
-*,
-*:before,
-*:after {
-    box-sizing: inherit;
-}
-
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ol,
-ul {
-    margin: 0;
-    padding: 0;
-    font-weight: normal;
-}
-
-body {
-    color: black;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-}

apps/miranum-bpmn-modeler-webview/src/styles/theme.css

@@ -0,0 +1,68 @@
+:root {
+    /* TokenSimulation */
+    --token-simulation-silver-darken-94: var(--vscode-editor-background);
+    --token-simulation-grey-darken-30: var(--vscode-editor-foreground);
+}
+
+/**
+ * Diagram JS
+ */
+:root .djs-parent {
+    --canvas-fill-color: var(--vscode-editor-background);
+    /* Shapes */
+    --element-dragger-color: var(--vscode-list-highlightForeground);
+    --element-hover-outline-fill-color: var(--color-blue-205-100-45);
+    --element-selected-outline-stroke-color: var(--vscode-editor-selectionBackground);
+    --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
+
+    --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
+    --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
+    --shape-drop-allowed-fill-color: var(--vscode-editor-background);
+    --shape-drop-not-allowed-fill-color: var(--vscode-inputValidation-errorBackground);
+    --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
+    /* Palette */
+    --palette-entry-color: var(--vscode-button-background);
+    --palette-entry-hover-color: var(--vscode-button-hoverBackground);
+    --palette-entry-selected-color: var(--vscode-editorSuggestWidget-highlightForeground);
+    --palette-separator-color: var(--vscode-button-separator);
+    --palette-toggle-hover-background-color: var(--vscode-editor-hoverHighlightBackground);
+    --palette-background-color: var(--vscode-editor-background);
+    --palette-border-color: var(--vscode-button-border);
+    /* Context Pad */
+    --context-pad-entry-background-color: var(--vscode-editor-background);
+    --context-pad-entry-hover-background-color: var(--vscode-editorStickyScrollHover-background);
+    /* Search Bar */
+    --search-container-background-color: var(--vscode-editor-background);
+    --search-container-border-color: var(--vscode-button-background);
+    --search-container-box-shadow-color: var(--vscode-button-hoverBackground);
+    --search-container-box-shadow-inset-color: var(--vscode-button-hoverBackground);
+    --search-input-border-color: var(--color-grey-225-10-75);
+    --search-result-border-color: var(--color-grey-225-10-75);
+    --search-result-highlight-color: var(--vscode-statusBarItem-focusBorder);
+    --search-result-selected-color: var(--vscode-statusBarItem-hoverBackground);
+}
+
+/**
+ * Editing BPMN shapes
+ */
+:root .djs-direct-editing-parent {
+    color: var(--vscode-editor-foreground);
+    background: var(--vscode-editor-background) !important;
+    border-color: var(--vscode-button-background) !important;
+}
+
+/**
+ * Icons in context pad
+ */
+:root .djs-context-pad {
+    color: var(--palette-entry-color);
+}
+
+/**
+ * Search Box
+ */
+:root .djs-search-container input,
+:root .djs-search-container .djs-search-result {
+    color: var(--vscode-editor-foreground);
+    background: var(--vscode-editor-background);
+}

apps/miranum-bpmn-modeler-webview/vite.config.ts

@@ -44,6 +44,10 @@ export default defineConfig({
                     src: "../../node_modules/camunda-bpmn-js/dist/assets/bpmn-font/font/**",
                     dest: "font/",
                 },
+                {
+                    src: "./src/styles/theme.css",
+                    dest: "css/",
+                },
             ],
         }),
     ],

apps/miranum-modeler/src/app/BpmnModeler.ts

@@ -367,6 +367,9 @@ export class BpmnModeler implements vscode.CustomTextEditorProvider {
         const styleUri = webview.asWebviewUri(
             vscode.Uri.joinPath(pathToWebview, "index.css"),
         );
+        const themeUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(pathToWebview, "css", "theme.css"),
+        );
         const fontBpmn = webview.asWebviewUri(
             vscode.Uri.joinPath(pathToWebview, "css", "bpmn.css"),
         );
@@ -381,13 +384,14 @@ export class BpmnModeler implements vscode.CustomTextEditorProvider {
 
                 <meta http-equiv="Content-Security-Policy" content="default-src 'none';
                     style-src ${webview.cspSource} 'unsafe-inline';
-                    img-src ${webview.cspSource} data:;
+                    img-src ${webview.cspSource} data: https:;
                     font-src ${webview.cspSource} data:;
                     script-src 'nonce-${nonce}';"/>
 
                 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
                 <link href="${styleUri}" rel="stylesheet" type="text/css" />
+                <link href="${themeUri}" rel="stylesheet" type="text/css" />
                 <link href="${fontBpmn}" rel="stylesheet" type="text/css" />
 
                 <title>Custom Texteditor Template</title>