Proposal to ditch the current dark mode and opt for a better one

Hi. I have been using Excalidraw almost exclusively whenever I need to draw, explain, or just mess around with shapes. I absolutely love it, and the fact that it’s open source. But throughout the period during which I used it I quickly started noticing a lot of issues with the current “Dark Mode”. Basically #2346, #3531, #3606, #4074, and #4301. I’d like to list these issues and the possible fixes for them in this proposal.

Here are my reasons:

1. It’s super laggy on Firefox. Canvas filters are not the best in Firefox and they certainly lack the performance of, say, Chrome. Drawing a straight line using the Pen tool in Firefox with Dark Mode on runs at an average of 27 FPS, while drawing complicated circles and random shapes runs at an average of 56 FPS. (#4074 #2346)
2. Colours don’t look that great. I draw a red line, I expect it to be red in Dark Mode, but it turns out something entirely different. Even custom hex codes don’t work properly. (#3531)
3. Not to mention the various bugs with Safari not supporting svg invert and so on.

I dug deeper and found out about the tiny invert and hue-rotate thingy, but that just doesn’t work, given the previously mentioned issues.

My proposal

1. First off, rename the current Dark Mode to Invert Mode, with clear warnings of what might the output and bugs be.
2. Then, create a new Dark Mode that only changes the colour of the controls and UI without touching the rendering canvas itself. Maybe change the background colour as well, just for the sake of consistency and user expectations. This would be a true dark mode experience that is completely lag free (I tested it!), respects browser limitations (also tested it!), and doesn’t suffer any of the aforementioned issues.

I currently have Excalidraw with a custom background of the value #121212 (dark grey) that is consistent with Material Design’s dark theme (which most users are familiar with), and it’s quite comfortable. I didn’t face any of the issues mentioned above or other issues regarding dark mode.

I’m willing to work on this, just point me in the right direction.

[MattKleinsmith]

Hi, just chiming in here. What I’d like from an Exalidraw dark mode:

1. Dark UI
2. Dark canvas

And on the negative side:

1. Please don’t change my images. That’s my responsibility. Currently, I avoid using images in Excalidraw, because it inverts them.
2. Please don’t make the hex values wrong. “000000” should mean black, not white.

My plan for now is to use light mode (i.e. accurate mode), and then use a user script to achieve a dark UI and dark canvas.

All that being said, I love Excalidraw. Thank you for making it.

[dwelle]

Hey!

I’m open to improving the current dark mode scheme 👍, with the following caveats:

1. We still want to keep dark background. Not only is this pretty much the point since canvas takes up 90% of your screen (or more), but the dark mode output is also often what users go for in terms of aesthetics.
2. We do need to rotate some colors, namely black/gray colors (or more generally, very dark colors) — question is what would the heuristic look like.
3. I assume there are many users who either 1) prefer current dark mode, or 2) have in-progress projects (especially long-term ones like books) where making drastic dark mode scheme changes would affect them negatively. Not sure how to handle this. I don’t want to keep two dark mode schemes around (one thing is keeping the logic, another is having multiple different dark modes in the UI).

(3) also addresses your first point:

First off, rename the current Dark Mode to Invert Mode, with clear warnings of what might the output and bugs be.

If we change the dark mode, let’s that in one go and not keep multiple ones. Unless you meant this as an interim solution until the rewrite is done, but I don’t think current dark mode is anywhere near unusable to warrant this (well, except some of the bugs).

I currently have Excalidraw with a custom background of the value #121212 (dark grey) that is consistent with Material Design’s dark theme

That’s the color we’re using — I believe we’re following the same design document (or generally Google’s).