[MUSIC PLAYING] LIAM SPRADLIN: Hi. I'm Liam, a designer and design
advocate on the Material Design team at Google. In this video,
we're going to learn how color works in Material
Design, how to apply custom colors to Material
Components, and how to handle edge cases with
further customization. First, let's talk
about color themes. A color theme in Material refers
to a constrained set of colors that define an interface. Here's an example. The default Material
Theme includes expressive colors, like
the primary and secondary, as well as color slots for
backgrounds, surfaces, errors, and more. Defining a color theme
this way is useful because it helps craft a
consistent and rational color story that can be applied
globally and consistently throughout your app. This helps users perceive
content and more easily understand how the app works. One nuance of the color
theme is "on" colors. On colors are called
"on" colors because they appear on other elements. For example, the on background
color for "fortnightly" is black because the text
that appears on the background is black, as well as other
elements, like icons, that also appear on the background. On colors are
useful because they can help ensure that content
appearing in various contexts throughout your app remains
consistent and readable. They also give you a
consistent global control over things like
color contrast so you don't need to fine-tune
the text on every surface with the same color, as long
as the corresponding on color for those surfaces meets
contrast requirements. These colors can also have
different emphasis levels, which can be helpful for
communicating information in state-rich environments or
when you create a dark theme. Next, let's take a
look at how color gets applied to components. Color is one of the
subsystems that allow you to theme Material
components, customizing them at a high level to create
a unique expression across your entire app. Each component's color
fits into a category. For example, the colors for
a button's container and text correspond to the Primary
and OnPrimary categories. These categories are also
shared by other components. So changing the value of the
primary color, for example, will have a ripple effect that
customizes all the components that use that category. Now that you know
how it works, let's create and apply a
custom set of colors. For this example,
we'll work in the Build a Material theme
project on Glitch. We built this project
at glitch.com/@material to make it easy to
customize components with simple code changes. You can see that although the
baseline Material theme uses a bright purple, not
every component or element uses the same bright purple. For example, the active state
of the navigation drawer appears to be a lighter shade. This is because Material uses
opacity and tonal palettes, which we'll see in a moment,
to expand our primary and secondary
colors' accommodating states and other
elements of components. We'll also open
up the color tool on material.io, which can help
us generate palettes and see how our colors
will work together. First, let's find a primary
color and copy its hex code. Once we have that, we can insert
it into our my-theme.scss file to update the primary color
across the entire theme. We can also add a
custom secondary color, so let's choose one that
goes well with our primary and get its hex code, too. And we'll insert that
just the same way. And just for fun, let's pick a
new background color, as well. And we'll copy its hex
code, just like before. And we can enter that into our
theme, as well, right here. So now we can see how these
colors have propagated throughout our
entire theme, right down to every last component. This theme uses Material's
default black and white on colors, responding to
primary and secondary colors for light or dark variations. Sometimes, you might run into
an edge case with color themes. One example is our Material
study app Crane, which is built for personal travel. One of Crane's brand colors
is a vivid red color, which can often carry semantic
meaning that communicates errors or other states. So in this case,
Crane has chosen to implement a
custom error color with this yellow-orange hue. This allows the red color
to remain expressive, while still ensuring the
interface communicates coherently with the user. You can implement custom
colors like this easily in your own Material theme
by adding a custom error color here. To explore custom color themes
in a design environment, you can also grab our
design kits for Figma at figma.com/@materialdesign. Just grab your colors
from the tonal palettes we generated before and apply
them to your global styles like this. You can dive deeper into color
by checking out our video on crafting a dark theme,
find more color guidance on material.io, and subscribe
to our channel for more design content and tutorials. [MUSIC PLAYING]
