Dark Mode For Excalidraw

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:

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:

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:

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:

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:

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!