[Music]
hi I'm Liam a designer and design
advocate on the material design team at
Google and host of design notes in this
video we're going to create a dark theme
for a material study app reply which is
an email app made for speed and function
we'll learn how to craft the perfect
palette and apply it to text surfaces
and components to make your interface
more comfortable and readable in the
dark but before we turn all the lights
on reply we should understand the app's
overall identity and how that fits into
its default theme replies brand places
emphasis on communication the app
prioritizes functional qualities
favoring ease of use over decorative
design elements for the purpose of
creating a dark theme the most important
element of expression is color replies
color scheme uses a dark blue grey
primary color paired with an orange
yellow secondary color because the
secondary color is rarely used replies
UI is often monochromatic the subtle
color scheme allows content to be easily
read without distraction the secondary
color has an outsized impact wherever
it's used emphasizing critical actions
and clearly pronouncing branded moments
in the app knowing how a color relates
to replies expression of brand and its
default theme we can make informed
adjustments to its palette for a usable
and expressive dark theme in material
color systems are based on tonal
palettes these palettes use your brand
colors to create a set of harmonious
variants that come together in a
comprehensive color system applied
across your app ensuring style and
legibility here you can see replies
custom tonal palettes when crafting a
dark theme with material lighter
variants are chosen so that your color
system can remain expressive and
maintain appropriate contrast without
causing eye strain more saturated colors
to individually vibrate against darker
backgrounds making them harder to read
lighter tones also provide more
flexibility in varying the color of
elevated surfaces which will look out
shortly now that we have a handle on
replies tonal palettes and the colors
we'll be using in our dark theme it's
time to start adjusting color values in
our mock-up for this tutorial I'll be
working in figma in material dark themes
the bottommost layer of the interface is
typically a dark gray with the hex value
one two one two one two
material dark themes don't use pure
black backgrounds to avoid perceived
smearing or pixel bleed from light text
on a very dark background this slightly
reduced contrast makes the interface
easier on the eyes and replies
monochromatic inbox view email cards
have a slightly lighter color than the
backgrounds so we should lend that same
treatment to the cards in the dark theme
to maintain the inboxes visual hierarchy
will select all the email cards and set
the fill value to the same dark grey
value then we'll select the surface
overlays for those cards and set them to
white with a 2% opacity
now the surfaces look great but the text
is unreadable so let's work on text
colors next to understand text colors
and dark themes it's important you
understand how color is applied to text
in the broader material design system
material components use the notion of on
colors which are so called because their
colors that appear on top of components
and key services they use primary
secondary surface background ereira
colors on colors are primarily used for
text to ensure that remains legible on
these surfaces the default on colors and
material are white and black since a
black or dark on color wouldn't be
suitable against our darkened surfaces
will use white the system for
establishing text hierarchy with this on
color is simple high emphasis text is
given an opacity of 87% well medium
emphasis text is applied at 60% and
disabled text uses an opacity of 38%
high priority text isn't pure white
because as I mentioned earlier white
would visually vibrate against our dark
backgrounds additionally white text
against a dark background can harm
legibility since the light from that
text appears to bleed or blur against
the dark background knowing that let's
fix the text colors first we need to
select all the high emphasis text and
set it to white with an 87 percent
opacity then we'll select the medium
emphasis text and set it to 60 percent
you might notice this email tile is only
comprised of medium emphasis text this
is because the message is red so replied
de-emphasizes it compared to unread
messages in dark themes built with
material elevated surfaces and
components are colored using overlays
the more elevated the surfaces the
stronger and brighter the overlay
becomes this is a way of communicating
elevation in hierarchy when the
background is too dark to reliably
portray dark shadows so let's finish up
by adjusting our component surfaces for
the Fab and the bottom app bar just like
before we'll set the base surface to one
two one two one two then we'll set the
surface overlay to white at 12% opacity
because the bottom at bar is elevated
above the primary content area then
we'll apply a new color to the fab for
that we'll go back to the tonal palette
and choose the 700 value of replies
secondary color for small high-impact
components like the fab you could choose
a more saturated color as long as it
retains contrast but for now we'll set
the surface
2fc c13 be the same bright yellow-orange
appears on the corner of selected cards
in reply
it's another strongly branded moment but
it doesn't fit cleanly into the UI
because it's too strong for the shape
it's given in situations like this you
can take a look at the secondary variant
color and work backward to find
something that's appropriately
expressive without being a distraction
for reply we'll stick with the normal
variant color FFF 5 a zero
luckily the icons and our components are
already the right colors so we don't
need to change them if you want to go
even further with your dark theme you
can use custom surface treatments for
additional expression or emphasis as we
learned earlier the floating action
button and reply is a highly emphasized
component that also represents a
strongly branded moment in the app so we
might decide to maintain its color
expression and replace dark theme by
using a replies original secondary color
so we'll go back to the fab and make its
surface color f9 a a33 we might also
want to bring back the primary color as
a custom surface overlay for the bottom
app bar and email cards so let's make
the bottom app bars overlay 3 4 4 9 5 5
and set the opacity to 48 percent for
the email cards we'll do the same thing
but with an opacity of 4 percent now we
have a beautiful custom dark theme you
can learn more about dark theme at
material I Oh
or try a hands-on tutorial at gqo slash
code labs if you liked this video give
it a like and subscribe to our channel
for more design tutorials in other
videos thanks for watching
[Music]