Hailō dōsatō,

What used to be a rare feature just a few years ago, slowly becoming a common expectation these days: the dark mode. While many of us find light mode easier on the eyes, the moment I switched to the Cobalt Next theme in VS Code, I was never able to head back. But of course, that’s a matter of personal preference.

There is no shortage of tutorials around dark mode, from desktop apps and mobile apps to websites and emails. But how do we actually get started? Well, let’s figure it out!

For this newsletter, we’ve collected a couple of useful resources on dark mode, from tutorials to case studies, and we will be publishing a lengthier guide to dark mode on Smashing Magazine soon after.

Surfing together: let’s dive into everything CSS Container Queries at our online meet-up, this Thu, July 8. Get your free ticket.

In the meantime, we are getting ready for our upcoming Smashing Meets: a free online meet-up on Thu, July 8, 8 AM SF / 5 PM Berlin. With two sessions on CSS container queries, by Miriam Suzanne and Ahmad Shadeed — we sincerely hope to see you there, of course! :-)

Stay smashing — dark or light!
Vitaly (@smashingmag)

---

1. A Complete Guide To Dark Mode On The Web

What do you need to consider if you want to implement a dark mode on your website? Mohamed Adhuham’s complete guide to dark mode on the web delves into different approaches and the technical considerations they entail.

To get you started, the guide looks into different scenarios of toggling themes, which method to choose, and how you can let the user’s operating system do the lifting. Once that foundation is set, you’ll learn how to store a user’s preferences and how to handle user agent styles.

All of this will then be combined into building a working demo. Design considerations for images, shadows, typography, icons, and colors are also covered. A fantastic primer. (cm)

---

2. Design A Dark Theme With Material Design And Figma

Let’s say you want to build a dark mode theme for an existing Material Design app. How do you proceed? In his Google Codelab “Design a dark theme with Material and Figma”, Liam Spradlin walks you through the process step by step.

The Codelab uses an email app as an example. There’s a Figma file that you can download and tips for setting up your design environment help you get started. In the first step, you’ll learn to understand the identity of the product so that you can make informed decisions about the dark theme.

Then you’ll dive right in, adjusting surface, text, and component colors. To reemphasize the app’s personality, the Codelab also looks into how to work with custom surface colors that go beyond the classic dark theme. A handy framework for understanding and defining your own product’s dark theme. (cm)

---

From our sponsor

Scale Your Business With A CMS Designed To Drive Growth

CMS Hub is powered by HubSpot’s CRM platform, meaning you can build websites that seamlessly integrate with the data your sales and marketing teams use to grow relationships with customers. Work with the tools and frameworks you prefer to create web experiences featuring personalization, automation, and dynamic content. Learn more →

---

3. How To Design Delightful Dark Themes

How to choose the colors for a dark theme? Simply reusing existing colors or inverting shades usually isn’t a good idea as it could increase eyestrain and make your design harder to use in low light. In the worst case, it may even break your visual hierarchy, as Teresa Man points out. In her article on the Superhuman blog, she shares a systematic way for designing dark themes that are readable, balanced, and delightful.

The approach involves five steps: darken distant surfaces, revisit perceptual contrast, reduce large blocks of bright color, avoid pure black or white, and, last but not least, deepen colors. If you want to learn more about how to approach each step, Teresa looks at each one in more detail. A great guideline to follow along. (cm)

---

4. Upcoming Smashing Online Events

We are very proud and honored to invite you to our upcoming online event — Smashing Meets — the CSSummer edition. The event will take place online, on July 8th, with sessions by Miriam Suzanne and Ahmad Shadeed on what’s happening in CSS — with a particular focus on CSS container queries. We’d love to see you there, as it will be good fun, of course!

And if you’d like to dive deeper, we couldn’t be more excited for Stephanie’s Level-Up With Modern CSS workshop. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.

• Level-Up With Modern CSS Dev
  with Stephanie Eckles. July 8–22.
• Designing Websites That Convert UX
  with Paul Boag. July 22–30.
• The TypeScript Masterclass Dev
  with Stefan Baumgartner. August 5–19.
• Getting Web Forms Right UX
  with Vitaly Friedman. August 18–20.
• Jump to all online workshops →

---

5. The Quest For The Perfect Dark Mode

When Josh W. Comeau built his blog, the hardest part weren’t the live-embedded code snippets nor the GraphQL layer or the custom analytics system. It was dark mode. But why could something as seemingly straightforward turn out to become so complex?

As Josh explains, it has to do with the fact that frameworks like Gatsby generate the HTML ahead of time. The effect: A short flicker that shows users the wrong colors for a brief moment. To help you circumvent the issue, Josh summarized how to build the perfect dark mode for Gatsby.js step by step.

The solution he comes up with meets all the criteria that makes for a delightful dark mode experience: A toggle allows the user to switch between light and dark mode, preferences are saved for future visits, it defaults to the preferred color scheme according to the user’s operating system, and, most importantly, there’s no flicker on first load and the site never shows the wrong toggle state. If you’re using Gatsby, Next.js, or any SSR app, this one’s for you. (cm)

---

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

---

6. Dark Mode For Email Marketers

Dark mode is also taking over the inbox. However, the way email clients handle dark mode of HTML emails varies significantly. Some don’t show any impact on color at all, others force default styles on your design or invert colors either partially or completely. To prevent you from bad surprises, Alice Li from the Litmus team put together a guide to dark mode for email marketers.

The guide takes a closer look not only at dark mode support and how different email clients apply dark mode to emails but also at two methods to target dark mode users with your own styles: with @media (prefers-color-scheme: dark) and by adding [data-ogsc] prefixes to each CSS rule. Valuable tips. (cm)

---

7. Switch Between Light And Dark Mode In Sketch

Wouldn’t it be nice if you could switch between light and dark mode color schemes as you design? Well, the free Color System plugin for Sketch makes it possible. It integrates seamlessly with your Document Colors, so that you can continue to work like you are used to. Just flip the switch to change the color scheme.

There’s no need to create duplicate styles and duplicate elements. Once you have defined roles for each of your light mode colors, you only need to assign the dark mode colors to each role to be able to switch between the two. A real timesaver. (cm)

---

8. New On Smashing Job Board

• Product Designer
  at Latch Bio (San Francisco, CA)
• Senior Manager
  at Dallas College (Dallas, Texas)
• Senior Software Developer
  at LANCOM Systems GmbH (Germany)

---

9. Recent Smashing Articles

• Breaking Down Bulky Builds With Netlify And Next.js
• How To Choose a Headless CMS
• Six Common Testing Pitfalls And How To Solve Them
• Smashing Podcast Episode 40 With Mike Cavaliere
• Email Testing Flow As It Should Be
• The State Of Web Workers In 2021
• July Desktop Wallpapers 2021

---

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook