Current section: Cookies 5 exercises

Implementing Theme Switching with Conform and UseFetcher

Loading exercise


00:00 Alright, we've got a theme switch finally, but every time I click on it, nothing's happening. The network tab's not submitting, even though it's in a form. And the reason is because this is managed by Conform. So let's take a look at that. Right here is our theme switch. This is being rendered inside of our home page,

00:17 or our root component here in the footer. And we're passing along the user preference. We haven't actually set that to anything yet, so it does fall back to light. And we have two options. We have light mode and dark mode. We have icons for those things.

00:32 And then here we have our form, and again, that's being managed by Conform. And because we have some validation, this theme schema, let's find where that is, right there. Because we aren't actually setting the theme, that's why Conform isn't letting this form actually be submitted.

00:52 So your job is to properly set the theme and to properly use the right form. So we're not doing full-page refreshes, so we're going to be using useFetcher so that we don't do a full-page refresh, and it's also not a navigation,

01:09 so that's why we're using a Fetcher here. And yeah, we're only going to get so far into this. We'll have you console log the submission, and then we can work on from there. But most of this stuff should be pretty familiar for you, having gone through the Web Forms workshop already.

01:27 And so Kelly, the coworker, did a bunch of this stuff for you and just left you the little pieces that you need to learn about here. So this first part of the exercise, this first step, is just to get things wired up to send that to our action. And then the next step, we're going to get into cookies and stuff.

01:44 So have a good time with this first part, and we'll see you when you're done.