July 6, 2021 Smashing Newsletter: Issue #308
This newsletter issue was sent out to 178,755 subscribers on Tuesday, July 6, 2021.
Editorial
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.
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)
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)
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)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next week!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.