[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]