#SWDchallenge: design in light and dark
Many digital devices now offer the choice to toggle your viewing experience between light and dark modes. For those unfamiliar, light mode is when dark text appears on a light background (typically white), and dark mode is the opposite when light text appears on a dark background (usually dark gray, but this can be any color). This choose-your-preferred-theme trend is also gaining popularity in data visualizations. Sometimes your audience may specifically request this functionality.
Initially, the transition between light and dark modes might seem to be a simple matter of inverting the background and text colors, but it’s more nuanced than that. Here are a few considerations to get you started on this month’s challenge.
Color saturation. Highly rich and bright colors often work well against a white background (light mode). On the other hand, these same colors on a dark background (dark mode) can appear to vibrate on the page when you look at them for long periods of time. This is especially problematic when scanning a detailed chart.
Color tone. Color hues evoke different meanings in dark mode versus light mode. If you’re using specific branding colors or designing a chart with a particular emotion in mind, be open to the idea that this may not carry through when you update the background color.
Text. Text is easier to read in light mode. It’s also commonplace—think printed books and newspapers. Consider that not every element in a design should have a light and dark mode counterpart.
Images. Pictures and logos often have a white area around them that blends seamlessly into a design with a white background. However, this can look messy in dark mode, so instead, use transparent images when possible.
With these differences in mind, consider how and when you might switch up the design theme between light and dark.
The challenge
Take an existing data communication and explore how it would look in the opposite theme. If your original chart has a white or light-colored background, recreate it in dark mode and vice versa. (Hint: you’ll need to do more than update the background color to be effective.)
Check out the related resources section below for additional learning on light and dark modes. Share the light and dark versions in the community by April 30th at 6:00 PM ET. If there is any specific feedback or input that you would find helpful, include that detail in your commentary.
Related resources
Here are some additional resources for inspiration. This is a starting point, but certainly not a comprehensive list (if there are other great examples you’d like to share, feel free to include links in your submission commentary).