Dark mode
with one click

A Datawrapper range plot in bright mode and in dark mode next to each other. In dark mode, the background becomes black and the text becomes white.

Datawrapper visualizations are easy on the eyes day and night, thanks to our own color contrast algorithm.

It’s free, with no sign-up required.

Switch off the lights, as easy as at home

It’s really that simple to turn on dark mode for all Datawrapper chart types, map types, and tables.

Just activate “Automatic dark mode,” and the colors in your visualization will adapt automatically to your readers’ own dark mode settings. The background turns dark, and the colors of your text and chart elements turn brighter.

Curious what your readers will see? You can preview dark mode for each visualization in the Datawrapper app.

When your website is dark, your visualizations should be too

If your website supports dark mode, you don’t want white charts, maps, and tables to stick out against a black background. Or the other way around.

When “Automatic dark mode” is turned on, you only need to put one embed code on your page. The embedded visualization will adjust to your readers’ system settings — showing a bright background when they view your website in “day mode” and a dark background at “night.”

Learn more in our dark mode announcement post

Datawrapper scatterplot with an annotation in dark mode (with a black background) in an article from the German newsroom SPIEGEL.

Datawrapper chart in dark mode in an article from the German newsroom SPIEGEL

Making sure your colors work — even at night

All the elements of your charts, maps, and tables remain legible in dark mode. We wrote an algorithm that automatically finds suitable colors for your visualization elements, gridlines, title, description, source, byline, color key, highlight ranges, table text, table heatmaps, annotations, etc.

Important elements will stick out in dark mode, too: Colors that are very dark on the white background will be very bright on the black background, and vice versa.

If you want to keep the bright mode colors, you can choose to do so in the layout options.

Datawrapper scatterplot in bright mode with a white background. Next to it is the same chart in dark mode with a black background. The image highlights that the colors are adjusted for dark mode: For example, pink is brighter in dark mode to have the same contrast to the background as in bright mode.

The dark side comes with a customized color palette

If your team uses a custom Datawrapper theme, you can define a custom dark mode counterpart for every color in your bright palette. This way, you’ll never need to think about the look of your visualizations in dark mode ever again — all the colors will be exactly as you chose.

Not a fan of the dark side? Just permanently disable automatic dark mode for all team members.

Ask our Support team about dark mode adjustments