Now we will give some functionality to our board, the idea that this the will give the.
Dark mode feature, and we'll also style on board by giving them by giving it some serious glass.
So let us, first of all, create a button which will be responsible for the dark mode.
So let us, first of all, import button from material way.
Or you have to import it if you want to use the material Ableton the Newton portrait to import.
But from.
And out of this, we'll vote at you.
It's less material, less modern for better.
This is a go to import department and after each one we'll have the bottom, so that will be a bottom.
Yeah, the set of this needs a closing tag, basically inside the button will be giving an icon which
to their dark mode icon, so let us skip that first, so I need to search that icon on the alleyway.
When I come here, I go to the icons and I search for.
Sergeant Ward.
We can use any one of them, like in all three I can is only one of them, so I think I showed you this
one.
Oh, this one.
Oh, good, this one's better.
I copy that and then I go to my escort and now I will paste to here.
So once I stood now, I can easily use it for.
I'll use that inside this buttons or.
And here I will import that.
Like, right, Nas.
It should give me an option to auto import.
On giving me let me close this.
I can just copy it because I don't like typing same things again and again.
And then I can give a self-closing take, and then I see it.
If I see brothers running ads running in all our territories, we need to go to the browser and see
if the changes are being reflected.
Oh, yeah, we can see a button which is responsible for the mode.
Now we need to make the setup, the things in order and we need to style are harder.
So let's go ahead and do that for the very first thing which you really need is we need to give some
glasses, so we'll give a glass to this device was lost before.
So that will be the.
Name of.
And that last name of Heather, so after that, I don't think any class name is there, so the only
class name we should look giving is to the bottom part.
OK, we can give.
Last name as safe because this would be saving the.
Dartmouth.
OK, when I see it now, we want to give styling to this glasses inside the CSIS.
So this is harder and does this.
So let us go to the next door, see us, which is completely empty right now.
So first of all, I need to grab some global CSIS, which is common for like the entire application
and that I will be copying from the project, which I've visited before.
So that is nothing to stop.
Well, let's see like different colors and different family, and also that this is what we want to
do.
So let me just copy and paste it here.
But this is not a multi multi-year like this.
It is given to you by the React.
Also, like in the beginning, the matter is that I just cleared the index cases and the system also
deleted.
That's why I need to do it again.
OK, no worries.
So now we'll create the header in the style, the header component.
So we'll start with the header and inside the header will giving.
The very first thing is the display flags, so we'll be displaying we'll be making use of the Flexbox
display flags and I want this and I want the items to be aligned in the center.
So line items.
To these, OK?
And let me save and see how that looks.
OK, that looks pretty good, but that is also change because we have given that the global success
OK, things are now in one line.
But I want a little bit of space in between.
I wanted to I can to go here, not right next to the one.
So for that, I will provide us property just to fire contained contained space between.
So what it will do is it will look like provide some spaces between the elements inside this particular
device.
So we'll save it and now if I go.
And Jack, you can see that the space, obviously that and the like went to the terminals.
But that's OK.
OK, so now we can move further and stay to after they had done is done and all we want to like style
for document.
Now what dark mode will do, basically, is that it will change the background color to black.
There is nothing more and it will change the header to white.
So that is what of.
Lord.
Is.
Background color to.
Black.
As simple as that, on after that will create the.
At the.
There are.
More to one and that will be followed.
Why not wait, right, let me save it, and this was the only thing now we need to provide some JavaScript
so that we toggle among that ultra toggle among that so that we will do now.
So the very first thing is we will pass out prop inside this as an object inside this function.
So that will be under toggle dark mode.
So that will be handled.
Oh, go.
I took more.
Simple.
And inside of this, we'll provide an on click function.
So on Glick.
And beside this, there will be a vital function.
So basically, you don't even need this calibrated inside, but I'm just going to make things a little
bit more clear.
So dark mode and inside of this we'll like provide a function that will be.
Previous.
Mould will be an argument, and it will just reverse it like whatever was the well, you know, it is
just reversing that value, for example, it was like.
It most certainly changed Iraq, and if it started, it will change like as simple as that, this exclamation
is the negation saying this is the negations and like whatever the value, it will just make, you get
that from that venue.
So I think that certainly let me just to say, wait and see.
That works.
I come here to.
Now, right now, we don't see any changes, basically.
Why's that?
And of a lot more is not a function.
We.
Great, great, great, great.
Bill told our model why it's not the phone.
I have created a homes.
Basically, this will be rendered inside the app, like we'll be waiting like we are passing it as appropriate,
not, but we'll be making use inside the abductees.
That is why it's not working as expected.
Otherwise, everything else is perfected.
The way looks good and the functionality is also like, complete.
So for the head, we are done for DNA.
And next will be building.
I don't know what maybe the search component, what comes after that?
Let me see.
We're done for this.
Now we'll be providing some he had other things, but nobody thinks will be better as we process right
now.
I mean, look, not look exactly the same, but we will make the things that look eventually.
OK, so.
Right now, we're reading the search component, so.
That's it for this video.
This was the Henry review.
And next will be creating the third component of this food search eating.