From 678e8830444ef2a6a1e7ba35a0a8a90a23f5459c Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sat, 21 May 2022 21:08:24 +0200
Subject: [PATCH] switch excalidraw theme (light/dark) based on trilium setting

---
 src/public/app/widgets/type_widgets/canvas.js | 15 ++++++++++-----
 src/public/stylesheets/theme-dark.css         |  4 ++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/canvas.js b/src/public/app/widgets/type_widgets/canvas.js
index 754ab1714..85a463bf3 100644
--- a/src/public/app/widgets/type_widgets/canvas.js
+++ b/src/public/app/widgets/type_widgets/canvas.js
@@ -23,6 +23,11 @@ const TPL = `
         .zen-mode-transition.App-menu_bottom--transition-left {
             transform: none;
         }
+        
+        /* collaboration not possible so hide the button */
+        .CollabButton {
+            display: none !important;
+        }
 
         </style>
         <!-- height here necessary. otherwise excalidraw not shown -->
@@ -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,
diff --git a/src/public/stylesheets/theme-dark.css b/src/public/stylesheets/theme-dark.css
index 08f0f677e..00b0df5dd 100644
--- a/src/public/stylesheets/theme-dark.css
+++ b/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;
+}