00:00:02 Now let's finally create our theme toggle.

00:00:06 We can do that by creating a new component in components navigation navbar, and let's call it theme.tsx.

00:00:15 Run RAFCE.

00:00:18 imported right here, that's going to be a self-closing theme component coming from that slash theme, and then you can start implementing it.

00:00:27 For creating this entire theme picker, we'll be referring to Shadzian's documentation, because I want to teach you not just how to follow along with me,

00:00:36 but also how to read documentation and implement things that it tells you to do.

00:00:41 You'll notice that a lot of things you'll be able to reuse from the docs, but some things you'll have to change to make them accommodate your specific application.

00:00:49 In this case, we'll be referring to docs Next.js dark mode.

00:00:53 So if you search for dark mode and click Next.js, you'll be redirected to this documentation page.

00:00:59 We have already done step one, two, three, but now we have to focus on step four, which is placing a mode toggle on your site to toggle between the light

00:01:10 and the dark mode.

00:01:11 So let's just copy this part right here and paste it right here in our theme.

00:01:15 You'll immediately notice that this breaks our application, but let's fix it step by step.

00:01:21 First, let's define this as const theme, as we have initially defined it.

00:01:26 It's equal to a functional component that we can then export to default at the bottom.

00:01:31 So export default theme.

00:01:34 Next, we need to install a button component.

00:01:36 So, let's go to our terminal, and you know the drill.

00:01:39 mpx shad-cn add-latest add-button.

00:01:44 It'll immediately install it, and you can see that it works.

00:01:49 It successfully changes the theme.

00:01:51 You can now change the theme in just a single button click, from light to dark to system.

00:01:58 And the changes you apply here will automatically be reflected throughout all of our other pages and components.

00:02:05 How cool is that?

00:02:06 Do you need to understand how this code works?

00:02:08 Sure, and it's fairly straightforward.

00:02:11 We use the UseTheme from NextThemes, and then we use a Shadzian dropdown that basically changes that setting based on whatever we choose.

00:02:19 We then import it into our navigation bar, and just like that, the changes are reflected in our layout, And with the layout,

00:02:28 they're reflected in all the other pages because we're wrapping them with the theme provider.

00:02:33 And with that, you have successfully implemented the navigation bar, as well as the next themes to modify the themes, and then you learn how to install

00:02:44 ShadCN components, and specifically we installed the button component and the drop-down component to make our theme settings work.

00:02:51 Great job.

00:02:52 I was about to say that this is starting to look like the finished application, but we're not at that point yet.

00:02:57 We just have the knob bar.

00:02:59 But I think you can already start seeing how all of these different pieces are coming together.

00:03:03 We have the layout, which controls all the pages.

00:03:06 We have the homepage here, the components folder, the UI that contains the Schatzian specific components, and then our components right here.

00:03:14 Since we made a couple of changes for this entire module, now might be a good situation to push them.

00:03:20 In this case, we have set up the light and dark theme.

00:03:23 So we can say set up light and dark theme, Schatzian, and navbar.

00:03:28 I'll commit it, sync it, and we're good to go.