Instant Dark Mode

Richard Bruskowski

Instant Dark Mode

This is an adaption of React Theme Switch by Heydon Pickering. Learn more about it here:

It actually should be named “Instant Inverse Mode” but the marketing department won on this one.

The component provides you with a little icon button, which lets you quickly switch between the default view of your prototype and an inversed one. The inversion is done through CSS. Like many things in life, the exact translation of colors is beyond our immediate control. The inversion is only applied to preview and exports, not canvas, so it won’t fool around with Framer’s interface itself.

This component most likely won’t save you from implementing a real dark (or light) mode, but it can provide you a quick and painless glimpse into how your design might appear on the other side of the moon. And if you’re lucky it even might be sufficient to trick your manager and you can go home early today.

There’s one prop called preserve, which lets you exclude or include raster graphics from the inversion.