Master "Dark Mode Toggle" Using Shadcn-ui and Remix - A Practical Guide

as I was looking through the docks of chatsy and UI I could see that the dark mode toggle documentation for remix apps was not implemented as someone who's implemented dark mode toggling for my personal website I thought of taking up this task of adding the documentation for remix apps and the dark mode toggling for that I built two different approaches the first approach was based on next themes so you typically copy the code that you've implemented for the next JS and try to apply it on the remix to see if it works and for the next approach I took some inspiration from Kenzie dots epic stack in that epic stack what he's done is he's implemented a concept called client hints and also used some cookies to achieve the same outcome that we have with using next themes on this journey I learned a lot about the dark mode toggling for the server-side rendered apps and I want to share all the knowledge with you in this video what we're going to do is that we're going to implement these two approaches that I just talked about and also we're going to compare the pros and cons of each approach in this video and don't worry I will share the code for both the approaches and it GitHub repo in the description below you can go take a look and play around with it right before we start implementing the dark mode toggle let's look at the requirements of a dark mode toggle a dark mode toggle should have three options dark light and an option for the system the first requirement is that when the user loads the app for the first time we should show the system preferred theme if the system preference is dark then we need to show the app in the dark mode you can know the system preference by running a simple script called window.match media on the client side the next requirement is that if you choose either light or dark in the dark mode toggle even if the system theme changes then it should not really affect the user's preference so if the user chooses dark then even if the system mode changes to light then on the reload we should show only dark the third requirement is that if the user switches the theme toggle to system then we should fall back to choosing the system theme on reload and also on top of this if we keep the app open and then change the system theme on the operating system then it should update our app accordingly now that the requirements are clear let's go ahead and build our dark mode toggle for remix app using next themes Library I've already set up my remix chat cnui app for the purpose of this video you can also do the same thing by simply following the instructions that you see here now if I go to dark mode and there is next.js and they've used a library called Next themes you just have to go through three steps in order to implement your dark mode toggle the first step involves making a new file called theme provider Insider components folder once we have the theme provider component inside our components folder let's go ahead and do the Second Step The Next Step involves wrapping our root layout with the theme provider and then the third step involves adding a dark mode toggle inside our components folder so we're gonna simply copy the code for the dark mode toggle and put that inside our components folder and also import the use theme method from next themes alright so now that we've added all three instructions that we can see here let's go ahead and see if this actually works as expected on the first load it should be the system theme that is the theme is dark and if this theme is light then on the first load it should be light so if I click on the reload it should be light so that's a requirement one for us requirement two is that if I choose dark and if I reload it should be dark in spite of the fact that I switch the system theme either to light a dark it should always stay dark and the reload happens it's still dark and the requirement 3 is that if I choose system then it should fall back to using the system theme and if I switch between light and dark then my app needs to be updated that was my third requirement and the requirement seems to be working so what is happening here if you go into the application then there is something called as a local storage that is set up so on every update we store the information in the local storage if I go and clear the local storage information and then reload the app on the first load you know that there is nothing being saved on the local storage but it's still able to know what the theme is it's actually trying to do that with a really simple script the script runs before hydration that means when your server-side rendered app downloads then the script runs on the client side every single time the class that you see here it's empty on the server side so when you get it on the client side you get it like this and when the script runs it checks for the system's theme it updates it to either dark or light once you save your information so for example if you save it to light then the local storage is updated to light then every time you reload the script will run but it will take the information from the local storage not the windows match media script if the local storage has a value of the system or if it's got no value at all then assume that we need to get the information from Windows match media and also they have a piece of code that runs inside the theme provider that code takes care of updating your apps theme when the system theme changes and the problem is this is only happening on the client side that means your server doesn't really know what the user has chosen now let's go ahead and take a look at what Kent has done with this epic stack if you go around the docs folder there is a subfolder where he has bunch of docs to support the tech choices that he's made for epic stack under that we have one for client preference cookies where you can read why he has chosen to go for this approach and also link the web platform's draft specification that inspired this change the draft has some details about client hint headers the decline can send and the server can accept it goes like this The Client First makes a request to the server when the server responds with some headers stating that it is open to accept certain client and headers from the client then the client reloads by sending the same request again but this time with some client hints as part of the headers in this client hands you can send a lot of things like operating system theme value or if the user likes to have animations or not etc etc the best thing about this is that the server is completely aware of the client it will tailor the request based on the client's preferences and we don't have to run a script to imperatively update our Dom like our next themes approach since this is still in draft and not sure if all the browsers are going to support it we are going to implement the same behavior using simple cookies and we're going to call them client hint cookies let's go over what we're going to implement and please don't skip the section because this is what we're going to implement in the next steps the server site code are the loaders in our case have access to two cookies one called client hint cookie and the other one called theme cookie the theme cookie value is the value selected by the user if it's light or dark the server will set it as a cookie on the client side the theme cookie is deleted by the server if the user selects the system option and it's empty on the first load of the app the client hand cookie on the other hand is populated by a script we run on the initial load and it's the value we obtain from running windows.match media script and the client's job is to keep the CH cookie always updated on app reloads and when the operating system theme changes the code that is responsible for applying the theme on the server side would first check if the theme cookie has a value if not we'll use the value from the CH cookie so what I'm going to do is I'm going to give a quick Code walkthrough of what's been implemented and where to start the implementation from so the first file that we're going to have is that a file called client hints under the lib folder this file has few things that I would like to explain the first thing is that we have a client hints object and it's got the name of the cookie get value code so this is the window.match media script that's going to run and this is a fallback field we we use this fallback field when the cookie is completely let's say disabled and we have a method called get cookie value what this method does is it simply takes the cookie string and extracts the value from the cookie string and the next method is called get hints it gets the requests and does all the magic here and then gives back a value called hints and then lastly we have a client hand check component this client hand check component returns a script descriptor run on the initial load and also on the reloads the script will manage the client hand cookie for us on the first load since there will be no cookies set it will set the cookie and it will reload the page on the reload the server will have the cookie that we've just set right here available for it and we'll apply our theme classes accordingly based on this cookie and also it's got another script inside the use effect this will take care of updating the client in cookie if they switch the theme on the OS and we have some code for nuns so this is used for CSP so that's it for the client hints file we have all the methods to manage our client and cookies ready now let's go ahead and make another file called themesession server.ts inside lib folder this runs only on the server side and this code will not be shipped to the client side it gets a theme from the theme cookie that was set by the server and along the same lines it accepts another method called set theme which would update the cookie and the third thing is we would have to have an action route this action route has an action which is called when the user selects the options in our dark mode toggle this action method that you see here enables a server to set a cookie on the client side if the user has selected the system theme then it deletes the cookie if not then it sets the cookie and for the sake of collocation we have the team switch component that will use a dark mode toggle and we'll call this action that you just saw here based on the user preference so if I go to dock mode toggle I have changed the docmo toggle in order to accept method called handle theme change and this handle theme change word be called based on the option that the user selects on the same lines we have another hook called use theme hook this use theme Hook is the theme code that we saw and it will essentially check for the theme cookie if it's available if not it will get the value from the CH cookie so first let's use the theme switch component inside our index.ts file and then we go to the root.tsx and make a new loader the root loader is the first method that would be called when a request enters a remix app we basically return an object from the root loader and we will essentially use two methods inside our utils to use the data that we return from our root loader and pass it on to other places so this use request info will get the information that we pass from the root loader and we'll pass it on to use hints and we have have some functions to check if the theme applied as the right theme let's go back to the root so we have two hooks that we're gonna pass and the first stick is for nuns and the second Hook is use theme hook that comes from the actions and we use the theme value inside our class name so every time the app loads we will always have the steam values set so this is the advantage for us in this approach in case if you use the next themes approach this value will be empty so you still have to update it with a script on the client side for us this value will always be there and we're going to use the client and check component inside our head so with this line of code our implementation is done let's see if this works okay let's check for the first requirement on the first load it will set the cookie value and do a Reload of the app the reload happens really quickly so you can't really see that the next thing is that when the user selects a theme we should set the theme cookie if I go back to the operating system theme and then change the operating system theme it will not have any effect because of the fact that the user wants it to be dark all the time and now I'm gonna choose the system value you can see that when I choose the system value the theme cookie has been deleted and we only have the CH cookie and now if I go and update my operating system theme values the client hit check as a code base to update the CH cookie and do a revalidation and our implementation fulfills all the requirements that we have for a dark mode toggle so you may ask what are the cons of this approach since this requires your cookies to be enabled when your cookies are let's say disabled you will have to fall back to light but then the chances of your cookies being disabled are really really low because of the fact that most of the sites these days require cookies to be enabled the pros outweigh the cons in this approach because of the fact that you have the client data already available for you on the server side and you can also scale it to other user preferences that you want to pass to the server side well that's it for this long video um I hope you like this video if you like the video please leave a like And subscribe for more and I will talk to you soon foreign

Channel: Raj talks tech

Views: 5,607

Keywords: Shadcn-ui, frontend, react, remix, nextjs, dark mode toggle

Id: UND-kib_iw4

Length: 15min 7sec (907 seconds)

Published: Wed Jul 12 2023