How to Add Dark Mode using Shadcn UI and Vite | Tutorial

in today's tutorial I will show you how to set up dark mode using sha CN UI I will be resuming from a previous video where I show you the exact steps to set up a react app with shat CN UI to get started the first thing we need to do is to create a new file inside of the component's folder called them provider. TSX I will do that now by switching over to vs code and inside the component's folder I will create a new file called theme provider. TSX and I will paste a code from the documentation so it should look exactly like this and just just hit save going back to documentation the second step is to add the de provider to our root layout I will go ahead and copy the import statement then switch back to my code open up app. TSX and just make sure to paste the code that I just copied then we can go back to documentation and just copy this entire function and just paste it in here then we can go back to documentation for the last step which is just to place a mo toggle on our site so that we can switch between light and dark mode copy the code go back to our code editor and inside the component's folder just create a new file called mode toggle. TSX then paste in the code that we copied and hit save one last thing we need to do is to install the drop down menu component that you see here we can easily do that by going back to the documentation clicking on drop down menu on the leftand side click on installation and just copying this command going back to my vs code I will now just run the command once the download is complete the last thing we need to do is to display the mod toggle component and we can easily do that by just doing this and hitting save then we need to import the mode toggle button now we can run mpm runev to start the react app if we open the app we can now see a single button that will allow us to toggle between dark and light mode that is the end of this tutorial hopefully you found it helpful if you did please like the video and don't forget to subscribe for more content

Channel: Andy's Tech Tutorials

Views: 1,695

Keywords: shadcn ui, shadcn, shadcn ui tutorial, josh tried coding shadcn, shadcn tutorial, shadcn crash course, shadcn ui crash course, shadcdn, how to install shadcn, theming using shadcn ui, shadcn nextjs, learning to code, how to enable dark mode in react js, laravel shadcn, shadcn laravel, shadcn install, tailwind shadcn, shadcn ui nextjs, tailwind shadcn ui, ui shadcn, tailwind css shadcn, shadcn cli, shadcn vue, vue shadcn, nuxt shadcn, shadcn nuxt, shadcn react

Id: CtyON6I4IZs

Length: 1min 47sec (107 seconds)

Published: Thu Jan 25 2024