[GOOGLE LOGO MUSIC] JAVIER LOPEZ: Today I will
be talking to you guys about designing a dark
theme using material design. A dark theme is a
low light UI that displays mostly dark surfaces
with accents and colors on top of it. We have heard a number of
you guys request a dark theme approach from us,
and we've heard it. So that's why we have
put out some guidance. But let me start
with our beginnings. In 2014, we launched
material design. Material design of a
system for creating bold, beautiful, consistent
digital products. You guys may have heard
some of our talks earlier, there was plenty of talk
about teaming, theming, so I apologize if some
of the content that I'm going to talk about up front may
seem a little bit repetitive, but I really think
it would be helpful for us to talk about some of
the foundations and principles that we saw in material
design that would have helped us get to where we are today. I picked a few of them. First, we [INAUDIBLE] paper. With material design, we
wanted to create a UI that was familiar to the user. So we wanted to build
on this metaphor of using paper, and
taking visual cues from the physical world
in order to bring them to the digital side. In here, I'm actually
displaying the use of shadows and elevation. Using those same concepts, we
have created a spatial model that allows users
to find components in consistent spaces. What this means is that
this dimensionality affords users interactions. In the elevation model,
every component has a spot, and it is a consistent spot. Our stylistic
choices are also used to create hierarchy and
emphasis, giving clear signals to users as to what to see, how
to guide them through the UI, and how to move forward
from one screen to the next. We were glad to see how people
have used material design. It unified millions
of applications out there in the world, and it
created a consistent experience on Android, IOS, and web. That consistency was
great for usability. Users knew how to
use user interfaces in different platforms. However, there were
a few problems. Here we have Gmail on the left,
and we have a third party mail app on the right. I believe that the
similarities are super clear and, that was a problem. Users, especially teams that
were implementing material design, felt like
they couldn't go beyond the aesthetic or
the interaction choices that we were making with Gmail. So that sent us back
to the drawing board. It was exciting to think
through this problem. How might we allow
for brand expression by building on the
usability of material? In 2017, we introduced
material theming. Material theming is built on a
foundation of material design, and it gives you
the control that you need in order to express
your brand through UI. Material theming
is about the sum of small, customized
components that add up to deliver a branded
and thoughtful experience. It is about injecting
brand in the UI, as opposed to just slapping
a logo on top of it. By adjusting different
systems inside of material, brands can utilize color, shape,
typography, and other systems to build expressive components
that resonate with their users. That brings me to do
today's topic, Dark theme, one of the most requested
features over the past year. We have been working in
collaboration with the Android team to create an approach,
to create a dark theme. A dark theme, like I
said, is a low light UI that occupies the majority of
the space with dark surfaces, and uses color as an
accent throughout. Dark themes also
reduce the luminescence emitted by the screen
devices, while still meeting minimum color
requirements in order to improve visual ergonomics. It also reduces eye strain. In products that
required efficiency, such as OLED screens, dark theme
actually conserves battery. By turning a pixel
completely off, we actually use less energy. We also accommodate
existing dark theme users, such as those with
low visibility, by meeting accessibility
color contrast standards. We also apply limited
color actions in the UI. So the majority of
the space is actually dedicated to dark surfaces. In dark theme, we
conserve energy, we enhance accessibility, and
we use color as an accent. Using these principles,
with a fine material design, dark themes by
the following properties. First, contrast. We need to make sure that the
surface color that we're using is contrastful enough
to the content that appears on top of it. Color type colored iconography. Depth. At higher levels of elevation,
surfaces become lighter. A little bit more
following this. Desaturation. We desaturate our primary
colors in order for them to be contrastful enough
against the dark surface, and we reduce the
amount of use that we have for that color in the UI. Those properties give us a
really good set of constraints for working. As many of the designers
in the room may know, constraints are actually
super helpful for knowing how to play, and how to build
your different concepts. As you know,
material is comprised of multiple systems that work
together in order to make a UI. We were able to adjust
two of those systems in order to create a dark theme. We also were able to leave
the other systems intact. I would like to walk you
through what we did on the two. I'm going to start
today with elevation. In light mode, we use
shadows to express elevation. The higher surface gets, the
wider of a shadow it casts. In dark theme, the same
approach wouldn't work. It's hard to see a shadow
against a dark background. In addition to using a
shadow in dark theme, we illuminate the
surface of each level at a rate that's closest to
the implied light source. The higher surface's elevation,
the lighter that surface becomes. That is expressed
through the application of a same eye transparent
overlay over our component surface. The surface overlay
values are designed to maximize legibility,
while ensuring that different
elevations levels are discernible from one another. Here, I'm actually depicting
all the different elevations that we have in our
elevation system with the different values
for the transparent overlays. Overlays also add
contrast between surfaces and their shadows, making
the edges of each component more discernible and readable. The elevation of overlays
are also not applied to colored components. Here, I wanted to show you an
example of what a top up bar looks like next to a card. A top up bar actually has a
higher elevation than a card. The difference is
actually seamless, and helps us see enough
difference between the two components, while
still continuing to keep a consistent
experience throughout the UI. In comparison, a light
theme relies on shadows, while a dark theme relies
on both a shadow and a semi transparent overlay
to express elevation. I'm going to move to color. At the risk of
stating the obvious, we know that inverting colors
would not be enough, right? Yes, it works for
black and white, no, it doesn't work
for your primary color. Instead, using the material
tool color palette generator, we're able to generate a tonal
palette for any brand color. That translates into a
set of different choices, so you can pick a desaturated
tone of your same primary. In dark theme, we
recommend that you keep your choices between
50% of the 200 level in order for that color
to be contrastful enough against a surface background. That was not enough. We also needed to consider
strategically, how do we deploy color in dark theme? It is not enough
for us to just be able to say, hey,
desaturate all the colors and continue to do the
same thing in a dark theme. We also needed to think a little
bit farther about, what is it that we do with this color. A dark theme should avoid
using a saturated color, as it does impact
accessibility standards, but it also vibrates against
the dark background, right? Here, I have an example
of the primary coming from our light theme
against the dark background, and it's really hard to see. It also induces eye strain. Instead, by having a desaturated
color as an alternative, material design dark theme
allows for this color to be noticeable enough
against a dark background, and also can serve as an
accent throughout the UI. One of the most important
relationships in the color system is that of
the container color versus the un-container color. What do I mean by that? If you have an
application that is using white as a container as
a color container for something such as a card, you need
an on surface color for it. That's what you use to place
your text, your icons on top of it. That works very
well on light theme. We pick a white and
we pick a black. However, when we
pick a primary, it's a little bit of a
different thing. Right? Our primary needs to also take
into account what color would live on top of it. If we have a button
that may have a primary color,
such as a purple, we need to figure out
what colored icons should be on top of it in order to
meet to be contrastful enough and meet accessibility
standards. In our case, we
actually picked a white. In dark theme, inverting doesn't
really quite work, right? On certain the surface case,
yeah, it's an easy one. We make our surface dark, and
we make our un-surface white. However, the primary color,
remember, has been desaturated. So applying the same white
color that we had before wouldn't necessarily work. Instead, we actually
pick a dark color to live on top of that
desaturated color. The translation of that is
that, at a component level, the color relationship
adjustment let us ensure that text can remain legible,
and meeting WCAG's-- meeting contrast ratio standards
on both light and dark theme. Here's a comparison of both a
button on light and dark theme. In comparison, a color
scheme in dark theme would not just be a one to one
translation of a light theme. It also minimizes the amount
of slots that we have. Like I said earlier, with
an adjusted color scheme, also came a change in
our strategic approach to the use of color. Here, we have also thought
through the mappings of these colors to
different components. To give you an example, in
a top up bar, in light mode, we would actually use our
primary as a container color, instead, in dark
theme, we actually rely on the surface
color in order to be the container color. Those default mappings
have already been changed, so you wouldn't have to
do that work yourself, it would just happen
automatically. We also had to consider the
implications of these changes to the state system. States visually
communicate the status of a component or
interactive element through the use of overlays. In dark theme, we keep
those same values, but we leave them
flexible enough so you can change
them in order to meet accessibility standards. A dark theme also uses dark
gray rather than black, and I know that this has
been at a point of contention in different approaches. We actually decided to
go with a gray color. Reason being, the
dark gray surfaces can express a wider range of
color, elevation, and depth because it is easier to see a
shadow on top of a gray color, instead of a black color. Dark gray surfaces
also reduce eye strain, as light text on
dark gray surfaces have less contrast than light
text on a black surface. Surface color needs to
be dark enough in order to accommodate other
UI colors and make them legible on elevation surfaces. I'm going to walk you
through the process of how we tested these changes. In order to meet
AA standards, it is recommended that
we meet at least 4.5 to 1 contrast ratios
between the surface and the content that
lays on top of it. In material, we also
rely on transparencies to communicate elevation in
typography and iconography. This approach allows us
to simplify color choices, and we didn't really
want to compromise that. In dark theme, we also
needed to take into account the difference in
elevated surfaces. As surfaces actually
become higher, there's a subtle
difference in color. So we also needed
to make sure that we thought through all
those details in order for them to be accessible. We needed to find a greater
contrast ratio than that require a AA standard. Because the contrast
ratio actually decreases as you go
higher up in elevation. Thanks a lot, elevation system. That's how we arrive
to this number. 15.8 to 1. Through testing
multiple colors, we'd realize that, in order to call
a surface color dark enough, we needed to meet a
contrast ratio of 15.8 to 1 between the surface color and
the white text on top of it in order for this to accommodate
for the threshold that changes through elevation. Testing that was very fun. This is actually a screenshot
of my colleagues artboard. We did extensive testing
on what is this threshold. But we felt that it was very
important, because it really allowed us to arrive
to the next part. What if you don't like our gray? Right. You can still customize it. So our approach is
to take the primary, the desaturated primary,
use it as an overlay on top of the gray that we provide,
and it just gives you the subtle hint of
color that would feel more harmonious with
the rest of the application. Using that new dark primary and
our newly minted 15.8 to one contrast ratio, we recommend
that you run the same text on large and normal text. Make sure that white text
meets or exceeds AA contrast ratios on all elevation levels. Here, I took the lowest
elevation and the highest elevation in order for
us to do the testing. The result is a
surface color that can feel more harmonious
with the rest of the UI and other color elements
that may appear. As you probably know
by now, our team is actually obsessed with
testing our own guidelines. What a better way to
do that than go back to our own case studies? That's how we came up with them. It was a way for us
to test our theming. And we decided to go
and take it for a spin. We set out to create
a set of dark themes for each one of our
case studies in order to test our guidelines. I'm going to walk you
through one of them. I'm going to walk
you through Owl. Owl is an educational
app that provides courses for people who want to explore
and learn new skills in design art, architecture, and fashion. Owl's design is bold in its use
of color, shape, and typography in order to express its brand. Owl is divided in
three sections. Learn, browse, and personalize. Today, in the
interest of time, I'm going to walk you through
one of these themes, learn, in order to
show you what we did. As you know, a dark
theme fills the UI with a dark surface color,
and uses color as an accent. Owl was tricky. It was already colorful enough. Making it gray would
not have worked. So we needed to preserve
the boldness of the color expression. First things first. We needed to find a less
saturated version of each brand color. Using our tonal
palettes, we were able to move to find an
alternative at the 200 level in order to preserve
a little bit of the boldness of the color. Second, using our
desaturated primary, we were able to figure
out a new dark primary. Using that dark primary,
we were able to generate different elevation
levels to use in the app. Running it through
the same text also allowed us to meet accessibility
standards on both the lowest and the highest elevation. The updated dark
primary also preserved some of the brand expression
that the app already had, while being more harmonious with
other elements in the screen. We also use a desaturated
primary for UI, but, however, we retained
the light themes primary in order to preserve
key branded components. We limited the use to one
or two branded elements that highly correlate
to the brand. Here's where we landed. A dark theme that applies
color strategically and remains bold in its aesthetic. All of these findings
would not work unless we make it work for Google. In collaboration with
multiple Google teams, we were able to generate a
Google material theme which has been adopted widely. You may have already seen
it in your own products. We needed to create a
supplemental dark theme for the Google material
theme, while meeting functional and experiential
requirements that are already ubiquitous to the brand. First, Google
material uses a gray from our own palette
as a background. Using gray reduces the amount
of high intensity contrast elements like text and
icons on top of the color. Using dark gray surfaces
also displays a wider range of color and elevation
than that of a black color. It also makes shadows
easier to see. In dark theme, Google's
materials color palette desaturates our primary
colors while still allowing the same amount
of breadth of use coming from the palette
against a dark background. It focuses on extending the UI. By desaturating
our primary colors, we are able to still
have a UI color that works for the majority
of the application, and we were also able to keep
our highly branded elements that correlate to the
brand in the same colors that they had before. We also decided to move the
Google color and the Google lookup from using the four
colors that we are known for, to use only using one
against the dark background. There are multiple
strategies that our teams have adopted in order
to implement dark theme. I want to take a moment to
highlight a few of them. I'm going to start
with Google Photos. As you may know, photos
automatically organizes all your photos
and makes them as accessible on
multiple platforms. In light mode, photos
builds from white. By building from
white, they also are able to use a primary
color as an accent throughout the application. It was important for us to
preserve the same experience in a dark theme. And, also, it was very important
to leave photography intact. We didn't really want
to mess with user generated photography. Here are a few highlights
of what we did. First, we use a dark
gray as a background. Second, we elevate
different components. In this case, the search
bar is a little bit higher with a white overlay so it
stands out a little bit more against the background. Third, we actually
move our lockup to just using a
monochromatic white. By using a dark
surface color, we are able to differentiate
other components against it. Again, you can see elevated
compounds above it, you can also see other
actions that relate better to this gray color. The app keeps the application
of this UI color intact. And what do I mean by that? In a light theme, you
may use a blue color as the primary
accent, so that means that your buttons
may actually bring that blue into the fill button,
as well as an outline button. We didn't really want to
mess with that relationship. So, by desaturating
the colors, we're able to preserve
everything in the same way just by making one color change. With that desaturation
logic, we were also able to introduce other
colors into the theme. In this case, adding a
red color for badging just felt right at home next to the
blue that was already present. The photo team worked
around constantly on making different
iterations for this. They also are
working with content that is changing all the time. Your photos, my photos are
uploaded into an application, so every experience
is different. Their implementation
of dark theme really highlights
the hero of the app-- our photos, and by
making them feel more like a virtual gallery. Speaking of cool images,
the Google team also worked hard on
implementing a dark theme, and I've been very
excited to see what they have come up with. One of the things that I
wanted to highlight today is how they figure
out an approach for turning illustrations
from light to dark theme. I know it's kind
of a tricky subject already, because illustration is
a tricky element for a systems designer. A good illustration
is already independent and has a lot of expression
when it's done well, and it captures the
audience's attention while telling complex
stories in a very simple way. Needless to say, adopting an
illustration from dark theme cannot just be an
automatic switch of colors. We wanted to preserve
the artistic integrity of an illustrator's
work, and give them a set of tools to use when
creating an alternative for a dark theme. Let me show you what we did. Again, I'm going to
start back in color. In dark theme, we wanted
to remain flexible with the use of color, so
we provided our illustrators with a desaturated
side of the palette. And, with that, we
started to work. So here we have a
Hira illustration. As you know, a Hira illustration
has a background in a subject. Both of those have different
approaches for dark theme. I'm going to start
with the background. On the left side, you
can see a background that is coming from a light theme. Colors are saturated already,
so they start to vibrate and they're hard to tell
against a dark surface. Making those same colors
darker is not enough. We are losing a
little bit of detail on the example on the left. Instead, color
shift to grayscale, and we shift the lightest
tone into its darkest count gray counterpart in order
to avoid the stark contrast. Let's move on to the subject. A subject instead needs to
remain the focus of attention in an illustration,
and in order for us to turn it from a
light to a dark theme, we use a desaturated
set of colors in order to color the subject. We also alter different
elements of the illustration to set up context in order to
surface moments of the light. Notice the light coming out of
the lamp on the left example. The result is an
illustration that can be placed on a
dark surface, retaining important communication
elements like highlighting. The subject of the
main point of focus, and allowing the background
to provide context. The app also has feature icons
or monotone illustrations. These illustrations were
already using a desaturated side of the palette. So we really didn't
need to do much there. We did some small
tweaking in making some of the colors fall
in line within the range of the desaturated colors,
but other than that, they worked great. And they can still stand out
against the dark surface. Speaking of color, let's
talk about Google Calendar. In Calendar, our users
rely on color quite a bit, and for many different
reasons, right? So users actually use
color to differentiate between multiple calendars. They also use it to
differentiate different events. They may even go into
a light or a dark theme at different times in the
day in multiple occasions. So changing color was
not an easy thing. You're already
Messing with a system that has a lot of meaning
inside of the application. Needless to say, colors are
actually perceived differently depending on their background. Something stands out
against a light background feels different than
a dark background. The calendar team created
a systematic approach to desaturate user
generated colors by keeping the color saturation
and brightness to a shorter threshold. All of these, while ensuring
the appropriate contrast and both light and dark theme. It's very hard to notice the
difference in these two colors, but it goes a long
way to help ensure the text is readable
against a color background in a dark theme. Yet, the adjustment
of all these user generated colors that
fit harmoniously also needed to fit with
other primary colors. In this case, we know that
desaturated blue coming for from the Google
material palette needed to also fit with these
user generated colors. Needless to say,
these colors also need to work in
elevated surfaces. It's not only a
matter of placing it at the lowest elevation, but
also placing it at the highest. So here I highlighted
a couple of examples of the primary blue being used
for something like highlighting the day, and the user generated
colors to showcase tips or badges on the left side. And one more thing. That Google branded fab keeps
the regular Google colors, and it feels right at home. Feels like a brand in there. The calendar team also
implemented a very thoughtful approach for color
on typography, the use of dark gray
helps make light gray text readable against it. It also showcases a lot
of emphasis and hierarchy. The result is that
is an app that uses color in a strategic,
expressive, and functional way. Speaking of functional,
you guys may have seen a little bit
about Android Auto, and, if you haven't,
I encourage you to check out Tuesday
session, "What's New on Android for Cars." Android Auto was designed
with safety in mind. It has a different
set of constraints, but one of the things that
really stood out to me is that they design with
larger touch targets in mind. Also, they need to simplify
the interface in order to minimize distraction. Android Auto appears on all
the displays inside cars, and these displays
have the capability of turning pixels off. That means that you're
saving more battery, you're reducing
the luminescence. It also uses dark theme
in both day and night. One more thing is that the
car's physical conditions changes throughout the day. You may be driving today
in a very sunny day, you may be driving tomorrow
in a very rainy one, and the lighting
conditions change. Also, car makers tend to use
a lot of dark colors already in their dashboards, in their
screens, and their accents. So we need to consider
this case very carefully and figure out an
appropriate approach for it. The first thing that we did is,
the foundation of the Android Auto Color strategy is
building from black. The team also adjusts the
primary desaturated color to work appropriately for light
and dark physical conditions. Remember the physical condition
that I told you earlier. If we have a very
sunny day, that light is really going to change
the saturation of your color. So altering that
color was very key. The team did a set of
many tests in order to figure out what was the
right hue for that blue. They also implemented
the elevation system with small tweaks. In order to make elevated
surfaces stand out against this black
background, and also to minimize distraction. Basing the interface
colors on black makes for a more consistent user
experience for Android Auto, and the drastic changes of
lighting between night and day. In summary, material
design dark theme is defined by three things. Building from a
dark color, ensuring that color has enough contrast
between light and dark, creating depth by
displaying a lighter surface color as the cost components
move higher in elevation, and third, desaturating
color and using it as an accent throughout the UI. That brings me to the
last part of my talk. Resources. We have prepared a sketch
sticker sheet for Android devices following our
Android Q support, and you can find it on
material.io/resources. We have also set up a
design lab here at IO, so you're welcome to go
ahead and try it and take it for a spin. Tell us why do you think. And we have also
set up a project to help you get started creating
a dark theme for Android. So, if you have Android Studio
or you are a developer yourself for Android, you are able to
download this code base today and take it for a spin. If you guys have
any questions, I'm going to go hang out of the
material design sandbox right after this talk, so please
free to stop by and chat. That's it for me. [GOOGLE LOGO MUSIC]
