How to enable dark mode in embedded Datawrapper visualizations
Datawrapper lets you embed charts, maps, and tables that switch responsively to a dark background. This article explains what dark mode is and what it does, how to turn it on, and what options you have as a user with a custom theme.
Dark mode visualizations are available to all our users and with every theme, including our free Datawrapper themes.
Index
- What is dark mode and what does it do with visualizations?
- How can I turn on dark mode?
- How can I see what my visualization looks like in dark mode?
- I want my visualization to display in dark mode, but I don’t want the colors I chose to change — is that possible?
- What options do I have for my custom theme(s)?
- I want all my charts to come with a dark background — is that possible?
- My website has dark/light mode switch, how can I ensure Datawrapper embeds respect the setting?
- I use inline HTML styles. How can I convert them to dark mode?
What is dark mode and what does it do with visualizations?
Dark mode – also called black mode, dark theme, or night mode – is an option that lets websites and apps appear with a dark background and light text, instead of the familiar white background with dark text. It gives our eyes a much-needed break from bright screens.
Here's a Datawrapper visualization in normal mode and in dark mode:
All the elements on your charts, maps, and tables will remain readable in dark mode. To ensure that, we wrote an algorithm that is based on color contrast. It automatically finds suitable colors for your chart elements, gridlines, title, description, source, byline, color key, highlight ranges, table text, table heatmaps, annotations, etc.:
As you can see, the color contrast of each element against the background is always the same. The black text on the white background has the same contrast as the white text on the black background; the light blue “high trust” bar on the white background has the same contrast as the dark blue “high trust” bar on the black background. Colors that are very dark on the white background will be very bright on the black background, and vice versa.
How can I turn on dark mode?
You can find the setting “automatic dark mode” in the Layout tab of step 3: Visualize. If you already support dark mode on your site, then all you have to do to ensure your Datawrapper embeds adapt is to turn on this setting for each visualization in the app. If not, don’t worry — your embeds won’t switch to dark mode unless you choose to activate the option.
When “automatic dark mode” is turned on, your embedded visualizations will appear in dark mode for readers who have chosen to view your website that way.
This might be something they enabled in the settings of their operating system (on a Mac, that’s in System Preferences > General > Appearance: Dark) or in their browser (in Firefox, there’s a default “Dark” theme readers can enable).
Before turning on automatic dark mode for visualizations, make sure that your whole website offers a dark mode! That’s something you need to design and code on your side. For example, websites like DuckDuckGo and spiegel.de have a dark mode, while sites like Wikipedia or economist.com don’t. We’re using the setting prefer-color-scheme (link) to check whether your readers prefer dark mode or not — verify that your website respects this setting before turning on Datawrapper’s automatic dark mode.
If your website is not designed for dark mode, just don’t enable the automatic dark mode in the Layout tab, and everything will stay as you’re used to.
How can I see what my visualization looks like in dark mode?
Below each Datawrapper visualization in step 3: Visualize, you will find our dark mode preview. Click on the moon to switch to dark mode; click on the sun to switch to the normal, "light" mode.
I want my visualization to display in dark mode, but I don’t want the colors I chose to change — is that possible?
In certain cases, you might find that the automatic color conversion isn’t suitable or necessary. For example, if your chosen colors aren’t very bright, or very dark, or if your exact choice of colors is important to what your visualization communicates.
In such cases, you can choose to use the same colors in dark mode. That way, elements like text will still be adjusted to look great in dark mode, but any colors you chose for your visualization will remain unchanged.
To enable this option, simply activate the option to use the same colors in dark mode in the Layout tab of the Visualize step.
What options do I have for my custom theme(s)?
If your organization uses a custom theme, you can decide on a few things. Please reach out to our support team if you want to:
- permanently enable or disable Automatic dark mode for one or all of your custom themes. Otherwise, team members who use your theme will be able to decide individually whether to enable Automatic dark mode for a visualization in the Layout tab of step 3: Visualize.
- configure specific colors for dark mode. For example, you can define the background color, text color, or gridline color for the dark mode of your custom theme. You can also choose specific dark mode versions of all your regular palette colors. If you already use a custom theme with a dark background, no “extra” dark mode will be shown for that one.
Just get in touch with us at support@datawrapper.de. Margaux, Shaylee, and Michi are looking forward to hearing from you.
I want all my charts to come with a dark background — is that possible?
If you always want to show your visualizations on a dark background, no matter your readers’ preferences (e.g., because your website always uses a black background), simply pass a ?dark=true parameter to the visualization URL in the embed code. For example, the visualization datawrapper.dwcdn.net/GMW3g/3/?dark=true will always show up in dark mode.
If you pass a ?dark=false parameter to the visualization URL, your visualization will always be in normal, "light" mode. These two parameters can be added/removed from an embedded visualization at any point to switch modes.
By default, Datawrapper embeds have a transparent background, so that they can be seamlessly embedded anywhere. If your embed seems to have solid background, the browser is probably adding that automatically, because it thinks it's required for legibility.
To prevent that, set the CSS color-scheme: dark on the iframe, or any parent container, so that the browser knows that the content is in dark mode. You can read more about why that's necessary here.
My website has dark/light mode switch, how can I ensure Datawrapper embeds respect the setting?
If your website allows users to decide if they'd like to see it in dark or light mode (regardless of their OS settings), you'll likely also want to ensure that your Datawrapper embeds respect that setting. Since this type of custom switch is independent from OS settings, and is purely a design feature of the website, there's no way for Datawrapper embeds to automatically 'know' which mode is applied and update accordingly.
Therefore, in order to ensure that Datawrapper embeds reflect the custom user preference for dark/light mode, your website will need additional logic that ensures the user preference is dynamically applied to all embeds on the page. This can be achieved using the dark query string described in the previous section, by programmatically updating the URLs of the embeds to include this query string, with a value of true or false, depending on the user preference.
Below is an example of how this could be implemented:
I use inline HTML styles. How can I convert them to dark mode?
Right now, we don't convert your inline HTML styles to be readable in dark mode (e.g. for color keys in description or titles). Instead, you can set the class .hide-in-dark or .hide-in-light if you want different colors in each mode.
Here's a chart that makes use of it for the words "before" and "after" in the description:
Here's how to get this description to show the black-on-light-grey word "before" in light mode, and the white-on-dark-grey "before" in dark mode:
<b style="background:#C4C4C4; color: black" class="hide-in-dark">before</b> <b style="background:#606060; color: white" class="hide-in-light">before</b>
The annotation doesn't need to be changed: Like the bars, it will be converted automatically.