Dark Mode Theme Switcher in Svelte

the year is now 2023 and having the ability to set my preferences to light mode or dark mode is almost a requirement of mine when determining if I'm going to use an application long term or not let's learn how we can add that to our spoken application with server-side rendering and persistent state so we can keep the same theme every single time a user browses their website with the use of a little bit of spell kit magic and Daisy UI we'll be able to add all these different themes to our application and the same logic will apply if you're not using Daisy UI if you have your own custom themes defined or if you're using another library of sorts so let's learn how to make this happen Okay so to start out I think it's a good idea to know how we actually can change a theme inside of our application so it's obviously going to depend on your specific setup but if you're following along using Daisy UI this is how we do it so we have this data Dash theme equals is how we set the different themes and if we scroll down here a bit we can see that the default theme is light or dark for dark mode but you can change the default theme if we want so if I come into my application here you can see I have just a demo page set up I don't actually have any of the function baked in yet and if I want to change to light mode right now I have to manually go into my settings change to light and you'll see that the theme automatically applies and that's using the CSS prefers color right but we want to actually able to keep that persistent right so let's just say I have my Chrome or my Microsoft edge browser in dark mode but I always want this specific site to be in light mode right right now we don't really have a way to do that so let's go ahead and start to add that functionality to our application all right so what we need to do is we need to come up with a way to tell our server what theme we want right and then a way for our server to persist that theme across you know multiple different requests throughout the life of that theme existing okay and as you can see right now I just have nothing going on here I have a couple list items within this drop down menu here and what I'm going to do first is I'm actually going to use a form action to tell my server what theme I want to select So within this UL here and again this doesn't matter where you put this in your application it's just for this example we're going to set up an form we're going to remove the action and we're going to say method is post and this form is going to wrap all of these list items here within this UL okay now what we're going to do to these buttons is we're actually going to say form action equals and we're going to say slash question mark slash set theme and theme equals dark without those quotes Okay and I can do the same thing for this light button here and change this to light so what this form action does if you're not familiar is it actually will send the same form or submit the same form to a different endpoint right with the same data in this case we're not actually passing any data really all of our data is here inside of the URL so whatever we're trying to hit inside these query strings right so we'll go ahead and save this now and now we can actually set up our form action so we can come into our page.server here and I'll say uh kit actions here to quickly add this let me add my type safety here and I'm going to have an action called set theme remember we're inside the layout here which is why I prepended this with this slash here before the question mark slash because you know if we're on another page we still want to be able to hit this action on our root page okay so that's why I added that there so set theme is going to be asynchronous and we're going to take in URL and cookies and we're going to do is we're going to say const theme equals url.searchpreams.get theme and then we can console log theme right here just to uh to demonstrate what that would be okay so now if I open up my console here and I come into the browser and I click on light we're going to see that light gets console logged here if I come in here and hit dark you're going to see dark it's gone so long okay so that's kind of how we're able to access what theme the user is trying to set so how do we actually persist that and then how do we retrieve that information update our stuff server side before the actual theme gets rendered and we have that weird flicker right we don't want that flicker at all so what we can do is we can say if theme and again of course you'd want to validate this against you know acceptable themes within your application so you don't have people passing in whatever random query parameters they want but um we're just going to go here and say if theme so theme is not null we're going to say cookies.set color theme to theme we'll say path of the root path so it's available on all the pages and then we'll set the max age to a year so we'll say 60 times 60 times 24 times 365 and we'll leave that alone for the time being so now what we do whenever we hit this button we should have a theme to get set right or if you have a cookie to get set within our browser so if I click on dark here and I open up my browsers application here wow this is blinding let me go back to dark mode here we can see that we now have a color theme cookie with a value of dark so if I change this to White we can now see we have a color themed cookie with a value of light okay so this can be very important for us moving forward and that's how we're gonna be able to server side render these themes okay all right so this is what a default hooks.server.ts looks like and this is what's going to enable us to server side render the updated color themes and the correct color theme based on that user's cookie all that is going to happen here so this is what the default one looks like if you don't set anything so if I didn't have this file at all this is what it would look like okay and I have a video going over hooks in a little more detail my page if you want to look at that but what we're going to do here is we're going to say that theme and we're set equal to null okay and then we're going to do is we're going to try to get the new theme right so this will be the theme that the user is trying to set so we'll say const new theme equals event.url dot search params dot get em right and then again remember hooks run on every single request of the server so it's pretty much going to intercept that request that we made from our form action and it's also going to be able to get the theme right and then we can say const cookie theme equals event.cookies.get color theme now what this is we're actually reaching into the cookies of our browser here and I'm not sure what happened there but let's open up our browser application that's going to grab this color theme cookie here okay so now we have a new theme and a cookie theme so we're going to do is we're going to check we're going to say if new theme so if they have a new theme set that means they want to override their cookie theme right so that thing should take priority over the cookie theme right so we'll say theme equals new theme else if cookie theme so if cookie theme is true and this will be string or undefined right and this would be also be stringer null so if these aren't set you don't have to worry about them you know throwing an error at you we could say theme equals cookie theme so basically if they don't have a new theme we want to use the cookie theme okay and then we're going to do is we're going to say if theme so if theme exists at all we're going to return a weight resolve event and then we're going to do is it takes in an optional second parameter if we look at this documentation here we can see that we have access to transform page chunk which applies custom transformations to HTML and we can see that an example here of them replacing something with something else right so I'm sure you already guessed this point we're going to be doing so what we're going to say is we're going to say transform page chunk I'm going to take in HTML right or destructure HTML and we're going to say html.replace data Dash theme equals this which we're going to set here in a second with data Dash theme equals quotes dollar sign oh I should not have these here I should have these brackets here whoops okay so we're going to do is by default we're going to set data Dash theme equal to this empty string here so instead of our app.html we can come in here and we can say data Dash theme equals this and Daisy y will still work just as expected right so if there's nothing there if I now set my color theme to dark oops let me um clear the cookie out right now right you can see that it was actually working there for a second so if I go to light you're going to see that gets changed back as normal if I go back to dark and then I set my theme to light we can see now that it's already working a bit we now have the color theme set to light if I go back to dark we now have color theme set to dark so this works great and all but one thing that you'll notice is we're reloading the page we have this kind of ugly URL up here every single time that we change themes right so what what can we do we can use Progressive enhancement to make this a bit better okay so we'll come into our layout that's felt and we're going to define a submit function so we'll say const submit update theme it's going to type uh submit function it's going to take in an action we're going to destructure the action here and we'll say const theme equals action dot search params dot get theme if theme then we want to say document dot document element so the HTML element set attribute data Dash theme to theme and then we'll come down here to our form and we'll say use enhance equals submit update theme so now if I clear this query string out of the URL and I change themes we can see that it works the exact same way it just seems a bit more seamless right uh but this would still work for those users who again do not have uh JavaScript running so which is pretty cool so it's still working server side all this stuff is happening on the server okay so the last question you might have is all right this is great but what if we're trying to submit from a different page right isn't it going to redirect the user to that page because the action is sent from A Different Page and we can actually take care of that as well and it's actually not too too difficult here so what we can do is instead of our form action buttons here we can import page first from App slash stores and we can pass another search parameter and we could say and redirect to equals page dollar sign page dot URL Dot path name do the same thing here let me just copy this down so then inside of our page.server inside this action we can also get the redirect to url.searchpreams.get redirect to and the url.path name is going to have whatever the current page is whatever the path name is so we'll console log this just first just so you can see it and what I'll do is I'll create a new route here with a plus page that's felt and I'll just say H1 hello so now if I go to slash hello again since the layout since that form is in the layout right we need a way to determine which page we're on so we know which page to redirect back to all right so let's watch our console here and let's let's just um set the theme we can see that we get slash hello console logged so inside of here what we can do we can take advantage of that and under this if statement we can say Throw redirect 303 redirect two otherwise we'll go to the root route and this basically says hey if if redirect 2 is truthy we're going to use redirect 2. otherwise we're going to use uh the root route okay so if something gets passed that is not valid we don't want to you know send the user somewhere crazy right so now we should be able to test this from the hello page if we wanted to to see here if I set the color theme to light it should stay on this page here dark light dark even without um you know JavaScript enabled here which is pretty cool all right so I know the demo in the beginning of the video showed all those themes so let me just wrap up by adding the rest of those themes here I have them inside of an array so what I'm going to do is inside of my layout.server I'm just going to create const themes equals this pretty long array of different themes and then we can clean this up down here a bit by just saying each themes as theme you can get rid of this bottom button here and we can simply say and theme equals theme and then we'll also have theme Here so now we have a ton of we should have a ton of different themes here let me here we go we have a ton of different themes here now so we can switch to any of these different themes from any page in our application and it will work so that is how you can add server side persisting themes to your spellkit application so if you found this video informative I would greatly appreciate if you would like and subscribe it greatly helps the channel if you have any questions you can join the Discord server and ask them in there or leave a comment down below thank you so much for watching and I will see you in the next video [Music]

Channel: Huntabyte

Views: 13,202

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, api route svelte, svelte routes, layouts, advanced layout sveltekit, sveltekit icons, sveltekit extensions, sveltekit productivity, svelte search, svelte react, svelte searchbar, svelte filtering, svelte stores, how to add search to svelte, search data svelte, svelte data search

Id: 3GpZkVBjXfE

Length: 14min 2sec (842 seconds)

Published: Mon Jan 02 2023