 Welcome to Designing in the Browser, the series where we explore user interface design through the lens of modern web technology. In this season, we're doing a deep dive into the APIs that prepare you for the new responsive web of tomorrow. And today is all about theming and dark mode. Dark mode is one of the top requested features from developers and users alike, especially those who like to browse the web at night. When Twitter released their first preview version of the new Twitter PWA, the feedback they got was that users wanted dark mode, an emoji picker, and more dark mode. So a lot of very vocal users have this feature request. But not everyone prefers a dark theme. Luckily, CSS gives us the ability to hook into user interface preferences and provide the optimal experience based on what a user says they prefer. This is called the prefers color scheme media query. It is another aspect of this new responsive web. The new responsive framework is not only about new APIs for component-based responsive design, which we covered in the previous two episodes. But it's also about putting your user first and creating experiences responsive to them and their needs. And preference queries are perfect for this. In this episode, I'll cover how to create a beautiful dark theme, including a few design considerations for dark themes, as well as introduce some auto-darkening capabilities that you can use as a shortcut for browser interfaces. Let's get started with the practical stuff, how to create dark themes. The path I'd recommend is to use custom properties for theming and then dynamically swap your custom property values based on those user preferences. So let's take a look at what this might look like. This is a website called Tooling Report, which assesses various bundlers, their capabilities, and performance. My team at Chrome built this site, and it has a solid dark theme. So I'd like to use this as an example. Here's the site. And as you go through, you can see that there is an overview of capabilities. You can click on these. There are tooltips that provide more. You can reach into the pages for more information and then dive a little bit deeper about some of these capabilities. So what I like about this is how it's set up for theming. You have your spacing here and your roots. You have font sizes. And then you also have your color values. And these color values are what we're going to focus on because we're talking about theming today. So what I can do is I can go into the Rendering tab inside of DevTools. And I can emulate what a dark theme looks like. I can turn on Preferred Color Scheme Dark. And what this would emulate is if a user has this operating system preference that they prefer a dark color scheme, or if they're using something that automatically converts the color scheme based on time of day or another mechanism. So now we are in a dark theme. And you can see that these colors have shifted. So here is what that dark theme looks like. This is being emulated throughout. And the tooltips, the headers, the text. We have light text here now. And these colors are actually adjusting themselves, still in the root, but using that prefers color scheme media query. So now if I adjust this, the light theme again, you can see that these color values are coming back. We have this background blue color. We have text gray, which is a dark color value. And then we swap to a prefers color scheme dark. They're getting overridden. So now something like that blue background is going to be a darker blue. It's sort of like this navy. We still have this text gray. It's now a lighter text color. So you can make these swaps in just a single line of code. Instead of shadows here, we have some glow as well. And there is a lot of interesting features that we've done to adjust for this dark preference color scheme. You might also want to add the color scheme CSS property at this point. Color scheme tells the user agent to make adjustments to the user interface, including form controls, scroll bars, and the base values of the CSS system color is provided by the user agent. So it will automatically do some inversions for you, such as present light text instead of dark text by default. Color scheme is currently supported in Chromium-based browsers and Safari. So if you are using this as a capability for dark themes, make sure that you are testing cross-browser. You can apply color scheme within a media query, like this, or use color scheme to create automatic browser provided dark themes by setting color scheme light dark on the base root to tell the browser that this site supports both light and dark themes and to automatically do that conversion help for you. Here's what that looks like without any custom color on a web page using native browser styles provided by the user agent in Chrome. I have it set here on the root color scheme light dark. And then when I emulate the dark color scheme, you see that we now have light text on a dark background. OK, so now let's talk about some decisions you might need to make when converting your site into a dark theme. Because you might want a more custom experience than that standard user agent style, right? The first consideration is, what do you do to create depth when you can't rely on shadows? Shadows just won't work the same on a dark background as they do on a light background. So something that Material Design recommends and I love to do is instead of adding shadows to create elevation from the background, add light to create elevation from the foreground. Let me show you something. Take this dino. When I shine a light on it to create depth from the background, it casts a shadow that brings the dino forward from the background. Now, if the background was dark, like this one, that shadow isn't as visible and it has a lower contrast. But the more forward I bring it toward the light, the brighter the light is that shines on its surface. So you can take this physical concept and translate it into the digital world. Let's take a look at a web example. Here we have a card in a light theme and it has this shadow that makes it stand out from the background. But when I turn on the prefers color scheme dark and put it onto a dark background, that shadow pretty much disappears and it actually looks kind of funky. So I don't think we want this. Another live site that my team built is Houdini.how. And this is a demo site for Houdini Worklist that shows you a bunch of different ways that you can interface with CSS Houdini and the Paint API and customize it and use it in your interfaces. So I can also convert this to the prefers color scheme dark as we've designed a dark theme just for this site. This site also uses shadows that kind of disappear when you have a darker background. If we go to the resources page, what I'm doing here on these cards is having a little bit of a translation as they shift up and down. I'm also using a lighter foreground color on the cards so that they stand out from the background. Now, if I wanted to make these stand out even more, say in the hover state, I could adjust that background to be even lighter. So here I have this transform. Let's just, you know, instead of transforming it, change the background color. So we'll do background color. Let's make it maybe a slate gray. And now it's a little bit lighter than something next to it. So when I have the state, it'll stand out from the other cards around it. Now we might also wanna adjust the transition. So we'll set transition to background color and we'll do maybe 0.25 seconds. So now it's a little bit more of a smooth transition. I have this hover and focus state. So that it stands out from the other cards around it when you're interacting with it and it sort of elevates this card forward. So that's exactly what I'm doing in this dark theme. Here's just a blog site that I was creating and I am using these softer pastel colors. So when I set this to prefers color scheme dark, I wanna keep that pastel vibe and that pastel aesthetic but just converted to a dark theme. So I've desaturated a lot of these colors. And then when I hover over these cards here, I have sort of a deeper maroon color that does make the card stand out but stays within the color scheme vibe of this site, making it work on a dark theme. Another consideration for dark theme adjustment is color vibrancy. On a light background, a very bright or saturated color doesn't have as strong a visual contrast and vibration next to a light color than it does next to a dark color. It's sort of like neon versus day and nights. This makes vivid colors a bit harder to focus on with a dark background because there's just more visual vibration that your eyes are seeing. So let's take a look at an example. Here we have this card and this is in this dark color scheme. This very vivid saturated color is a little bit harder to read when you're looking at it against this black background. On a light color scheme, especially at some of the more lighter shades, it's not as obtrusive to our eyes. So what we might wanna do here is instead of having it be very saturated, is decrease the saturation, maybe make it a little bit less vibrant and this tends to work better for nighttime viewing and for dark themes. So this is why you might wanna tone down bright brand colors for dark themes. Dark themes aren't just nice for user experience but they also save significant battery life. In a lab-based Pixel study, we found that on average at 75% brightness, dark themes saved users 11% battery life on the OLED screen of a Pixel 6. That's pretty significant. So if you needed another reason to build a dark theme, it's not just about respecting your user's preferences, but it's also about respecting their battery life. Building dark themes with custom properties is great and there are a lot of systems out there with predefined color values and dark themes like open props, which was recently launched by my colleague Adam Argyle. So here I have an example of open props and it has custom property values in the root. You can see the brand color, text color and surface colors. And when I adjust these values from the slight theme to a dark theme, those brand colors stay the same. They get a little bit more muted, less saturated and the surface colors go dark. So you can see that there's a more vibrant orange here than we see here in the dark mode. And then the text colors also invert and become light. Adam's also showing us a dim theme here and great. You can go wild with theming and really let your user create custom experiences and view your site the way that works best for them. The color scheme property is one form of auto darkening on the style layer, but Chrome is currently exploring some other techniques for auto darkening to reduce your workload and getting your site dark mode capable. You can try out what this looks like by opening Chrome and turning on auto dark mode emulation in DevTools. So open back up my Houdini site here and if we scroll below where that prefers color scheme media emulation is, there is an emulate auto dark mode feature. So I turned that on and enable it. You can see Chrome trying to automatically create a dark mode for me and I can then see where this works, where it doesn't. So it's not perfect yet. This feature is a work in progress and we definitely need your input if you spot bugs and accessibility issues. You can provide your feedback on auto dark using the link within the show notes. All right, that's all we have time for today but I hope that you've been inspired to create your own dark themes. Do it for your users. And if you haven't tried the dark mode on the design center site yet, I highly recommend you do. It's a fun one and we had a lot of fun putting it together. As always, I'll see you on the internet. Bye for now.