"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code available till this point of lesson is available at
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.