switch excalidraw theme (light/dark) based on trilium setting

src/public/app/widgets/type_widgets/canvas.js

@@ -24,6 +24,11 @@ const TPL = `
             transform: none;
         }
         
+        /* collaboration not possible so hide the button */
+        .CollabButton {
+            display: none !important;
+        }
+
         </style>
         <!-- height here necessary. otherwise excalidraw not shown -->
         <div class="canvas-render" style="height: 100%"></div>
@@ -112,6 +117,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
 
         this.$widget.toggleClass("full-height", true); // only add
         this.$render = this.$widget.find('.canvas-render');
+        const documentStyle = window.getComputedStyle(document.documentElement);
+        this.themeStyle = documentStyle.getPropertyValue('--theme-style')?.trim();
 
         libraryLoader
             .requireLibrary(libraryLoader.EXCALIDRAW)
@@ -185,6 +192,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
 
             const {elements, appState, files} = content;
 
+            appState.theme = this.themeStyle;
+
             /**
              * use widths and offsets of current view, since stored appState has the state from
              * previous edit. using the stored state would lead to pointer mismatch.
@@ -365,18 +374,14 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
                     ref: excalidrawWrapperRef
                 },
                 React.createElement(Excalidraw.default, {
+                    theme: "light", // not in effect, but causes the theme toggle button to disappear
                     ref: excalidrawRef,
                     width: dimensions.width,
                     height: dimensions.height,
-                    // initialData: InitialData,
                     onPaste: (data, event) => {
                         this.log("Verbose: excalidraw internal paste. No trilium action implemented.", data, event);
                     },
                     onChange: debounce(this.onChangeHandler, this.DEBOUNCE_TIME_ONCHANGEHANDLER),
-                    // onPointerUpdate: (payload) => console.log(payload),
-                    onCollabButtonClick: () => {
-                        window.alert("You clicked on collab button. No collaboration is implemented.");
-                    },
                     viewModeEnabled: false,
                     zenModeEnabled: false,
                     gridModeEnabled: false,

src/public/stylesheets/theme-dark.css

@@ -79,3 +79,7 @@ body ::-webkit-calendar-picker-indicator {
 body .CodeMirror {
     filter: invert(90%) hue-rotate(180deg);
 }
+
+.excalidraw.theme--dark {
+    --theme-filter: invert(80%) hue-rotate(180deg) !important;
+}