 Hi folks! My name is Tom and today I want to talk about dark mode. I'm not sure when you have entered the world of computing, but for me, it was during the dark era of MS-DOS. And you know what? We've actually gone full circle with dark mode. If you've used a computer in the 1970s or 1980s, you probably have used dark mode before. Well, dark mode became a thing. At that time, when screens oftentimes were monochrome and color screens incredibly expensive, dark mode wasn't a choice, but simply a fact. Only when color monitors became more affordable and what you see is what you get desktop publishing evolved, the idea of making a virtual document resemble as physical printed end product became popular. And this baseline assumption of dark text on light background was carried over to the very first earliest web designs. The epoch of those heavy cathode-ray tube monitors with massive desktop PCs that we consumed these very first web pages on is long over. And nowadays, more often than not, we use mobile devices with light, LCD displays, or AMOLED screens that also have enabled completely new usage patterns. For example, I often browse the web well in bed. And because it's easier on my eyes and less likely to wake up my better half, I tend to turn on my phone's dark mode. I've done some user research on why people use dark mode and under which circumstances. The results are pretty interesting. While the majority of the surveyed users unsurprisingly said dark mode was easier on the eyes and just looked beautiful and elegant, the third most mentioned reason for using dark mode was that it consumes less energy. The Android team have looked into this and found out that on AMOLED screens, dark mode can save up to 60% energy. This is why on Android Q, when battery saver kicks in, we automatically activate dark mode. And finally, some people say they require dark mode as a true accessibility tool without which they can't get their work done. Interestingly, dark mode usage correlates less than expected with the surrounding ambient light situation, meaning a lot of people, like me, use dark mode permanently. So how do you activate dark mode in the first place? On macOS, it's a setting in the system preferences in the general section. On iOS and iPadOS, you can toggle dark mode in settings in the display and brightness section. On Android, dark mode is called dark theme and you can activate it in settings in the display section. For Windows, dark mode can be activated in settings in the colors drop-down menu in the personalization section. And finally, for the various Linux distributions, activating dark mode typically involves setting a dark desktop theme. Now that we know how to enable dark mode, let's see how we can actually support dark mode on our web pages. The secret is a user reference media feature called Preference Color Scheme. It has three possible values, dark, light, and no preference. The simplest possible dark mode implementation is to just invert the background and the foreground color in the case the user prefers dark mode. You can see how the page reacts when I toggle the macOS color theme between light and dark. Switching the entire operating system's color scheme can get really annoying, so in Chrome DevTools we now allow you to emulate the user's preferred color scheme. So back to the theme per se. While it works, already in this basic example, you can see how in practice things are a lot more complex than that. The default purple user agent style sheet color of a visited link has a contrast ratio of only 1.9, which isn't enough. We can fix this by adding some more CSS, and now it slowly starts to look okay. But you can see where this is headed. For a production website, we'd have hundreds or even thousands of cases like this that we'd need to cover. So rather than one by one, we need something better, semantic color definitions. We can do this with CSS variables, so instead of using hard-coded colors on the various elements, we use variables like text color or background color, and then define these variables dynamically based on preferred color scheme. As I said before, already for the toy example, we need quite some CSS, and even more for production web apps. But here's the thing. If you have dark mode enabled, you shouldn't be forced to load CSS that is only relevant in light mode, and vice versa. We can deal with this by splitting our CSS into three files, dark CSS that contains all the dark mode relevant CSS variable definitions, light CSS that contains all the light mode relevant CSS variable definitions, and style CSS that contains the common CSS where these variables are being used. Like that, we make sure that in the critical rendering path, only the CSS that's needed for the preferred color scheme gets loaded, with the highest priority and the rest with the lowest priority. If we have to deal with older browsers that don't understand the preferred color scheme media query yet, we require one last trick to make sure the default CSS, for example, light CSS, gets downloaded with highest priority. Therefore, we manually insert the light CSS style sheet with the good old insert adjacent HTML method to force its download with the highest priority. The obvious during escaping is to make it work even on browsers that are only compatible with ECMAScript 5. All right, with all of this out of the way, let's have a look at how you can actually design for dark mode and what to keep in mind. As we've seen before, getting all the contrast right, making sure the design conveys concepts like elevation in both light and dark themes, and still incorporating your brand's colors and accent colors, is incredibly hard. Material design can help your design team bootstrap a design that respects all the best practices material has established. On material.io, you can find a number of resources, including a code lab, to get you started. One last tip. Remember that not everyone who has dark mode activated on the operating system necessarily wants websites to be dark, too. It is a nice gesture to provide users with a dark mode toggle for your site that initially respects people's preferred color scheme preference, but then allows them to temporarily or even permanently override it. You can easily support this use case with a custom element that we've developed right for this purpose. Dark mode toggle. All you need to do is load the custom element script and then include it on your page. You can find out more about this custom element on GitHub. And with that, thank you very much for watching. You can find links to all the features, articles, and code samples from this video in the description. See you next time and enjoy dark mode.