All language subtitles for 9. Styling - Themes (Default Theme)

All right.

Back at the documentation page still under the customization tab.

But now all the way down here under default theme it brings up the object that is the default theme

provided to us by material UI.

We're going to end up going over almost everything in this object but right now we're really just interested

in this pallet option.

The first property under the pallet object is common which is an object itself and that holds common

colors that you might use throughout your application.

So the main brand colors for whatever site you are working on.

You can put those here so that it's easy to reference in your code all from one central location.

That way if you need to try out say a different colored gray or green you can go ahead and just tweak

that one value right here and then that will be reflected everywhere across the application that you've

referenced that value this is much easier than having everything isolated and having to go in and scour

for obscure files and then go line surfing to try and figure out where it's actually being used so this

already provides a really convenient place to start managing your colors underneath the common object.

We have the type and it defaults to light so you can set a light or a dark property for your palette

which makes it really easy to change a bunch of options just from the one single value the default theme

comes with variance for the light and dark types.

So you can imagine being able to programmatically implement a way to change between this light and dark

setting underneath the type we have the primary object and this is going to be the primary colors of

your application.

This is where I think the material UI team did a really great job and created a really interesting set

of features where if you actually just provide this main color for your primary or your secondary material

UI actually then goes and generates a light and a dark version that you can call on without having to

explicitly set them.

This is really helpful if you just have a main color that you know you want to be using and then you

can just use this to automatically create accents that you know are going to match I think that that's

a really interesting design feature that they included with this and definitely one that shows a lot

of consideration for the developers many material UI components actually get their default colors from

this primary and secondary setting.

And so just by changing this you'll automatically start seeing these colors show up when you use your

components underneath the primary and secondary objects.

We have the error object and that is just the same type of palette system and main light and dark colouring

that they have although this is of course going to be for when you're displaying an error.

Below are error colors.

We have the gray object and this just has a bunch of different grays.

So depending on the value that you provide it will be a darker and darker shade of gray.

So this is really useful if you just really quick need a gray or you really just want to make sure that

you're using consistently lighter or darker colors throughout your application.

Now there are a couple options down here.

This contrast threshold the get contrast text augment color and tonal offset.

These are all options used for material UI.

Figuring out how to balance the color of the text with the colors of the background for the components

and making sure that it maintains the correct level of readability no matter what options you have set

in your theme you probably won't have to mess with these much unless you start getting into some really

specific color cases beneath those options.

You have the text object and this provides different capacities for your text depending on its importance

on the screen underneath the text.

Here we have the divider which uses this lower opacity and then under the divider we have the background

object and this object has the default background color for the entire page as well as the paper component

which is used commonly throughout material UI.

Which brings us to the last option here which is this action object.

And here again we just have a number of different capacities depending on the action that you are trying

to display.

So this is the entire palette object inside of the theme object and all of the functionality that it

provides to us and with generating these other presets and now that we know what it's providing for

us I think that we can go over and start writing some of these options for ourself.