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