Expose Dark mode from Excalidraw

[tomsdev]

Hello, thanks for making this tool I think it's great idea! I always enable dark mode when using excalidraw, I think it would be great for users to be able to enable/disable darkmode when looking at the slides too.

I've started to look how to do it unfortunately it's a little more involved than a one line change but I will share what I found:

In excalidraw the dark mode toggle button changes the appearance on the AppState: setAppState({ appearance }); https://github.com/excalidraw/excalidraw/blob/538f2be097686a42a0c158bff68d7ab39d402171/src/components/BackgroundPickerAndDarkModeToggle.tsx#L21

You can see the appearance key on the AppState here: appearance: "light" | "dark"; https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L85

The App component reacts to the appearance value change and adds the css class "Appearance_dark" on to the .excalidraw html markup: document.querySelector(".excalidraw").classList.toggle("Appearance_dark", this.state.appearance === "dark"); https://github.com/excalidraw/excalidraw/blob/bf143ed0b8ba06e67e512978d14d6859833ed83d/src/components/App.tsx#L879

This means that a quick hack could be to add the css class "Appearance_dark" on the Excalidraw component by running this code (the better way would be to call setAppState({ appearance }) on the Excalidraw component but they don't currently expose a way to do so): document.querySelector(".excalidraw").classList.toggle("Appearance_dark", this.state.appearance === "dark");

Unfortunately I've tried running it in the Chrome console, on excalidraw.com it works and enables dark mode, however on excalidraw-slides.netlify.app it doesn't so I think the Excalidraw component that is imported from npm might not include the css styles for the dark mode.

[tomsdev]

I made some progress and created a PR to the Excalidraw repo to include the Dark mode css styles in their exported package: https://github.com/excalidraw/excalidraw/pull/2392

[tomsdev]

Bumped into a bigger issue, the npm package of excalidraw 0.6.1 is actually exporting the source from a special repository called https://github.com/excalidraw/excalidraw-embed which hasn't been updated in 3 months and is missing support for Dark mode.

I think the best way to import the latest version of Excalidraw would be to import it as a github subfolder like in https://github.com/dai-shi/excalidraw-animate/tree/master/src

[dwelle]

We'll be releasing a new npm package under @excalidraw/excalidraw soon, directly from the src/packages/excalidraw.