Dark Mode For Excalidraw

François Best • 5 June 2020 • 3 min read

If you don't already know about Excalidraw, it's a great simple sketching webapp that got very popular during the COVID-19 crisis when everyone was working from home and needed a virtual drawing board. It's also been used for art, cartoons, mockup design and in many other creative ways.

While building this blog, I wanted to easily embed Excalidraw diagrams and drawings on blog articles (that's what Vjeux designed it for), but also have it integrate nicely in Dark Mode.

One simple approach is to keep the white background in the SVG or PNG export:

Toggle Dark Mode:

Dark ModeExcalidrawThispost

However, for posts with many diagrams, it can lead to eye fatigue when moving between dark mode text and light mode diagrams.

If we just remove the background, the black lines in the drawing will almost disappear in dark mode, and the cross-hatch will not look good:

Toggle Dark Mode:

Dark ModeExcalidrawThispost

CSS Filters To The Rescue#

We can use CSS filters to change the colours of the SVG. They are supported in most browsers, and allow us to invert the colors when Dark Mode is active:

.excalidraw.light {
  filter: none;
}

.excalidraw.dark {
filter: invert(100%);
}

One problem with inverting all colours this way is that it changes the hue: blue becomes orange, green becomes pink, and the general nature of the diagram changes.

See what happens when you toggle the theme and only invert the colours:

Toggle Dark Mode:

Green: Everything is OK!Orange: There might be issues...Red: Definitely a problem here.Blue: Just to let you know...Normal textSlightly less important

The hue change breaks the meaning associated to each line, so we need to keep the general hue and only invert the lightness.

Rotating The Hue Back#

If we add another filter, we can move the hue back to its initial value, and therefore only the lightness will have changed:

.excalidraw.dark {
filter: invert(100%) hue-rotate(180deg);
}

Toggle Dark Mode:

Green: Everything is OK!Orange: There might be issues...Red: Definitely a problem here.Blue: Just to let you know...Normal textSlightly less importantDark ModeExcalidrawThispost

I found this technique on David Baron's blog, he uses SVG filters instead of CSS, which have better support but can be slightly more complex to integrate.

Bonus: Dark Mode For Excalidraw.com#

We can also apply the same trick and get Dark Mode on the Excalidraw webapp, by styling the body directly:

Toggling dark mode for the Excalidraw UI on excalidraw.com

There is a discussion on how to integrate an official Dark Mode for Excalidraw in the official GitHub repository, and I think it would make a great addition to an already wonderful tool.

Follow me on Twitter for more hacks and front-end design tips!


François Best

Freelance developer & founder

Edit this page on GitHubDiscuss on Twitter