hey guys welcome back to amateur ey
playlist in this video we’re gonna
finally take a look at theming so let’s
say we wanted to introduce a theme to
our application how we’re gonna go about
that so I’m gonna switch to the Mitel UI
documentation I’m gonna click on get
started and let’s move on to
customization themes now if you scroll
down to the section that talks about the
API for setting up a theme it’s actually
fairly simple what you need to do is
easy to import Mui theme provider which
if you use redux might ring a bell but
instead of passing a store as a property
to the provider in this case we’re
passing a theme now the theme object is
going to be generated by using the
create Mui theme helper method so switch
back to our code what I’m gonna do is of
course have to import statements let’s
have the Nui in provider first of all
and then we’ll have create Mui theme so
that we can create our theme object and
I will import them from achill UI slash
core like that so what we’re gonna do
next is instead of rendering a an app
component we’re actually gonna render a
wrapper so we’re gonna wrap the app
component with the Mui theme provider
I’m gonna have to close it off obviously
same tag so let me do just that and then
the second argument just like before
we’re gonna have our Dom elements now
the only required parameter to Mui theme
provider is of course the theme object
as you saw on the docs so we’re gonna
pass down on that theme object but first
we have to create it of course so the
Const
theme we’re gonna call create and UI
theme I’ll call that method I’ll save
the file and as you can see here the
look of the application didn’t change by
a bit but still have the same app just
like before now in order to see what the
theme object actually represents we’re
gonna do a simple console.log of that
theme object so that we can actually
inspect the properties that it has open
the console and as you can see here we
already get an object that we can take a
closer look at so let’s expand the
properties and go through all of them
now first of all we have the break
points now the break points might look
familiar to you if you use the grid
component so for example the extra small
value refers to mobile devices like
phones these small property would be
tablets desktop devices will begin at
large and for extra-large screens we
have the extra
large property now the pixel values you
see on the right refer to the start of
the range to which the property refers
to so for example the extra-large
dimension will begin at 1920 pixels you
might also notice the special direction
property which in this case is set to
left to right but you could also set it
to right to left now to demonstrate that
you can actually go to the docks and
click on this icon at the top right hand
corner and as you can see this will
change the direction of the theme this
is what the property refers to now apart
from breakpoints we also have the
palette now the palette is probably the
most common property on the theme object
that you’re gonna interact with in this
case we want to focus our attention on
the three primary intentions we have the
primary secondary as well as the error
intentions and as you can see all of
them also have variations including
light main and dark in the meantime you
could also notice the special type
property which refers to the type of the
theme for your application now in this
case it defaults to light we could also
set it to dark if you wanted to use the
dark variant of the theme now apart from
colors we also have shadows we already
have a large preset of those we also
have typography shape spacing which has
the unit property that defaults to 8 we
have transitions as well as z-index now
you don’t necessarily need to know all
of them but the one that you’ll most
likely work with will be the palette so
let’s begin with that one so let’s say
you wanted to change the primary color
of the application to red so what I’m
gonna do here is I’ll remove the
console.log let’s head over back to our
documentation for a second so I’m gonna
go to style color this will burn s the
article that talks all about the colors
in my chill UI now the thing you need to
know about colors is that first of all a
color consists of a hue so this would be
like red pink purple of course there’s a
lot of them as well as the shade now the
shade will have a range of values
beginning from 50 being the lightest one
to nine hundred being the darkest one
but aside from primary colors we also
have accent colors so for example deep
purple also has the four accent colors
and these are the four colors at the
bottom over here so a 100 a 200 and so
on and they usually begin with the
capital letter so that’s how they
distinguished from primary colors so if
we wanted to import a color what we have
to do is to use one of the built-in
colors and material UI for instance if I
wanted to use the purple color we will
import purple from a tool UI core colors
/ purple and then we can assign that
purple color object directly to the
intention we want that color to be
applied to so let’s do exactly that now
first of all we’ll have to pass in a
configuration object to create a new
item if you don’t pass any object or any
options to create a new item it’s gonna
create a default theme and this is why
you’re not gonna see any difference by
calling that method but if you do pass
the options you could actually customize
the theme in this case we want to
customize the palette so I’ll target the
palette key and then I’ll target the
primary intention and I’ll set it to red
let’s support that color as well so I’ll
do import red from material UI / core /
colors / red so as you can see the
moment I import the color the color of
the application changes to red and if
you are curious about the color itself
this is actually an object so if I did
console.log of red let’s say that I’m
going to bring back the console and if
you inspect the object you’re gonna see
that it contains all the shades
beginning from 50 to 900 you also have
your accent colors and you also have
your special variations including main
light and dark and these are the ones
that get assigned to your color by
default if you don’t specify any of the
shades of that color so what I mean by
that is that the moment you assign red
to primary material UI will
automatically read main light and dark
variations and assign them to that
primary color
now of course apart from assigning the
entire color object you could also
customize your color you can actually
specify the exact shades of that color
that you want to use so then to see it
in action let’s customize the secondary
color one of the good colors that
matches with red would be yellow now
let’s actually go back to the dogs let’s
look for a yellow color now conveniently
for us material UI or you provides a set
of colors that we can pick from and like
I said one of the matching colors would
be yellow so we could probably pick
something like yellow itself or we could
to pick amber and I think this is the
one that I’m gonna go with so let’s go
back to our code I’m gonna import amber
so in this case I’m actually gonna use
name imports so let’s do amber and this
one’s gonna come from colors so I’ll
have to remove red and at the end so
that we can have a named import like I
said and then for the secondary color
I’m gonna pass in all the three
variations so we’re gonna have mean
we’re gonna have light and then we’re
gonna have dark at the end now what we
can do over here is we can actually
start assigning the shade of the color
so in this case instead of passing the
entire color object what we can pass
instead is a shade for that color so for
example I can pass in five hundred and
this would refer to the five hundred
shade variation for that color so it
would be this color over here and in
fact as you can see over here it’d be
identical if I passed in the hex value
itself so what I can do here for a
second is I can comment out the two
other ones if I save it we won’t really
see anything but that’s because I have
to update one of our components
so let’s actually update the color of
the plus icon in the header to yellow so
what I’ll do is I’ll go to layouts
header and then the header actually uses
the dialog so we’ll have to customize a
dialog so let me go to exercises dialog
you scroll to the bottom and I’ll put in
a color property I’ll set it to
secondary because right now we’re using
the default color so I’ll change ya
spacing over here as well so it’s more
readable so let me fix that okay so the
moment I save it you could see that the
color for the button changes to yellow
in fact it changes to the secondary
color that we’ve set in our theme go
back to index this would be the yellow
color that you see for the button and in
fact you can also customize light and
dark but you don’t really have to as
long as you set the main key all the
other ones are gonna be Auto calculated
for you now like I said we could also
set a hex value for the color so copy
the hex value and this is the same 500
shade that we’ve used before so if I set
it to the
same one it should really make any
difference I’m gonna put in the hash at
the beginning close off the string and
then we have the same yellow color for
our button I’ll bring it back to this
numeric value and in fact what I’ll do
is I’ll use one of the X and colors
instead I think the one I’m gonna use is
gonna be a 400 so let’s try that one
I’ll put it in and I’ll finish off with
the rest of the keys so I’ll provide the
light one so for instance that one can
be amber 200 it’ll be this variation
over here and then for the dark one so
we could set it for instance – amber 800
if you’re curious about the subjects
over here for the accent color actually
use a dot because the value begins with
the letter so for an object key that
begins with the letter you could
actually use a dot but in this case for
the numeric values I actually had to use
brackets because those values do not
begin with a letter I’ll put a new comma
to fix up the error and this is the
color that we got in the end
now I think the dark variation is too
dark a bit too dark so I’m gonna change
it to 700 and now it’s not too bad in my
opinion now the other thing we could
also do is we can also customize the
type of the theme because right now the
type defaults to light but we could
actually change it to dark like this the
moment I do it you could see that the
name variant changes to dark so
everything turns black now to update
these titles over here what we can do is
we can go back to one of our components
in fact the component that deals this
panel on the left
it’ll be exercises and XJS so what we
can do is we can update the color so for
instance I’ll set color to use secondary
I’ll put it to the top I’ll save it and
we can also update the title for this
typography over here so I’ll set color
let’s do a secondary as well
this will updates this title over here
and in fact if I select an exercise the
title for the exercise is also going to
be updated and the same one goes for the
Edit form as well the icons over here I
think we’re gonna make them red so if I
scroll up over here so what can do is we
can set the color to let’s do primary
and this will be the primary red color
and then lastly let’s go to our layouts
in this case we have a header and this
header actually has an inline style over
here I think what I’ll do instead is
I’ll import with styles let’s do that
from material UI / core / styles what I
want to do in the end is I’ll pass in
this what Styles object or function I
should say let me pass in these Styles
object we’re about to create so I’ll put
any constant oops
constant styles in this case we don’t
need a theme but we’ll create a flex
class I’ll set flex to one and then
instead of style which will actually
recreate a new object and every we
render we’re gonna do is we’re gonna
pass in a class name we’ll do classes
dot flex classes will be undefined so
we’ll have to extract them from props
and this should be class name with 2’s
not one and this will fix that now this
is just a small refactor this doesn’t
really change this styling this will
merely use a different method for
styling and then in the footer what I
actually wanted to do is I wanted to
customize these elements at the bottom
over here so I’ll change the indicator
color to secondary oops should be
secondary and the same thing for text
color I’ll set it to secondary as well
and then lastly to update the background
color to red we could actually go from
paper to app bar I’ll set position to
static I’ll close it off and also update
the closing tag and instead of importing
the paper component will import app bar
and this will change the footer
background color to red as you can see
here we can switch between the tabs and
the glowing color in this case will also be secondary or in this case yellow
playlist in this video we’re gonna
finally take a look at theming so let’s
say we wanted to introduce a theme to
our application how we’re gonna go about
that so I’m gonna switch to the Mitel UI
documentation I’m gonna click on get
started and let’s move on to
customization themes now if you scroll
down to the section that talks about the
API for setting up a theme it’s actually
fairly simple what you need to do is
easy to import Mui theme provider which
if you use redux might ring a bell but
instead of passing a store as a property
to the provider in this case we’re
passing a theme now the theme object is
going to be generated by using the
create Mui theme helper method so switch
back to our code what I’m gonna do is of
course have to import statements let’s
have the Nui in provider first of all
and then we’ll have create Mui theme so
that we can create our theme object and
I will import them from achill UI slash
core like that so what we’re gonna do
next is instead of rendering a an app
component we’re actually gonna render a
wrapper so we’re gonna wrap the app
component with the Mui theme provider
I’m gonna have to close it off obviously
same tag so let me do just that and then
the second argument just like before
we’re gonna have our Dom elements now
the only required parameter to Mui theme
provider is of course the theme object
as you saw on the docs so we’re gonna
pass down on that theme object but first
we have to create it of course so the
Const
theme we’re gonna call create and UI
theme I’ll call that method I’ll save
the file and as you can see here the
look of the application didn’t change by
a bit but still have the same app just
like before now in order to see what the
theme object actually represents we’re
gonna do a simple console.log of that
theme object so that we can actually
inspect the properties that it has open
the console and as you can see here we
already get an object that we can take a
closer look at so let’s expand the
properties and go through all of them
now first of all we have the break
points now the break points might look
familiar to you if you use the grid
component so for example the extra small
value refers to mobile devices like
phones these small property would be
tablets desktop devices will begin at
large and for extra-large screens we
have the extra
large property now the pixel values you
see on the right refer to the start of
the range to which the property refers
to so for example the extra-large
dimension will begin at 1920 pixels you
might also notice the special direction
property which in this case is set to
left to right but you could also set it
to right to left now to demonstrate that
you can actually go to the docks and
click on this icon at the top right hand
corner and as you can see this will
change the direction of the theme this
is what the property refers to now apart
from breakpoints we also have the
palette now the palette is probably the
most common property on the theme object
that you’re gonna interact with in this
case we want to focus our attention on
the three primary intentions we have the
primary secondary as well as the error
intentions and as you can see all of
them also have variations including
light main and dark in the meantime you
could also notice the special type
property which refers to the type of the
theme for your application now in this
case it defaults to light we could also
set it to dark if you wanted to use the
dark variant of the theme now apart from
colors we also have shadows we already
have a large preset of those we also
have typography shape spacing which has
the unit property that defaults to 8 we
have transitions as well as z-index now
you don’t necessarily need to know all
of them but the one that you’ll most
likely work with will be the palette so
let’s begin with that one so let’s say
you wanted to change the primary color
of the application to red so what I’m
gonna do here is I’ll remove the
console.log let’s head over back to our
documentation for a second so I’m gonna
go to style color this will burn s the
article that talks all about the colors
in my chill UI now the thing you need to
know about colors is that first of all a
color consists of a hue so this would be
like red pink purple of course there’s a
lot of them as well as the shade now the
shade will have a range of values
beginning from 50 being the lightest one
to nine hundred being the darkest one
but aside from primary colors we also
have accent colors so for example deep
purple also has the four accent colors
and these are the four colors at the
bottom over here so a 100 a 200 and so
on and they usually begin with the
capital letter so that’s how they
distinguished from primary colors so if
we wanted to import a color what we have
to do is to use one of the built-in
colors and material UI for instance if I
wanted to use the purple color we will
import purple from a tool UI core colors
/ purple and then we can assign that
purple color object directly to the
intention we want that color to be
applied to so let’s do exactly that now
first of all we’ll have to pass in a
configuration object to create a new
item if you don’t pass any object or any
options to create a new item it’s gonna
create a default theme and this is why
you’re not gonna see any difference by
calling that method but if you do pass
the options you could actually customize
the theme in this case we want to
customize the palette so I’ll target the
palette key and then I’ll target the
primary intention and I’ll set it to red
let’s support that color as well so I’ll
do import red from material UI / core /
colors / red so as you can see the
moment I import the color the color of
the application changes to red and if
you are curious about the color itself
this is actually an object so if I did
console.log of red let’s say that I’m
going to bring back the console and if
you inspect the object you’re gonna see
that it contains all the shades
beginning from 50 to 900 you also have
your accent colors and you also have
your special variations including main
light and dark and these are the ones
that get assigned to your color by
default if you don’t specify any of the
shades of that color so what I mean by
that is that the moment you assign red
to primary material UI will
automatically read main light and dark
variations and assign them to that
primary color
now of course apart from assigning the
entire color object you could also
customize your color you can actually
specify the exact shades of that color
that you want to use so then to see it
in action let’s customize the secondary
color one of the good colors that
matches with red would be yellow now
let’s actually go back to the dogs let’s
look for a yellow color now conveniently
for us material UI or you provides a set
of colors that we can pick from and like
I said one of the matching colors would
be yellow so we could probably pick
something like yellow itself or we could
to pick amber and I think this is the
one that I’m gonna go with so let’s go
back to our code I’m gonna import amber
so in this case I’m actually gonna use
name imports so let’s do amber and this
one’s gonna come from colors so I’ll
have to remove red and at the end so
that we can have a named import like I
said and then for the secondary color
I’m gonna pass in all the three
variations so we’re gonna have mean
we’re gonna have light and then we’re
gonna have dark at the end now what we
can do over here is we can actually
start assigning the shade of the color
so in this case instead of passing the
entire color object what we can pass
instead is a shade for that color so for
example I can pass in five hundred and
this would refer to the five hundred
shade variation for that color so it
would be this color over here and in
fact as you can see over here it’d be
identical if I passed in the hex value
itself so what I can do here for a
second is I can comment out the two
other ones if I save it we won’t really
see anything but that’s because I have
to update one of our components
so let’s actually update the color of
the plus icon in the header to yellow so
what I’ll do is I’ll go to layouts
header and then the header actually uses
the dialog so we’ll have to customize a
dialog so let me go to exercises dialog
you scroll to the bottom and I’ll put in
a color property I’ll set it to
secondary because right now we’re using
the default color so I’ll change ya
spacing over here as well so it’s more
readable so let me fix that okay so the
moment I save it you could see that the
color for the button changes to yellow
in fact it changes to the secondary
color that we’ve set in our theme go
back to index this would be the yellow
color that you see for the button and in
fact you can also customize light and
dark but you don’t really have to as
long as you set the main key all the
other ones are gonna be Auto calculated
for you now like I said we could also
set a hex value for the color so copy
the hex value and this is the same 500
shade that we’ve used before so if I set
it to the
same one it should really make any
difference I’m gonna put in the hash at
the beginning close off the string and
then we have the same yellow color for
our button I’ll bring it back to this
numeric value and in fact what I’ll do
is I’ll use one of the X and colors
instead I think the one I’m gonna use is
gonna be a 400 so let’s try that one
I’ll put it in and I’ll finish off with
the rest of the keys so I’ll provide the
light one so for instance that one can
be amber 200 it’ll be this variation
over here and then for the dark one so
we could set it for instance – amber 800
if you’re curious about the subjects
over here for the accent color actually
use a dot because the value begins with
the letter so for an object key that
begins with the letter you could
actually use a dot but in this case for
the numeric values I actually had to use
brackets because those values do not
begin with a letter I’ll put a new comma
to fix up the error and this is the
color that we got in the end
now I think the dark variation is too
dark a bit too dark so I’m gonna change
it to 700 and now it’s not too bad in my
opinion now the other thing we could
also do is we can also customize the
type of the theme because right now the
type defaults to light but we could
actually change it to dark like this the
moment I do it you could see that the
name variant changes to dark so
everything turns black now to update
these titles over here what we can do is
we can go back to one of our components
in fact the component that deals this
panel on the left
it’ll be exercises and XJS so what we
can do is we can update the color so for
instance I’ll set color to use secondary
I’ll put it to the top I’ll save it and
we can also update the title for this
typography over here so I’ll set color
let’s do a secondary as well
this will updates this title over here
and in fact if I select an exercise the
title for the exercise is also going to
be updated and the same one goes for the
Edit form as well the icons over here I
think we’re gonna make them red so if I
scroll up over here so what can do is we
can set the color to let’s do primary
and this will be the primary red color
and then lastly let’s go to our layouts
in this case we have a header and this
header actually has an inline style over
here I think what I’ll do instead is
I’ll import with styles let’s do that
from material UI / core / styles what I
want to do in the end is I’ll pass in
this what Styles object or function I
should say let me pass in these Styles
object we’re about to create so I’ll put
any constant oops
constant styles in this case we don’t
need a theme but we’ll create a flex
class I’ll set flex to one and then
instead of style which will actually
recreate a new object and every we
render we’re gonna do is we’re gonna
pass in a class name we’ll do classes
dot flex classes will be undefined so
we’ll have to extract them from props
and this should be class name with 2’s
not one and this will fix that now this
is just a small refactor this doesn’t
really change this styling this will
merely use a different method for
styling and then in the footer what I
actually wanted to do is I wanted to
customize these elements at the bottom
over here so I’ll change the indicator
color to secondary oops should be
secondary and the same thing for text
color I’ll set it to secondary as well
and then lastly to update the background
color to red we could actually go from
paper to app bar I’ll set position to
static I’ll close it off and also update
the closing tag and instead of importing
the paper component will import app bar
and this will change the footer
background color to red as you can see
here we can switch between the tabs and
the glowing color in this case will also be secondary or in this case yellow
Please follow and like us: