UNA KRAVETS: 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 and the 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, and 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. [MUSIC PLAYING] 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, the capabilities and performance. My team at Chrome
built this site. And it has a solid
dark theme, so I like to use this as an example. Here's the site. And as you go through,
you can see that there's 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 in 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
prefers-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-- in 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's 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 emulates
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. 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 worklets that shows you a bunch
of different ways that 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, instead
of transforming it, change the background color. So we'll do background-color. Let's make it maybe a slategray. And now it's a little bit
lighter than something next to it. So when I have this
state, it'll stand out from the other cards around it. Now we might also want
to 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 is 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 want to keep that pastel
vibe and that pastel aesthetic, but just convert
it 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 night. 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 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 we might want to
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 want
to 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 theme 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 users' 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 this light 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 could 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 is also showing us a
dim theme here and grape. 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 in 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 we'll 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 turn 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 Designcember 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. [MUSIC PLAYING]
