Dark Mode Switcher Exercise

[00:00:00]
>> How about we, stretch our muscles a little bit with, well, physically, if we can, and also, mentally, with a little quick win, and just imagine a GIF of Darth Vader [LAUGH] emerging from some fog. This is a very exciting webpage. Web application [LAUGH] where we have a little toggle, and is it even a website in 2023?

[00:00:30]
If it doesn't support dark mode and light mode, right? No, we now have to have dark mode for everything. So let's start there. This is the number one skill for professional JavaScript developers implementing dark mode. All right, so we've got a little toggle. We've got a very excited Darth Vader, because, obviously, his browser is set to dark mode.

[00:00:55]
And we have a toggle that does nothing. Your job is to fix it. So, if you download this page, which is at professional.javascript.darkmode.index.html you will be able to poke around and see what is going on in this very simple web app. It's a tiny, we'll call it a webpage.

[00:01:26]
But it is an interactive, well not yet, but will be interactive webpage. So if you save page as, you can save it as whatever name you'd like and open it in your favorite text editor of choice. Okay, so in VS Code, this is roughly what [LAUGH] this page should look like.

[00:01:49]
If yours looks slightly different, that is because of things that we're gonna talk about when we talk about developer tooling, namely a little thing called beat. But essentially, you should be experiencing a similar webpage. So we've got some stuff going on. We got some style sheets up there that are just essentially adding some nice default styles to the page.

[00:02:13]
We've got a pretty simple document that as you saw doesn't really give us a lot to work with on the page. But it has a very fancy header and a nav element with one thing you can click on which is an input, a checkbox input that basically is styled to look like styled to look like a toggle switch on off, but Checkboxes are the appropriate input for something where it's either on or it's off.

[00:02:45]
So the question is, is dark mode on or not? Now the fancy style that I mentioned is being applied here also reads a custom System attribute on, well, on any element, but right now, it's set on the main HTML element that's called data theme. So data-attributes, have folks run into these before?

[00:03:15]
>> Yeah.
>> Yeah, where do you typically run into these, yeah
>> Testing.
>> Testing, okay. So these are often used by all kinds of different tools and libraries and things like that as a way to essentially let HTML elements kind of remember some data that the browser doesn't care about because these are just made up attributes.

[00:03:40]
It's a convention to call them data minus, and then whatever the piece of data is that you're interested in. But for example, it's quite easy to read them in JavaScript and then do stuff accordingly. So the stylesheet that we've got basically reads that data theme and applies the styling of her appropriately, this is not a CSS class and you definitely wouldn't want to take one from me.

[00:04:07]
So this is we're just gonna let somebody else handle that and who is handling that is a little tool called Pico CSS. So, if you want to look that up, you can find the stylesheet that we're using. Okay, so Pico CSS basically puts everything that we've got in this page in dark mode because we have this data theme equals dark.

[00:04:31]
So there's also a data theme equals light option that can change things. And if I were to just, Change that here, the whole page would turn into something different. And let me do that in my browser here to show you a little what it looks like. So, yay browser DevTools!

[00:04:59]
I can just edit this page. Should live in the browser. Anybody else do this to mess with those really annoying gatekeeping overlays? No, just me, okay. Now yes, we all do, right? So and if anybody is just needs a refresher on how I got to this interface, which again is the same as what we use for the console, we're just in the inspector Tab instead of the console tab.

[00:05:22]
It's basically there should be a right click and then inspect or Inspect Element option depending on your browser but inspect will get you there. Okay, so if I change this to light, so we've got now glaringly bright. Seen and there's a fun little bit of CSS in there that swapping out the background image to so that we get to see the light side of the force and not just stuffy old data.

[00:05:55]
Okay, so your mission should you choose to accept it is to do what I just did using JavaScript. And in order to do that, you're probably going to want to grab that HTML element somehow, check on that data-theme attribute. There is that checkbox. There's a little handy-dandy ID tag on it called toggle that you can use to find that and set up an event handler, [LAUGH] otherwise known as an event listener.

[00:06:27]
[LAUGH] Onto that check box to change the theme based on whether it's checked or not.