Building a Light/Dark Dashboard, Part 1

Key Takeaways

[Music] do you ever feel like everyone else knows how to code except for you you've watched the tutorials you've done the homework but when it comes to getting your own project off the ground you end up staring at a blank page for hours you don't know how to get started and you're not even sure you understand what you need to build you might feel like a failure but the fact is that even professional web developers get stumped the trick is understanding what to do when you do get stuck and that's what we're gonna tackle today we're gonna build this light dark toggle from front of mentor and the catches i don't know how to build it but that's okay because we can break the problem down into smaller chunks and research our way to a solution by the end of this series you'll not only be able to build a toggle yourself but you'll have a process you can use to figure out almost any webdev problem you can think of sound good well let's get started alright so when i'm starting a project before i do anything before i jump right into the code and start typing away i try to take a look at the project and kind of figure out what requirements are going to be part of this and what things i would have to build let's pretend that this project that i'm building or that you're building this front and mentor challenge is something from work and what's really cool about front end mentor is that they're actually giving you almost like a real world experience in terms of getting a design from a designer and then having to build that out because that's basically what i've done as a web developer at my job or my former job rather so let's look at the front end mentor challenge so we're doing the social media dashboard with theme switcher and if we click into here we can see you know the desktop design it has a series of cards and it's showing data from the different social media platforms and then on the bottom part there is some more cards showing you know different engagement metrics and then of course at the top right we have this toggle for dark mode and light mode and we can see here that there is both a light and dark mode version of this website so what i like to do usually is write down what the functional requirements of this project are going to be this is really very similar to what i would do in the real world so i'm just going to create a new file here call it notes.md this is going to be functional requirements and notes and you know obviously this is just a casual like note-taking thing let's kind of zoom in a little bit more here okay so functional requirements and notes so the dashboard has a light and dark mode toggle so we're gonna have to do a little bit of research in terms of you know what is the correct markup to use in html um so what html markup to use as well as how to switch between light and dark mode and i believe we're using css variables so that might be another item that we're going to list out here so css variables or variables or custom properties which is i think their formal name but it seems like a lot of people are just saying css variables like myself the light dark mode is kind of the reason that i chose this challenge it's something that i'm not super familiar with myself so i thought it might be beneficial to just show you the seedy underbelly of building websites and all the research and googling that is involved as well as trial and error so just trying to keep things you know honest and open around here so here's the brief challenges about this landing page as close to the design as possible which is definitely important the only javascript required is for the color theme toggle users should be able to view the optimal layout depending on their device's screen size so you know desktop versus mobile versus tablet and then hover states and then toggle the color theme to their preference so that's pretty straightforward one thing i did was i actually tweeted about building this project thinking about doing this dark light mode switcher challenge in front of mentor so i said i haven't built one before so there's probably some live googling or duckduckgoing since i used ducktalk go so let's see i got some pretty good replies um with good suggestions from people for things that i need to keep in mind when i'm building this out so that's matt he makes fun of mentor so this person's saying css custom properties are the simplest native way to do it that i know of declare the theme properties at the root which is what i've heard too and then apply a class to the body or use a prefers color scheme media query to override them okay so prefers color scheme media query that's something that we're going to prefers color scheme media query so we're gonna have to look that up and then okay so everything else i kind of know use the root thing okay so let's see and then i got this other tweet from grace snow she's actually a really active member of front and mentor um she's very experienced so one of the challenges i see most commonly using poor html semantics not just for the toggle i actually think the html is a way bigger challenge theme so i was asking like for the dashboard so she was saying where the headings should be should user names be labeled with screen reader only text will the increased decrease of followers be communicated to assistive text okay so let's look back at the design real quick so where the headings should be i'm guessing that is for you know making sure you're using the correct h tags whenever possible so i'm guessing here social media dashboard will be the h1 and then i'm guessing the overview today would be an h2 and then each card would probably need an h3 tag so you know page views likes etc and the other interesting thing she said was should user names be labeled with screen reader only text this is an accessibility thing so if say you are visually impaired you might be using a screen reader to navigate the internet and that means that you need websites that you build to be able to be navigable by screen readers so they'll actually read out loud to you what the content is on the website so if we look at the design for example on the first card here it says you know facebook and then the facebook username twitter with the twitter handle etc for the different platforms and if you're visual you can see the facebook icon or the twitter icon and you know what platform this card belongs to but if you have a screen reader it's not going to say that so what i'm assuming grace is saying here is that we can add some text that's only going to be i guess readable by the screen reader but it's not going to visually appear on the page to say for example facebook nathan f or twitter nathan f things like that just to make things more accessible you know for screen readers and do the same thing with the bottom cards like you know page views on facebook or likes on facebook likes on instagram so things like that are unfortunately oftentimes the last thing or even just forgotten and i'm as guilty this as a lot of other people are and accessibility is something that i'm trying to get better at so we'll try to keep these things in mind and let's make some notes on that as well so excess ability accessibility is that right excess no i think there is two s's you know like when you look at a word and you like look at it for so long that it starts to look weird um that may or may not be spelled correctly okay so accessibility make sure headings use correct heading tags and then screen reader only text for you know card titles username so just things to keep in mind there and then another thing we actually might need to research is the toggle itself for accessibility as well so dark light mode toggle i guess yeah what html markup accessible we'll go into that a little bit later so let's go back to the tweet um let's see jesus variables someone else says and then at the bottom this is from killian uh volkov he makes the polypaint browser which we're actually going to be using later in this video so he's saying extract if he had a third system default option so a third option to the toggle so let's check out his blog post here okay your dark mode toggle is broken so let's see what he's saying here so do you need a toggle do you really need a toggle to support dark mode not really you can support dark mode by using the preferred color scheme option which that other person mentioned earlier so that that's another note to myself that this prefers color scheme is probably something that is accepted or a best practice and we'll be researching that later so because you in built into browsers it gives you one of three values light dark and no preference okay so here's the issue the issue or the problem here is that most toggles have two states you either have a light mode or dark mode and the choice is forever stored in a cookie or local storage which could break your dark mode if if i'm guessing you've set in your browser or your os you prefer either light or dark so this is saying that the toggle actually needs to have three states light dark and system preference which is what the user sets on their own computer and then there's this preferred color scheme media query so this is mentioned again okay so what i'm getting from this is that the toggle actually so switching between light dark modes via javascript and then three option toggle light dark and then system preference and that goes into the prefers color scheme media query so this looks pretty good so far so you know we're just making a list here of all the things that we're going to be doing research on in a little bit okay so i think and then this is an example of stack overflow giving you these three options all right awesome so i believe that was all for the tweet so now we have the items that we need to research we're just going to kind of go down the list so the first one is the light dark mode toggle so what i need to figure out is what html markup do i need to use and how to make sure it's accessible so if we go back here um so grace know actually did a challenge on foreign mentor which i did find in my pre-research research and it's linked here so an accessible toggle in html css on js and this is for a this other challenge which is a pricing component with toggle so you can see that here and she made some notes here using an accessible component from this person scott o'hara styled form controls so let's check that out okay accessibility of style form controls so i know a little bit about this basically you know your form controls are like the checkbox the radio buttons um form buttons form text boxes things like that and what people sometimes do when they're styling them to make them look prettier is to instead of using the actual radio button or something they'll just build one using a div and css and that's not navigable by screen readers and it's a bit confusing because you're not using you know the traditional html form elements for that so what i'm guessing this website is telling you is and let's load the actual website here okay so this is the website zoom in a bit um the accessibility style form controls so what i'm guessing is is that this person scott o'hara has created you know html and css markup that you can use if you want to have these accessible form elements just as a starting point so what we want is to figure out the markup for the toggle okay switch check box toggle button let's see what this is okay so this does look like a toggle however keep in mind we do need to use i think we need to use a radio button list because this button i believe only has the on and off settings so i think we need this one switch radio button group pattern to create a two option radio button group okay so there you go this is the toggle that's working and there's some notes here okay so here is some example code which is pretty awesome so we can he see here there's a field set which sort of encapsulates the different controls and then there is yes so for each option there is a radio radio button input type so this is probably what we're going to be using now if you remember from killian's blog post we actually need three a three option radio button toggle so this example just has two and i need to figure out is there a three option toggle is that even possible so when i am looking for some examples of ui elements a lot of times i'll just go to codepen so codepen and we're going to look for toggle maybe three and then just hope something pops up so let's see what happens here okay so no no oh here we go css multi-position radio switch okay perfect so what i'm really looking at here is an example for you know what i can build that i can use as a reference okay so there's two positions three and even four that's pretty funny cool so we're using we'll probably do something like this so my guess is i would make the middle position the system default and then maybe light on the left and dark on the right and we'll have the default be the default let's just check out their markup really quick too looks like um they too are using a radio button input which is good so that's another sign that you know this is kind of the way to go in addition to obviously seeing it here and i believe and then also with grace's challenge here so this is just good to know you know we might need to come back to this to see how they style the three positions because you know has this nice sort of animated thing so you know we can kind of go back to this when we need to so i'm going to take that link so here we go light dark mode toggle um three option toggle we're going to add a link here and then the hdl markup we'll add a copy this thing here just so we can you know go back and make sure we're following what that's saying so now we have the radio button toggle markup research complete i think i have enough references that i can work from this later on when we're actually building so let's move on to look at using javascript to update css variables so i use duckduckgo update css variables with javascript and let's see what happens a lot of times i will just click on the first result here but i also try to kind of filter the results based on if i know a website is considered you know a good source of information and i haven't heard of designsize.com i'm sure there's a reason it's coming up first but i look at css tricks a lot so let's check that out okay updating a css variable with javascript so css variable up here so you set the variable it's mouse dash x and then mouse dash y okay so here's some code examples how to update it from the javascript so we're going to say let root equals document document element and then to that document document element here we go so root.style.set property so this is probably what we would use to update the css variable so this is good to know i guess switching between like light and dark modes be a javascript so maybe for under css variables we'll add a list link here let's just add some spaces between these to make it look a little bit better so that's probably right now just for you know just for kicks and whatever let's see what this first result tells us and we can compare what this result is telling us with what the css tricks link was telling us and just see if they match up you know it's another sign that this is probably the best approach okay so style set property okay so this is again saying you want to set it on the root pseudo class which is what everything else we've read is saying so that's a good thing okay so this looks pretty familiar document document element style set property which is you know they they created this root let variable i guess just let's not variable anymore it's a root style set property and they're saying the same thing here so that tells me that this this is a good approach to use so the other thing i think i need to research is you know doing some research on light and dark modes just because i want to see how we need to sort of format the colors so let's say light dark mode css variable see what comes up okay so create light to create a dark light mode switch with css variables dev.t.o is i think pretty good um obviously your mileage may vary depending on the actual author so let's see what this person is saying okay starting custom properties okay so this is root primary color you know setting it to different things and then data theme dark i have not heard of that and i believe that people had mentioned this prefers color scheme media query so maybe i'll copy this and do light dark mode prefers color scheme maybe delete the mode so light dark prefers color scheme see if we can find some examples here okay so developer.mozilla.org that's usually a pretty good source of info prefers color scheme css media feature is used to detect if the user has requested a light or dark color theme and this is similar to what um killian's blog post was saying so let's see okay so they've been a code example here okay here's what we're looking for so in the css there's a at media rule and it's saying prefers color scheme dark and it has a set of colors using the dark scheme class and it's setting the background to dark gray and color to white okay and then there's another at me preferred color scheme light and then that's using the light skin class background white color it's like a medium gray okay i'm actually curious to see one thing that um killian mentioned is that you can set this in your os or your browser [Music] interesting okay so the no preference you mentioned no preference i think but it's not really it's only supported in safari i'm not really supported in anything else um ooh simulate prefers color scheme in firefox which is what i'm using okay so i guess what i'm curious about is like i haven't really set the color scheme thing here but i believe i can set it in windows um and display let's make this one a little bit bigger i believe it was under color oh dark mode here we go so under colors choose your color dark so if i change it to light what happens oh everything turns light interesting i'm actually curious to see if that affected any of these web pages that i was looking at okay so here we go here let's change back to dark and see if this changes at all oh my gosh it did so the day and the night changed that's pretty cool changing the color light versus dark will sort of use this prefers color scheme value so what i think i want to do is going back to the challenge so right now i have my operating system set to dark mode if i just load this website i want it to use the preferred color scheme media query and detect that i have dark which is kind of what they're saying here so prefers color scene dark like that and then if i set it to light then it would switch to that without having to actually do the toggle but my guess is then the toggle works because let's say i have my thing set to dark but if i want to load this website in the light mode if i change it to light then it can change to light even if my os mode is set to dark mode so that's what i'm guessing is a good ux so you know if i'm wrong about this feel free to flame me in the comments so let's write a little note on that and how that all works so light dark mode toggle takes system preference by default but can override with toggle this is just kind of a note to myself okay so then the switching between light dark modes via js i need to add the link that i did for that so i'll just copy this did i not do that before oh yeah i did oh i did just the updating this us variable but i didn't add the link for um this thing prefers color scheme and how that all works maybe i'll move this up here too so it's switching between light dark modes via js and prefers color scheme media query okay cool so i think that's pretty good um for the dark and light mode toggle stuff so the correct heading tags i think i know enough to to just add the correct headings and the screen reader only text for cards and titles and usernames so let's look up that screen reader only text okay so accessible360.com that sounds that sounds pretty good okay screener only text is great for providing more context to a link whose purpose may be obvious visually due to its location but could be confusing without visual cues so this person is adding some additional text to the add to cart button saying you know info about the product and it's adding a class screen reader only that's interesting okay screen reader only position absolute interesting um another thing i tend to do when i'm looking up stuff is so i don't know a lot about accessibility so let's look up here accessibility developer guide let's see if they you know they seem like a pretty authoritative source right okay so let's check out their website welcome to the accessibility developer guide nice okay this is a good sign the content is based strictly on the w3c's web content accessibility guidelines um okay it looks pretty good so let's see what they got here so i'm just going to go right to the example section and hiding elements since we're gonna add we're probably gonna add some text that we only want to be readable by screen readers this is probably what we're gonna use since we want to have some text that's not um visually visible on the page but it is readable by screen readers cool okay hiding elements visually we don't want to hide all of some screen readers so we want this thing heading on ones visually by moving them off screen okay cool there's no official technique for this but there is a well proven workaround so the only way to hide an element visually while retaining its perceptibility for screen readers is moving them out of the viewport using absolute positioning i think that's similar to what that other example was here yeah so they're doing absolute looks like they're all still using clip path um i don't know if that is actually supported by all browsers this seems like maybe it's a more straightforward approach so basically this is actually a good example so i would take what this website is saying over this website because i mean it seems pretty good but it just seems like this is like kind of a blog you know looks like they're some kind of agency who handles accessibility and i'm sure they know their stuff but i think this clip thing is just not supported as universally as just you know position absolute so this seems to be a little bit more of a simple example so we're going to copy this screamer only text for card titled usernames we'll add that link there okay so this is good this seems like a pretty cool website so just for the heck of it let's see forms i just want to see what they what kind of markup they recommend let's just look at the general good form example it's a radio button this is what we're going to be using radio buttons input type radio okay that's good and then each group of radio buttons and checkboxes have surrounding field set legend structure so this is something good to keep in mind for the markup let's kind of go back to that example from scott o'hara so field set and legend okay cool so it seems pretty similar so it's another vote in terms of you know this using the radio button list for the markup screen readers okay in addition to the controls label so each radio button will have its own label screen readers also announce the legend of the surrounding field set okay so they have an example on codepen let's just check that out i'm just kind of curious what the legend is for i don't see a legend here oh wait here legend hobbies let's just kind of scoot stuff over here alright so legend says said hobbies so where is that okay oh so it's sort of like the title for the set of radio buttons so my guess is for the toggle i would do something like set the legend field or the legend tag to say dark light mode or theme maybe something like that something that's kind of just descriptive of what you know what's the purpose of this of these radio buttons and then to make that only visible only readable by screen readers so that's a good that's good to keep in mind um so i'll make a note about that because i don't want to forget about the legend thing let's apply that to the dark light mode toggle um here hcl markup i guess i'll just make another note here use field set legend and then radio inputs okay so i think that's all the notes i needed so i think we have everything we need to go from here and that's how i'd turn a challenge that's out of my comfort level into a manageable project remember it's okay to not know everything and there's almost nothing that a bit of hard work and research can't fix if you found this video helpful please leave a like so more people get a chance to see it and if you want to be the first to find out when the next video in this series drops don't forget to turn on notifications in the meantime if you've enjoyed watching the process of web development i have another series where we build an entire website from scratch using html and css or if you're completely new to web development take a look at my roadmap video where i lay out the important steps to starting your journey into the field and lastly a very special thanks to my github sponsors your support directly makes these videos possible you all rock that's all for now thanks so much for watching and i'll see you next time [Music]