feat(editor): sync export theme with ui theme (#10903)

packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu items if passed from host 1`] = `
 <div
-  aria-labelledby="radix-:r7t:"
+  aria-labelledby="radix-:r85:"
   aria-orientation="vertical"
   class="dropdown-menu main-menu"
   data-align="start"
@@ -12,7 +12,7 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
   data-state="open"
   data-testid="dropdown-menu"
   dir="ltr"
-  id="radix-:r7u:"
+  id="radix-:r86:"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none;"
   tabindex="-1"

packages/excalidraw/tests/excalidraw.test.tsx

@@ -6,8 +6,16 @@ import { THEME } from "@excalidraw/common";
 
 import { t } from "../i18n";
 import { Excalidraw, Footer, MainMenu } from "../index";
+import { actionExportWithDarkMode } from "../actions/actionExport";
 
-import { fireEvent, GlobalTestState, toggleMenu, render } from "./test-utils";
+import {
+  act,
+  fireEvent,
+  GlobalTestState,
+  toggleMenu,
+  render,
+  waitFor,
+} from "./test-utils";
 
 const { h } = window;
 
@@ -304,6 +312,47 @@ describe("<Excalidraw/>", () => {
       const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
       expect(darkModeToggle).toBe(null);
     });
+
+    it("should sync export theme with the UI theme when there is no session override", async () => {
+      await render(<Excalidraw theme={THEME.DARK} />);
+
+      expect(h.state.exportWithDarkMode).toBe(true);
+
+      act(() => {
+        h.setState({ exportWithDarkMode: false });
+      });
+
+      await waitFor(() => {
+        expect(h.state.exportWithDarkMode).toBe(true);
+      });
+    });
+
+    it("should keep the export theme override for the current session", async () => {
+      await render(<Excalidraw theme={THEME.LIGHT} />);
+
+      act(() => {
+        (h.app as any).actionManager.executeAction(
+          actionExportWithDarkMode,
+          "ui",
+          true,
+        );
+      });
+
+      expect(h.app.sessionExportThemeOverride).toBe(THEME.DARK);
+      expect(h.state.exportWithDarkMode).toBe(true);
+
+      act(() => {
+        h.setState({ theme: THEME.DARK });
+      });
+
+      act(() => {
+        h.setState({ theme: THEME.LIGHT });
+      });
+
+      await waitFor(() => {
+        expect(h.state.exportWithDarkMode).toBe(true);
+      });
+    });
   });
 
   describe("Test name prop", () => {