Building a Light/Dark Dashboard, Part 5

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this video I build the dark/light toggle and let it be controlled by the user's system preferences and local storage, and manually controlled with the toggle. The dark/light theme is switched by using JavaScript and CSS variables / custom properties.
Full playlist: • Building a Light/Dark ...
Source code on GitHub: github.com/thecodercoder/fem-...
Challenge on Frontend Mentor: www.frontendmentor.io/challen...
Live website: codercoder-darklight-toggle.p...
0:00 - Intro
0:30 - Changing the toggle to a 2-option based on feedback
20:46 - Use system preferences to load light or dark theme
44:27 - Build the toggle logic to manually change light/dark theme
1:09:36 - Save toggle settings in local storage
Resources:
Andy Bell - Create a user controlled dark or light mode -- piccalil.li/tutorial/create-a...
____________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

[@filippetranovic5763]

I have no idea what you're doing, I'm only just starting my coding journey, but it's so interesting to watch how you solve problems and your thought process! Thank you!

[@aslicodes9736]

My content can help you to learn next level CSS creations, but first of all learn basics of HTML CSS and JavaScript 😁

[@agustinvis5720]

If you didn't see it, she has an excellent video explaining how to do an ordered coding journey. The video's title is "Learn web development as an absolute beginner". kzbin.info/www/bejne/r6Sof2iIlrCCoqM Good luck in your journey!

[@Ealdorman_of_Mercia]

@@agustinvis5720 Interesting, I will give it a shot.

[@ngoako]

Success! And I watched every one of the 5 parts. Side note: You've convinced me to learn SASS now

[@TheCoderCoder]

Awesome!! Thanks for watching, and welcome to Sass 😁

[@rtr.harshalpatil4999]

Me too. I started learning right after watching part 1

[@cory9720]

I watched it all the way through. Thank you for the tutorials.

[@serveshchaturvedi2034]

Didn't know toggle button can be this daunting. Absolute gold content 🔥

[@CrochetBecky]

I watched all 5 parts! I am just starting my coding journey, so this was a neat thing to watch and listen to.

[@TheCoderCoder]

Glad this could help you!!

[@alire7918]

Thank you very much for your fascinating teaching method. It's like we are sitting next to our senior developer colleague working on a joint project and sharing our thoughts, and she guides us whenever we get lost. it is great.

[@agustinvis5720]

Agree! She explains very well, is affable, the videos are very friendly and you can learn a lot of things.

[@VinceM1000]

As always a awesome tutorial. Get so much information and learn so much from all of your videos. Keep it up and can't wait for more. On to the next video series of yours.

[@marcusantenor793]

I just went from noob, to almost not noob with this tutorial. Thanks.

[@NicoleBardales]

Made it all the way through! Thank you!

[@ChaeWookKim-vd7uy]

I almost done with this project! I have learned alot from your videos and hoping to see more in the future:)

[@aperture0]

So i was recommended this channel today. Looks interesting!

[@mantech560]

Thanks so much, this was an amazing class to follow. I coded with you every step of the way and the key things I've taken away are how to research a project, how to structure a project, how to use BEM naming convention and a whole lot of other lessons as well. #Grateful

[@izanagiisnumb]

Loved all parts

[@rahmiwray6968]

Made it through. Love your content

[@piyushaggarwal5207]

watching you speak while thinking and doing blows my mind

[@oussamagharrasse326]

Thank you so much I learned a lot from you

[@PuShareOfficial]

I'm still learning c Programming and nearly finished foundation year and I really like coding.

[@marcelemonteiro1519]

Thanks for this video! I loved it

[@hamzehqatash6256]

Thanks a lot, it was really helpful.

[@tcpstudio]

Looking forward to watch 🕵️🕵️

[@nro337]

Solid video as always!!

[@TheCoderCoder]

Thank you!

[@piyushaggarwal5207]

yaar ye kitni awesome hai

[@abdulfaizaan9802]

Thank you for this

[@TheCoderCoder]

You're welcome!

[@srinivasmalvadkar1825]

It will be really informational

[@TheCoderCoder]

I hope so!!

[@srinivasmalvadkar1825]

@@TheCoderCoder it helped 😊

[@ahmedragab7934]

Love it ♥

[@aimananizan1064]

Nice, I watch and follow till the end. Thank you !!!!. Anyways, I noticed that for mobile view, the layout for toggle dark mode look like misplace.

[@i_m_veer_singh]

Great video as always. Can you please put the sequence numbers in the video title for better followup experience from the previous videos for the same series! Thank you so much!

[@TheCoderCoder]

They all have the number in the title-- you can see all the videos in the playlist linked in the description. Thanks for watching!

[@i_m_veer_singh]

@@TheCoderCoder oops, totally missed that, Thanks

[@varshniveralevel8347]

Mam, is your learning website fully ready? I am noob in HTML5/css and javascript and I am really looking to start from basics. Do you have UPI payment method?

[@NickyTuan]

I like It ,😊😊 i wanna try that too ^ ^

[@dogoingur]

Yo thanks

[@kr_international_8608]

Plz make a SASS Full-video-tutorial for absolute beginner... we are eagerly waiting... by the way I love your style very much...

[@TheCoderCoder]

Working on one 😁

[@ngoako]

1++

[@SlimBloodworth]

At 15:38 in this video you are looking over some docs on how to position the legend element. Under the green "Note - this does not change the computed value" spot, and below the "If the element's box has a child box..." there is a list of three things, one of which says "The child's used value of float is 'none' .", and another which says "The child's used value of 'position' is not 'absolute' or 'fixed'." This lead me to think that we could use float and since the .toggle display is set to grid and not block or inline-block, and the grid is one column, we could use both float and align-self in legend and not have to go back and create the label elements again. This is what I did: " .toggle { display: grid; grid-template-columns: 1fr rem(48); gap: rem(4.8) rem(8); border: none; margin: 0; legend { font-size: rem(14); grid-column: 1 / 2; float: left; align-self: center; } " It seems to be working.

[@SlimBloodworth]

I'm not finished with the video or the project at this point, so things could change... LOL!

[@thebrain678]

not sure if this matters but I was able to get the legend to position correctly by giving it a position absolute left 0 and top of 3px. I also gave it a column width of 90px so that the text wouldn't wrap

[@TheCoderCoder]

That's awesome! I don't know why I didn't think to use position absolute 😅

[@thebrain678]

this code does change theme preferences and toggle just wanted to share if you were still curious thanks for the tutorials that was a long one but I actually stuck with it. I find it funny when all those numbers pop up while you are thinking.

[@thebrain678]

let radios = document.querySelectorAll('input[name="theme"]'); updateOnThemeChange("dark", activateDarkMode); updateOnThemeChange("light", activateLightMode); setDefaultTheme(); moveToggle(); radios.forEach((radio) => { radio.addEventListener("click", (e) => { if (e.target.id === "dark" && e.target.checked) { activateDarkMode(); } else if (e.target.id === "light" && e.target.checked) { activateLightMode(); } }); }); function setDefaultTheme() { document.body.classList = localStorage.getItem("theme") ? localStorage.getItem("theme") : prefersColorScheme(); } function activateDarkMode() { document.body.classList = "dark"; localStorage.setItem("theme", "dark"); moveToggle(); } function activateLightMode() { document.body.classList = "light"; localStorage.setItem("theme", "light"); moveToggle(); } function prefersColorScheme() { if (window.matchMedia("(prefers-color-scheme: dark)").matches) { localStorage.setItem("theme", "dark"); return "dark"; } else { localStorage.setItem("theme", "light"); return "light"; } } function moveToggle() { let lightRadio = document.getElementById("light"); let darkRadio = document.getElementById("dark"); localStorage.getItem("theme") === "light" ? (lightRadio.checked = true) : (darkRadio.checked = true); } function updateOnThemeChange(theme, func) { window .matchMedia(`(prefers-color-scheme: ${theme})`) .addEventListener("change", (e) => e.matches && func()); }

[@lean52.826]

i couldn't load the styles once i uploaded the site, then i realize that gitignore was ignoring the 'dist' folder, i included that folder into my github and now it loads the styles just fine, but i checked coder coder's repository and it doesn't include the dist file, so i don't know if what i did was correct

[@kholofelomocheko]

Thanks!

[@TheCoderCoder]

Thanks for watching!

[@kholofelomocheko]

Yey🤗🤗 it finally works. I love the look on your face when you get it right. Awesome journey. Thank you Jessica!

[@SwiddyDiddy]

About 40 hours into learning to code so far, and the amount of complexity here scares the hell outta me lol.

[@TheCoderCoder]

This one is pretty complex, so I wouldn't worry too much about it! You can find beginner challenges on FrontendMentor.io and work your way up 🙂

[@aleemuddinmohammed3615]

Plz make video for how beginners can start Career in coding programming for those who can’t afford to go college or university.

[@gowthamrishvan3961]

mam could u suggest me a good path to become a front end developer from scratch ASAP!!!!

[@afzalmahmud1974]

Thank you. ❤️🇧🇩

[@TheCoderCoder]

Thanks for watching!

[@avinashmurmu9070]

1:09:25 Me tooo 😂🔥🔥❤💯 YESSSSSSS!!!!!!

[@CODEABC]

Jasica??could you please tell me if i will be good at css like you or nearest to you.can i able to get highly paid job??though i know javascript, react,little bit of node.

[@dsmssc2021]

you from where

[@gauravamoli9277]

Hii jessica please make tutorials for laravel

[@VibeVentureee]

Hiii love from india ❤️❤️.. please bring some course in KZbin.on.web development for absolute beginners if possible...I plead🙏🙏

[@anshulsingh1265]

Will you teach Data Structures and Algorithm in future??

[@TheCoderCoder]

Unfortunately probably not, as I don't have a ton of experience in those myself

[@josephbassey1501]

@@TheCoderCoder you're awesome, I hope to be like you someday and probably start a coding channel as well

[@Blackpluged]

Ahh yes, someone who can accept feedback and constructive critisim.

[@Inuway]

"So maybe we can fast forward..." Me who is doing step by step everything to get a hold of it - 🗿🗿🗿

[@Pilosofia]

I can't imagine myself spending 3 hours building a switch button .

[@TheCoderCoder]

It's hard but you can do it!

[@parthpatel2513]

Will you teach android development?

[@TheCoderCoder]

I don't know it, sorry!

[@AliyAkhbar]

Why not use scss var? example like … $toggle_button : #fff;

[@TheCoderCoder]

You can change CSS variables on the fly with JavaScript, which you can't do with Sass variables. But I think I could probably have done it with Sass vars here since I wasn't doing that in this video 😅

[@japroz]

I think u should remove the background in your videos and have your window with your video in the bottom bcos the background is quite distracting

[@TheCoderCoder]

Thanks for the feedback!

[@p09m21]

Make some python tutorial s

[@PhilMinecraft]

4 views and 14 likes??

[@TheCoderCoder]

Whoa haha

[@steveotieno8441]

How many like for The super IDE

[@discoveredbyatta7695]

hey mam pakistani_student += 1;