Where we come from.
It’s worth noting that dark mode actually has its roots in the early days of computing. While we’ve grown accustomed to bright backgrounds on our mobile devices and across websites, our memories of early computers are of one color palette: green text on a black screen.
And while The Matrix created this type of green text/black background as common shorthand for “hacking technology,” in reality, at least in the 1970s, green text was a necessity: cathode ray tube monitor technology simply it didn’t have enough power. to brighten more than the text on the screen.
Fast-forward a few years and we see the rise of scheomorphic design: on sites, within operating systems, and directly on monitors themselves. We moved to white backgrounds and dark text not because it was easier to read, but because it better represented a common reference: a sheet of paper with dark type.
Which brings us to today. The recent rise of dark mode came around 2019, when both Apple and Android introduced dark mode to their mobile operating systems. It had already been introduced as a user experience option in select apps: the Tweetbot Twitter client has had it for years, along with other text-focused apps: text editors, RSS readers, article aggregators. But with the adoption of system-wide dark mode for the two big mobile giants, the race was on.
Why it matters.
There are essentially three main reasons to integrate dark mode:
- Relieve eyestrain… in some situations.
Somehow, dark mode is presented as a way to relieve eye strain. The darker background is said to soothe the eye.
However, research shows us that this is not the case. We are used to seeing dark things on a light background; it is literally how our eyes have evolved to a life lived primarily in daylight.
Studies on how users read text, including their ability to correct and improve the reading speed, overwhelmingly promoted the positive polarity (black text on a white background) over the negative polarity.
However, that doesn’t mean he’s dead on arrival. There are situations where a black background is easier:
- If your content is video, dark mode may be easier on the eyes. It improves the focus towards the video itself.
- If your content is tied to colorful charts or dashboard elements, dark mode helps bring those colors into focus. An study by Salesforce showed that dark mode had little effect on cognitive action, which which means it was down to user choice rather than any kind of verified address.
- If you’re in a dark environment, an intensely bright screen can be hard on your eyes. Dark mode relieves this tension.
And while it’s not necessarily an eye strain issue, there’s also a benefit to using dark mode at night, when our minds are trying to relax and could do without the bright lights on our devices.
- Energy saving.
It is suggested that dark mode, as far as a mobile device is concerned, actually saves battery life.
A study by PhoneBuff found that dark mode could extend an iPhone’s battery by 30% or more, provided your phone has an OLED screen.
- It looks great.
This one is obvious: there is a subset of people who just think that light text on a black background
looks good.
There seems to be a lack of data on “cool” at this point in the game, but some smaller polls support the idea that people simply prefer the dark theme, regardless of the actual benefits.
A survey of 243 developers on Twitter showed that 82.7% of developers respondents used dark mode, when possible.
There’s nothing wrong with this: the need to customize our devices to fit our style drives innovation, and dark mode makes our stuff look more…techy.
What to pay attention to.
So with the idea that dark mode looks great and in some situations could present a better user experience, how do we design and develop for dark mode? How do we give our users choice without spending too much time on nonsense?
Understand your content
First of all, is your site suitable for dark mode? Is it a video focused site that will benefit from the darker background? Is it a site that people tend to read and browse for long periods of time at night? Is it full of long form content?
It’s not necessarily a great option to do
because, especially if you’re working with long-form content (which will be affected by a black background). It’s not game over, but you’ll have to do some more digging to find out if there’s a usable reason to take the plunge.
Dark mode is more than just the background.
The first step is to find the right dark background. The second step is to find the right light font color. The third step is to
update everything else on the site. Our link styles, hover state, navigation containers, headers, and even horizontal rules are designed for a light background – they can very easily disappear when the dark mode switch is activated.
Of course, there is a benefit to this: building a site in dark mode lends itself to creating more robust and flexible code. You’re more likely to stick to established design patterns, because you’re essentially creating two states for each element.
Dark mode and image variations.
Most of the work on the dark mode implementation is related to creating a second set of dark-friendly styles in the CSS. However, we must also remember that certain constant design elements (social media icons, our site logo, and any other image-based elements) are not covered by CSS color designations. If we use a dark colored PNG to link to Facebook, the site will require a light colored PNG during the switch to dark mode.
Also, videos and images tend to become more vivid when viewed in dark mode. As we darken the background, our eyes interpret brighter elements more intensely, which requires additional work to make sure images and videos fit into the overall design.
Automatic vs. manual.
Most browsers now support some kind of dark mode, and there are some, especially those within our mobile operating systems that are tied to time or light sensitivity, that will automatically choose light or dark mode based on default parameters. . Most of the time, this is perfect; but, as with any edge case on any device, you don’t always want your system to determine whether or not it’s time to shut down.
This is solved by empowering your visitors with a simple control: something that changes from light to dark, overriding any browser-driven decisions.
Dark mode: very good, within reason.
It may seem like we’re really taking dark mode to task, but know this: We don’t want to discourage you from taking the plunge. Just know that implementing dark mode is still an ongoing process.
We won’t know how much it helps for a while, or whether it’s worth the effort, but in the meantime, we also know that with a conservative approach and an understanding of the pitfalls, it can still provide an interesting, forward-looking approach. thought option for your site.
