thoughtbot.com, dark mode, and other user preferences

Dark mode is all the rage in web design right now. It’s a toggle in your operating system settings that allows you to update your operating system from traditional lighter colors to a darker version of them.

If you go to thoughtbot.com now you can see for yourself. Toggle dark mode on your operating system and (provided it has the capability, and that your browser supports it), and revel in its gloomy glory.

Why

The how part of dark mode has been thoroughly addressed. Instead, I’m going to talk a little bit about the why.

Developer appeal

I think that one reason dark mode took off is because it’s attractive to a lot of developers. Many code editors, terminal shells, browser extensions, etc. are purposely set to use darker colors. Extending this treatment to the websites and web apps they work on day-in and day-out feels natural.

Respecting user preferences

There’s more to dark mode than just developer convenience. It can help:

• Make someone’s reading experience easier in low light environments,
• Reduce things like headaches and migraines that can be triggered by too much eye strain, and
• Provide an enjoyable reading experience for some people with ADHD.

On the web, the logic that triggers dark mode is part of a suite of new media queries that react to settings someone explicitly enables. You can, or will soon be able to target:

• Motion,
• Data,
• Transparency,
• Color scheme,
• Contrast, and
• Forced colors.

These are welcome additions to the platform. Reacting to how someone wants to view the web is being accommodating to their expressed preferences. Like a good host, website and web app makers should strive to make everyone feel comfortable and welcome when they visit.

Better defaults

User preference queries also pose an interesting thing to think about: why do extra work?

You want a decent default color contrast ratio, because we want people to be able to read your website. The same thinking applies for text on semitransparent overlays. You want a low or no motion experience, to prevent triggering things like seizure, nausea, and migraines. Less data transmitted is always a good thing, as well—performance and usability are close friends.

If you accommodate these concerns from the beginning, you need to write far less workarounds after the fact. This approach means less code to write and maintain, better accessibility, better usability, and better compartmentalization for context-based mode switching.

It’s also worth mentioning that the preference toggles for these features are oftentimes buried or obfuscated. This means a person may not know these features exist, and consequently won’t enable them.

Flip mode is the greatest

Consider an opt-in approach rather than opt-out:

@media (prefers-reduced-motion: no-preference) {
  // Only run animation in browsers that support
  // a prefers-reduced motion, and the user has
  // not requested a reduced motion experience.
}

Start with all your autoplaying media paused, and let the user decide what’s interesting enough to interact with. Data-saver mode is turned off? Great! Conditionally serve up that video. Type over a semitransparent background? Maybe rethink that design choice, friend.

thoughtbot​.​com is quiet by design

While our website utilizes bold color choices and large type, you’ll notice that we don’t employ dirty tricks you might see on other agency sites. There’s no distracting autoplaying video backgrounds, nausea-inducing parallax effects, tiny light gray text on a white background, or gigantic data plan-murdering hero images.

These are intentional choices. While they may not place us on award sites that promote unfeasible trends or dubious usability, we do benefit from another success metric: new and repeat work from a wide range of clients who understand the value of respectful, reliable software.