fix: Mermaid diagrams do not respect dark mode (#4564)

* wip

* Move event binding

app/editor/index.tsx

@@ -210,6 +210,7 @@ export class Editor extends React.PureComponent<
    */
   public componentDidMount() {
     this.init();
+    window.addEventListener("theme-changed", this.dispatchThemeChanged);
 
     if (this.props.scrollTo) {
       this.scrollToAnchor(this.props.scrollTo);
@@ -278,6 +279,10 @@ export class Editor extends React.PureComponent<
     }
   }
 
+  public componentWillUnmount(): void {
+    window.removeEventListener("theme-changed", this.dispatchThemeChanged);
+  }
+
   private init() {
     this.extensions = this.createExtensions();
     this.nodes = this.createNodes();
@@ -398,7 +403,9 @@ export class Editor extends React.PureComponent<
       plugins: [
         ...this.plugins,
         ...this.keymaps,
-        dropCursor({ color: this.props.theme.cursor }),
+        dropCursor({
+          color: this.props.theme.cursor,
+        }),
         gapCursor(),
         inputRules({
           rules: this.inputRules,
@@ -468,6 +475,10 @@ export class Editor extends React.PureComponent<
     return view;
   }
 
+  private dispatchThemeChanged = (event: CustomEvent) => {
+    this.view.dispatch(this.view.state.tr.setMeta("theme", event.detail));
+  };
+
   public scrollToAnchor(hash: string) {
     if (!hash) {
       return;